// 18.Apr.2009

WordPress Thumbnail Sorcery

In 10 Exceptional WordPress Hacks Smashing Magazine's Jean-Baptiste Jung published a small WordPress function to automatically retrieve the first image from a post. Jung goes on to provide a method of resizing images on-the-fly. As it happens, these two processes are just what I've been after to add a little spice to the front page of the Urban Mainframe.



It's a minor change I know, but it adds impact to the front page, a little eye-candy!

How Do We Do It?

The PHP code for extracting the first image in a post is as follows:

function catch_that_image() {
global $post, $posts;
$first_img = '';
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if( ! ($first_img) ) { // Defines a default image
$first_img = "/images/default.jpg";
return $first_img;

Paste this function into your theme's function.php file. Edit the default image path in line 10 to point to an image on your server (in case a post doesn't have an image) and the function's good to go.

Now that we've extracted the first image from a post, the next thing we want to do is to automatically produce a thumbnail from it. Download Darren Hoyt's TimThumb script1 and upload it onto your server as timthumb.php.

Ensure that the directory into which you upload the TimThumb script has 0777 permissions — the script will create a cache folder in the same directory in order to cache the images it generates so as to minimise the performance overhead.

Add the following code to your .htaccess or httpd.conf (if available) file to boost caching performance:

RewriteEngine on
RewriteRule .* - [E=HTTP_IF_MODIFIED_SINCE:%{HTTP:If-Modified-Since}]
RewriteRule .* - [E=HTTP_IF_NONE_MATCH:%{HTTP:If-None-Match}]

The final step is to add a little code to The Loop — to display the thumbnail:

<img src="/path/to/timthumb.php?src=<?php echo catch_that_image(); ?>&w=80&h=80&zc=1" />

So what happens in the HTML above? Rather than pointing to a physical image file, we execute the TimThumb script and supply it with a few parameters to produce our thumbnail:

  • src: The source image path. Again, we don't directly supply one. Instead, we call the previously described PHP function which retrieves the path of the first image in the corresponding post - that path is then piped through to TimThumb as required.
  • w: The width that we require our thumbnail to be (defaults to 100 pixels).
  • h: The height of our thumbnail (defaults to 100 pixels).
  • zc: "ZoomCrop" (0 or 1). If set (1) reduces the size of the image and simultaneously crops it. If unset (0) only a resize is performed.

Note that because I have set both a width and a height in the HTML above, I have turned the ZoomCrop on - this prevents the thumbnail looking stretched and deformed.

And there you have it folks... quick, easy, automatic thumbnail generation from the first image of a post. Neat trick huh?

Update: I've added the automatic thumbnails to the search results view too!
Update: I'm now using my own Image Director script for thumbnailing and other imaging effects.
  1. Learn more about the TimThumb PHP Script

Last Revision: January 14th, 2010 at 06:32

3 Comments for “WordPress Thumbnail Sorcery”

  1. For those of you wanting to integrate TimThumb with this code, you can find working code at Spidermarket’s Retrieve a Post’s First Image and Resize it with TimThumb. It’s a modification of the code found on WP Recipes’How to: Get the first image from the post and display it.

  2. This looks like a great script, but you’ve got quite a few typos above.

    - emptyempty
    - you haven’t escaped things properly in $output =
    - and the attributes in img src probably should be seperated with & rather than &

  3. @matthew w: Thanks for the feedback, I really appreciate you pointing out those typos - God only knows how much confusion they might have caused.

    The attributes in “img src” are correct in being separated with “&” Matthew - to ensure XHTML standards-compliance. See: http://htmlhelp.com/tools/validator/problems.html#amp for a more detailed explanation.

    If you think this script is handy, you should try out my Image Director. This new script goes way beyond simple thumbnailing.