large shade tree

Navigation

Information

Recent Posts

Shade Tree Sites |Building Better Websites

Specific Rotating Image for a Page or Post

Recently had an occasion where I needed to display a specific header on each page of a website project – came up with this after looking around and it worked for me.

Put images you want to use in folder named images in your theme folder, here I called the images rotate1, 2, 3 etc but you can call them whatever you want just change accordingly. Replace page id number with the number of the specific page you want to display the corresponding image. You can find the page id number by going to your list of pages, hover over the page and look at the bottom status bar – the page number will be in the address. No reason this wouldn’t work for posts as well.

You can also change name of the div from frontimage to something else – style divide accordingly in your stylesheet and change the width of the image to fit your theme.

<div id=”frontimage”>
<?php if (is_page(’88’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate1.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate2.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate3.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate4.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate5.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate6.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate7.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate8.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘page id number here’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate9.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } else { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/rotate<?php echo(rand(1,9)); ?>.jpg” width=”400″ alt=”<?php bloginfo(‘name’); ?>” />
<?php } ?></div>

The above code will look for assigned image when displaying a specific page or post if none is assigned it will randomly rotate between all.  Place the above code into theme file where the image is located.  In my case this was the page.php file however might be the header.php or single.php file in others.