Unique header image for each page

  • I am in the process of creating a CMS static page site using WordPress and have got to grips with most aspects of getting it to finction the way that I want to.

    I am having a conceptual block on one aspect though…

    I want each page to have a unique image to match the theme of the page’s content.

    I think I could hard code it into a series of pages templates with a minimally thin header but this does not allow the images to be changed easily by someone who isn’t too savvy on the techy front.

    Is it possible to use a series of headers each with a different graphic appropriate to the page that it will be attached to?

    I don’t want to bark up the wrong tree so can anyone offer some advice on whether or not I can achieve what I want to do and if so, how could I go about it?

    All advice gratefully received.

    Thanks

    Vernon

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

  • this is a different way to do it:
    all you have to do with this method is to create an image file with the page ID as part of the image name.

    the code for this is short; you put this into the code where you want the image to show:

    <?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.'"/>'; ?>

    for the above code, the image file needs to be called: head-image-17.jpg for instance, for page id 17; and be saved to the images folder of the theme.

    what the code does:
    first step: creates an image file name including the page ID (on pages only);
    second step: checks if a matching image file exists in the images folder of the theme;
    third step: if yes, echos the image name; otherwise echos a default image name.

    extended:
    if the header image is a css background image, this code can be easily adapted:
    put it into a style declaration into the <head> section of header.php:

    <style type="text/css">
<?php $page_id=$post->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>
    Thread Starter vernonlevy

    (@vernonlevy)

    Thanks for your incredibly helpful advice.

    Before I roll up my sleeves, I am using permalinks using the custom setup: /%category%/%postname%/
    so my page IDs are of the type; ‘blogname/home/information-and-guidance’ and; ‘blogname/home/documents-and-worksheets’ where the pages are children of the home page

    Would I name my images ‘information-and-guidance’ and ‘documents-and-worksheets’ respectively?

    Thanks in anticipation.

    even if the page ids are not in the permalinks, they are in the database and unique to the page – just a bit more difficult to know.

    what you are talking about, looks like the page slugs; you need to change the code a little bit to use the page slugs in the image name:

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

    the image name could be: head-image-information-and-guidance.jpg

    you are right – makes it easier to get the slug from the permalink.

    (obviously, you can change the ‘head-image-‘ bit to whatever looks right in your context.)

    Thread Starter vernonlevy

    (@vernonlevy)

    Once again thanks for the great advice.

    I’m still getting to grips with the vocabulary of WordPress, slugs are not currently embedded in my technical vocabulary :-).

    Thanks for the solutions. My php skills have considerable room for development. ??

    Hey thanks for the tip! What about constantly changing image. I’m using 3.0.1 – 2010 – is there a plug in for this? If not – don’t mind editing the code.

    What about constantly changing image.

    do you mean a randomly changing header image? (instead of the specific one for each page/post)

    how to ramdomly show one of the existing header images for Twenty Ten.
    for a child theme, replace ‘template_url’ with ‘stylesheet_directory’

    netflex

    (@netflex)

    I am using the Delicate theme and am trying to make it so that the heder has a different image only on the about us page. I have tried the methods you have listed about without much success… i was hoping that someone could point me in the right direction?
    Thanks in advance!

    Michael

    (@alchymyth)

    @netflex
    a link to your site might help, as not everyone is familiar with your particlular theme.

    is the header image a background image or done by html img tag?

    if background image, does the theme use ‘body_class()’ ?

    netflex

    (@netflex)

    Hi there alchymyth – thank you for the quick response!
    The site can be seen here – https://www.roundtablefun.com

    Here is the code for the header image in header.php – perhaps you can help me make some sense of it ?!
    ——–

    <div class=”head-img”>
    <div class=”tagline”><?php bloginfo(‘description’); ?></div>

    <?php $t_custom_background = get_option( “nattywp_custom_header” );
    if ($t_custom_background != ”) { ?>
    <img src=”<?php echo $t_custom_background; ?>” alt=”Header image” border=”0″ />
    <?php } elseif (!isset($t_main_img) || $t_main_img == ‘no’ || $t_main_img == ‘header2.jpg’ ) { ?>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/header/headers.jpg” alt=”Header image” border=”0″ />
    <?php } else { ?>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/header/<?php echo t_get_option( “t_main_img” ); ?>” alt=”Header image” border=”0″ />
    <?php } ?>
    </div>
    —————–

    The theme has the ability to use a custom header controlled by the theme options in the admin panel – but i am not using that option.
    Thanks again!

    Michael

    (@alchymyth)

    <?php $t_custom_background = get_option( "nattywp_custom_header" );
