The Wordpress Guru » Tips & Tricks on Making a Killer CMS with WordPress

When I launched this site, I was instantly jumped on by Ruark asking me how I achieved the thumbnails on the home & archive pages of this site. This can be done in a number of simple ways and with a bit of imagination, you can take it to a much greater level. So use this article to understand the basics and then you can decide how best to implement these methods.

You’ll need…

Achieving this thumbnail effect requires a custom field, some CSS, and ideally a screen capturing program. The custom field will capture the URL of the thumbnail image, the CSS will be used to define the exact space the thumbnail will occupy and the screen capturing program will grab the thumbnail itself.

1) Make the thumbnail

Personally, I absolutely love FastStone Capture. The full version will cost you all of $19.95 but I promise you its a purchase that’ll save you bucket loads of time. With it, you can select a marquee area of your screen and it’ll automatically save that selection as a JPG/GIF/PNG image. Of course you can use the normal print-screen feature, crop it in PhotoShop and then save it, but FastStone will do all that for you.

2) Upload it

So once you have your thumbnail image, upload it into WP. In 2.5, the ‘Add Media’ feature will upload the image and then present you with the URL to that image.

Copy the URL and then close the upload dialog. Dont insert the image or anything.

3) Save your custom field

Then create a new custom field called ‘thumb’ (or whatever you like) and copy the URL of that thumbnail image as the value of that key.

At this point, you can save your WP post and open up your code editor of choice…

4) Add the code

Open your index.php or archive.php file, find the loop and insert something like this before the_content() is called:

<div class="thumb"><img src="<? echo get_post_meta($post->ID, 'thumb', true) ?>" /></div>

The wrapping div around that image is there so we can CSS the thumbnail as necessary.

Note that you can also make the image a link to your article like this:

<div class="thumb"><a href= "<? the_permalink(); ?>" title="<? the_title(); ?>"><img src="<? echo get_post_meta($post->ID, 'thumb', true) ?>" /></a></div>

This makes simple use of the loop variables to insert the article URL and title tag of the link.

5) CSS it as necessary

Lets say that you’d like your image to be exactly 100px X 100px at all times and you’d like to float it left so the text wraps up around it to the right. Your CSS would then look like this:

.thumb {
	width:100px;
	height:100px;
	border:5px solid #efefef;
	float:left;
}

NOTE: naturally you’d want the image that you capture to be more than 100×100 so that there’s no whitespace in that div…

6) Enjoy

And thats that… Hopefully that explains it adequately Ruark?

Of course you can tailor where in your loop the thumbnail will display and how large etc it is with your CSS.