Roating Header Image Based On Category

  • war59312

    (@war59312)


    19 years, 7 months ago

    Hey,

    I am trying to show a different custom header image for every category.

    Here is what I currently use:

    <!-- Start Custom Header Images - Shows Background Image Based on Category -->
    <div id="header" <?php if ( in_category(3) ) { echo 'style="background: #fff url(/wp-content/themes/connections/img/header_99updates.gif) no-repeat bottom;"'; } else if (in_category (5) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_01updates.gif) no-repeat bottom;"'; } else if (in_category (7) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_03updates.gif) no-repeat bottom;"'; } else if (in_category (4) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_00updates.gif) no-repeat bottom;"'; } else if (in_category (6) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_02updates.gif) no-repeat bottom;"'; } else if (in_category (8) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_04updates.gif) no-repeat bottom;"'; } else if (in_category (9) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_05updates.gif) no-repeat bottom;"'; } else if (in_category (10) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_06updates.gif) no-repeat bottom;"'; } else if (in_category (2) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_98updates.gif) no-repeat bottom;"'; } else if (in_category (11) ) {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_newsletter.gif) no-repeat bottom;"'; } else {echo 'style="background: #fff url(/wp-content/themes/connections/img/header_main.gif) no-repeat bottom;"'; } ?>>
    <!-- End Custom Header Images -->

    I am sure there must be a cleaner and better way. Any ideas?

    Thanks a lot,

    Will

Viewing 8 replies - 1 through 8 (of 8 total)
  • Kafkaesqui

    (@kafkaesqui)

    19 years, 7 months ago

    My reply on your other thread covers the same solution:

    http://ww.wp.xz.cn/support/topic/92430#post-465894

    Thread Starter war59312

    (@war59312)

    19 years, 7 months ago

    Hey,

    Thanks, but not sure how to use it this time?

    That is how to show a different header for each category?

    Sorry, not a php expert here, still learning.

    I mean it would still be like using if else statement but using $cat instead… Still seems redundant. I am probably just miss-understanding…

    Thanks again,

    Will

    Kafkaesqui

    (@kafkaesqui)

    19 years, 7 months ago

    You noted “I am sure there must be a cleaner and better way.” That way would be to avoid multiple if tests through the use of the category ID in each of your header images (i.e. header_cat_1.gif). Then your PHP is pretty simple:

    <div id="header" style="background: #fff url(/wp-content/themes/connections/img/header_cat_<?php echo $cat; ?>.gif) no-repeat bottom;">

    Thread Starter war59312

    (@war59312)

    19 years, 7 months ago

    Hi,

    oh wow not sure why i did not think of that

    thanks again,

    Will

    Jardry

    (@jardry)

    19 years, 7 months ago

    I would like to implement something similar, but not necessarily create a header image for each category.

    div id="header" style="background: #fff url(/wp-content/themes/connections/img/header_cat_<?php echo $cat; ?>.gif) no-repeat bottom;"

    Could someone suggest a modification to the code so that if there is no header cat gif is found it defaults to using header_cat_1.gif.

    Jardry

    Kafkaesqui

    (@kafkaesqui)

    19 years, 7 months ago

    Jardry, try this (just make sure the paths provided to the two $header_image vars are correct):

    <?php
    $header_image = '/wp-content/themes/connections/img/header_cat_' . $cat . '.gif';

    if( !file_exists(ABSPATH . $header_image) ) {
    $header_image = '/wp-content/themes/connections/img/header_cat_1.gif';
    }
    ?>
    <div id="header" style="background: #fff url(<?php echo $header_image; ?>) no-repeat bottom;">

    Jardry

    (@jardry)

    19 years, 7 months ago

    Thanks for the code, I’ll implement it when I do my next update and see how it goes.

    Much appreciated.

    Jardry

    crikeymedia

    (@crikeymedia)

    18 years, 11 months ago

    I am yet to get into php code but could you not create pull the image from a database bsed on the page id… or append the page_id to select the filename… indexing.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Roating Header Image Based On Category’ is closed to new replies.