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.

Before...

After...

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 = '';
ob_start();
ob_end_clean();
$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 script¹ 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?