• kloy

    (@kloy)


    I would like a different header image to display on each page.
    How can I do this the template?

Viewing 15 replies - 1 through 15 (of 23 total)
  • Jonas Grumby

    (@ss_minnow)

    You would need to use Conditional Tags and have a block of code that would look something like this in your theme’s header.php file:

    <?php
      if (is_page("page-slug1")) {
      echo '<div id="header" style="background:url(' .  get_bloginfo('url') . '/wp-content/themes/yourthemefolder/images/image1.jpg) no-repeat; ">';
      } elseif (is_page("page-slug2")) {
       echo '<div id="header" style="background:url(' . get_bloginfo('url') . '/wp-content/themes/yourthemefolder/images/image2.jpg) no-repeat; ">';
      } else {
       echo '<div id="header" style="background:url(' . get_bloginfo('url') . '/wp-content/themes/yourthemefolder/images/image3.jpg) no-repeat; ">';
      }
    ?>
    Michael

    (@alchymyth)

    to show a different header image for each page, you could try this method:

    if it is an actual image, you could use this snippet instead of the simple <img src="<bloginfo('template_url'); ?>/images/header.jpg" /> that you may have in header.php:

    <?php $page_id=get_the_ID();
    if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
    if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }
    echo '<img src="'.get_bloginfo('template_url').'/images/'.$image.'"/>'; ?>

    you would need to have an image for each page with the name ‘head-image-23.jpg’ where 23 is the ID of your page.
    (adapt the name and file type to your needs)

    if the header image is a css background image, you could adapt the above code and put it into a style declaration into the <head> section of header.php:

    <style type="text/css">
    <?php $page_id=get_the_ID();
    if(is_page()) { $image='head-image-'.$page_id.'.jpg'; };
    if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }
    echo '#header { background: url(images/'.$image.') center top no-repeat; }'; ?>
    </style>

    (div #header and file location depending on your theme)

    Jonas Grumby

    (@ss_minnow)

    That’s cool @alchymyth. I guess it wouldn’t support arrays though (unless you add an elseif). It also seems like you would need an else statement to cover cases where it is not a Page and/or there is no image w/ the Page ID in the name.

    Michael

    (@alchymyth)

    @ss_minnow

    you are right: if it is not a page, i think you are left with the default image. but you could change the if(is_page()) statement, and extend it to if(is_singular()) .
    and, if it is a page, but the image with the page id does not exist, the code does check this ( if(!file_exists(TEMPLATEPATH.'/images/'.$image)) ) and will show the default image.

    it wouldn’t support arrays though

    no, however, in most cases there is only one header image.

    as usual, the code is not given as a ‘copy/paste’ instruction, more as an idea how to look at things from a different angle.

    Jonas Grumby

    (@ss_minnow)

    Yes it’s very cool and I will definitely use something like it instead of what I have been doing. I don’t think the default image would be displayed though without the else statement.

    Jonas Grumby

    (@ss_minnow)

    p.s. It’s also much easier to explain to a client that if they create a new page and they want it to have its own image, they just have to upload an image w/ the correct name and the code doesn’t have to be touched. That’s what I like about it.

    Michael

    (@alchymyth)

    @ss_minnow
    thanks –
    it actually developed from one of the threads here in the forum, where someone asked how to tell a client to work with the different images in the header.

    ever since the beginning of BASIC, i didn’t like IF/ELSE statements; i was rather into FOR(i=1;i<max;i+1) logics, and related structures, that were made possible with FORTRAN and the other higher programming languages.

    I don’t think the default image would be displayed though without the else statement.

    i tried this in page.php, so obviously the first if is always true. should really try it in index.php in a setup without page.php.
    however, this line

    if(!file_exists(TEMPLATEPATH.'/images/'.$image)) { $image='head-image.jpg'; }

    checks if the image exists, and sets the image name to default if not – no else neccessary.

    Jonas Grumby

    (@ss_minnow)

    checks if the image exists, and sets the image name to default if not – no else neccessary.

    Ah, ok cool. I learned BASIC too (and BASIC+), but didn’t get very far with FORTRAN. We used to timeshare with a teletype connected to a mainframe over a 110 baud cradle modem. Our only form of ROM was punch tape (which was better than punch cards). But I digress… pretty funny to think about now though.

    Michael

    (@alchymyth)

    good old days
    when 64k was a lot
    and bits were still bits
    and computer chips used to have legs.

    you guys are killin me…. I think this is the third thread (in as many days) I’ve stumbled on that has caused me to drastically alter the layout of my theme.

    I love it!

    (but not FORTRAN…..I hated that…ugh)

    Thread Starter kloy

    (@kloy)

    Thanks everyone for your help!! I want to comlplicate things further.
    On the home page I want to play a flash animation or somekind of FLV in the header image area. On all other pages I want to swap out random static photos. Is this asking too much?

    Thanks

    Jonas Grumby

    (@ss_minnow)

    It can be done but how easy it would be depends on how your theme is set up. I don’t think a Flash animation can be a background, so if your header images are backgrounds you may have to change that. Aside from that, you would just add another condition such as

    if (is_home()) { echo 'put your Flash code here'};

    Michael

    (@alchymyth)

    swap out random static photos

    <?php // one possible way of showing random images;
    // just add a list of your images in the format below
    $photo_list = array (
    'img1.jpg',
    'image2.png',
    'photo55.jpg',
    'anotherimg.jpg'
    );
    $random_img = $photo_list[rand(0,(count($photo_list)-1))];
    echo '<img src="http://yourimagepath/'.$random_img.'" />';
    ?>
    Jonas Grumby

    (@ss_minnow)

    Another piece of code I will be saving…

    Thanks!

    Thread Starter kloy

    (@kloy)

    Thanks SS Minnow…
    do I also need

    <?php else : ?>
    for the static images?

Viewing 15 replies - 1 through 15 (of 23 total)

The topic ‘swapping out header images’ is closed to new replies.