swapping out header images

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

  • 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; ">';
  }
?>

    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)

    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.

    @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.

    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.

    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.

    @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.

    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.

    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

    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'};

    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="https://yourimagepath/'.$random_img.'" />';
?>

    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.