Displaying page image in the footer automatically

Question

I've got the following problem:

each page of the site has its own image which needs to be placed within the footer div for correct, static placement. However each image is different so I can't just add a simple IMG tag to the footer.

At the moment I've stripped the page.php of most of the content and placed it into the page code itself. So basically Loop closes half-way through the footer area, once the image is loaded. This also means the Loop starts before the content div. However, if an editor uses TinyMCE rather than code view, then DIV tags are re-arranged by Wordpress and the footer is broken. I can't disable the visual editor completely as not all site users know basic HTML.

Is there a way to specify this image name as a custom field for each page, then store the value in a separate variable when Loop is running, then display the variable in the footer, after the Loop is closed? I couldn't find any PHP examples of how to get this done so far.

Any suggestions would be very welcome!

Thanks,

Tara

Answer 1

You want to use the Featured Post Thumbnail:

http://wpcanyon.com/tutorials/how-to-use-the-post-thumbnail-feature-in-wordpress-2-9/

http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

http://codex.wordpress.org/Function_Reference/the_post_thumbnail

In your functions.php, define an image size with add_image_size(), then display it in the footer like this:

the_post_thumbnail('footer-image');

Keep all of the loop inside of your main template file and do not split it across multiple files. That's really messy, and as you've figured out, very prone to error.

Answer 2

Thumbnails are accessable via $attachment objects, which are basically post objects.

Assuming the thumbnails are generated by WordPress, there's great native functions you can use by simply pasting some code into the right spot in your footer.php template file while looping through your posts.

Here's some demo code copped from examples on the Codex.

$attributes = array(
   'src' => $src,
   'class' => "attachment-$size",
   'alt' => trim(strip_tags( $post->post_excerpt )),
   'title' => trim(strip_tags( $post->post_title )),
);
$size = array(250,250);
the_post_thumbnail($size, $attributes);