if ( is_page('about-us') { ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/header/header-about-us.jpg" alt="Header image" border="0" />
<?php } elseif ($t_custom_background != '') { ?>
<img src="<?php echo $t_custom_background; ?>" alt="Header image" border="0" />
<?php } elseif (!isset($t_main_img) || $t_main_img == 'no' || $t_main_img == 'header2.jpg' ) { ?>

    hope you can identify the section to change.

    the above assumes:
    – the page slug is ‘about-us’;
    – the header image for this page is ‘header-about-us.jpg’ and it is with the other images in the images folder of your theme;
    – the ‘about-us’ header image will have priority before all other header image options.

    netflex

    (@netflex)

    When i insert the code you provided I am getting a parse errer:

    Parse error: syntax error, unexpected ‘{‘ in /home/roundtab/public_html/wp-content/themes/roundtable/header.php on line 96

    which is referring to this line:
    if ( is_page(‘about-us’) { ?>

    I essentialy replaced the following code with the code you provided:

    ——————————
    <?php $t_custom_background = get_option( “nattywp_custom_header” );
    if ($t_custom_background != ”) { ?>
    <img src=”<?php echo $t_custom_background; ?>” alt=”Header image” border=”0″ />
    <?php } elseif (!isset($t_main_img) || $t_main_img == ‘no’ || $t_main_img == ‘header2.jpg’ ) { ?>

    ——————————

    Thoughts?

    Michael

    (@alchymyth)

    my mistake – forgot a )

    corrected:

    if ( is_page('about-us') ) { ?>

    netflex

    (@netflex)

    It worked – very much appreciated!
    Thanks dude

    cjmt

    (@cjmt)

    This has been such a helpful thread for me! I’m learning the coding of WordPress, and, naturally, got a little ambitious.

    I was able to apply the code to get unique header photos on each page, which is outstanding! Here’s the issue that I’ve run across:
    1. The home page has no page ID (or at least I couldn’t find it)
    2. I actually want to be able to put a slideshow on the home page anyways, but keep the unique photos for the other pages. I’ve been trying out different slideshow plug-ins, and most of them seem to provide the short code. What I can’t figure out is how to correctly write the php to allow for both a home page slideshow and the other photos to occupy the same space on each page.

    Here is the code I currently have, which is in the header.php file:
    ‘<div id=”slides”><!– slides should be named ‘head-image-[pageID#].jpg’ –!>
    <?php
    if (is_home());
    echo do_shortcode(‘[FrontpageSlideshow fs_cats=1 fs_show_buttons=0 fs_main_width=700px fs_main_height=250px fs_slide_width=100% fs_buttons_width=0% fs_placeholder_height=0px fs_show_comment=0 fs_rounded=0 fs_pause_duration=6000 fs_template=default]’); ?>
    <?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.'”/>’; ?>
    </div><!– #slides –>’

    What’s happening is that the slideshow is showing up okay on the home page. But on every other page, the slideshow shows up, as well as the unique photo for that page below it, thus pushing down the rest of the content. Of course, if I remove the slideshow code, those pictures show up just fine and in the right position.

    I haven’t been able to apply the correct ‘else’ terminology. Is that what’s needed here?

    Thanks in advance for any help!

    cjmt

    (@cjmt)

    Nevermind! Found the fix!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Unique header image for each page’ is closed to new replies.