Over the past few days, I have been toying around with the idea of setting up WordPress as the CMS for a web site directory. One thing I wanted to do with my personal finance directory is to show a thumbnail image of the featured site when I am on the main page, category pages, tag pages, and search result pages.
As you know the thumbnail feature is not common in free WordPress themes, so I had to do some work to get it working. You can see how the directory looks below:
How To Add Thumbnail Image To WordPress Template
Now, let’s take a look at what we need to do to enable this feature.
1. Modify the main page (index.php) to show image
Note you could make the same changes to archive.php and search.php to get the same result. Note, I added the following code right under the title inside The Loop:
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img style="float:left;margin: 0 10px 10px 0;border:1px solid #000;height:90px" src="/wp-content/uploads<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="thumbnail" height="90" /></a>
There are two parts to this code, the <a> tag and the <img> tag.
- The <a> tag is the same as the one on the post title. I am adding it here so that users can click on the image to get to the full post.
- The <img> tag has a couple of components:
- The style attribute tells the browser to float the image to left, add some white space around the image, surround it with a black border, and make it 90 pixels high.
- The src attribute tells the server to grab the image from /wp-content/uploads directory with the rest of path and filename information coming from a custom field called “Image”
2. Add custom field called “Image” to each post
Now, when you are writing a post, you need to add a custom field called Image to the post with a value that reflects the rest of image path and filename information. In this example, we will use the same image that is shown inside the post itself. To do this:
- Upload an image to the post
- Switch to HTML mode and take note of the image path (see image below) — note the image path is /wp-content/uploads/2008/07/annualcreditreport.png in this example.
- Next add the custom field called Image. Note that we already defined some of the path information in the template — i.e., /wp-content/uploads. So you are adding the rest of the path information and filename in the value field — i.e., /2008/07/annualcreditreport.png. (see image below)
- Save and you’re done!
That’s it! Your blog should start showing thumbnail image next to each post once you completed these two steps.
Things to consider
Right now, if the Image custom field is not defined, the template will show missing image error. With a bit of PHP programming using if-then statement to detect the if the custom field is defined or not, you could show the thumbnail only when the Image custom field is defined.
This article was featured in:
- The WordPress Blogging Guide Carnival at Create A Blog Guides
{ 2 trackbacks }
{ 7 comments }
Thank You.
I have searched and read dozens of tutorials about how to add thumbnails. I’m not php geek so most of them made no sense to me. Then I found your tutorial, straight to the point, simply and well explained. Thanks to your tutorial I figured it out and thumbs are now working fine on my blog.
Thanks again, blogthority is bookmarked I’ll come back next time I’m struggling.
@Blog Newbie — I’m glad to hear it. Very cool and thank you for your feedback.
why on earth would anyone want to go to all that trouble when you can just use snapshot.com???? It takes two minutes and sows a thumbnail + rss feed of recent posts so user can get even more depth about the site before even clicking.
I don’t see what snapshot.com has anything to do with the article either. I think you missed my point.
You don’t have to take this much headache for doing this. There is a plugin named “Thumbnail for Excerpts” available at http://www.cnet.ro/wordpress/thumbnailforexcerpts
Just install and activate.
You can see it in action on my blog.
You can do this without the meta-field workaround. Just querying the posts and get the images:
// get image post
$__query = “SELECT ID FROM $wpdb->posts WHERE post_parent = ‘”.$post->ID.”‘ AND post_type = ‘attachment’”;
$atid = $wpdb->get_var($__query);
if (wp_attachment_is_image($atid)) {
// 2nd attr = { thumbnail, medium, full }
$image = wp_get_attachment_image_src( $atid, ‘thumbnail’ );
echo $image['url'];
}
Thanks, Pinyo! Your code worked like a charm! I’m not a techie at all, but was able to figure out how to do it based on your screenshots and instructions.
I also tried cmsdev’s solution, and the code just ended up displaying on the index page. There is either code missing or I pasted it in the wrong place.
Comments on this entry are closed.