Wordpress post excerpt with automatic thumbnail image (without custom fields)

Images in Wordpress: the challenge

I wanted to display previews (excerpts) of my Wordpress posts on the frontpage of a magazine site that I was building for a client. This is easy enough to do, but I also wanted those excerpts to include a thumbnail of an image from the post.

There are plenty of published solutions that involve additional plug-in galleries or custom fields, but I wanted a simple solution that makes use of Wordpress’s built-in image gallery, and didn’t require a cut and paste of image urls in to custom fields.

My other requirement was that the images should be automatically thumbnailed to the correct size.

Images in Wordpress: the solution

Extracting images from a Wordpress post

Wordpress posts have their own image gallery (click the add media button, then choose the gallery tab).  Unfortunately, the functions to access it and the documentation are weak at the moment.

Fortunately, Sarah wrote an excellent article showing how we can extract all the attachments to a post.  I modified it slightly just to extract images:

$args = array(
‘post_type’ => ‘attachment’,
‘numberposts’ => -1,
‘post_status’ => null,
‘post_parent’ => $postID,
‘post_mime_type’ => ‘image’);

$images = get_children ($args); 

The get_children() function here will return all the image attachments attached to post (identified by $postID), and assign them to our array $images.

We can then process the array of  image attachments to pull out the URL of the images:

if ($images == TRUE) {
foreach($images as $image) {
$imageurl[] = $image->guid;
}
} 

Alternatively, if you just want the first image attached to your post (e.g. for our front page preview):

 if ($images == TRUE) {
foreach($images as $image) {
// Use the first image
$imageurl = $image->guid;
break;
}
}

This is great, and we could now display our image using something like:

<img src=”<?php echo $imageurl; ?>” alt=”<?php the_title; ?>” />

Automatically creating the thumbnail

This is the final step, and fortunately Darren Hoyt has produced a script: timthumb, that will automatically create thumbnails on the fly for us.

Install timthumb as per Darren’s instructions, then within our template code, we can take our image and automatically thumbnail it:

<img src=”/scripts/timthumb.php?src=<?php echo $image;?>&w=70&h=70&zc=1″ alt=”<?php the_title();?>”/>

Note, I had a couple of problems with Darren’s script:

His usage examples fail HTML validation, but this is easily fixed by replacing the &’s with & as shown above.

It’s not creating proportional thumbnails for me correctly, but hopefully this can be fixed.

All in all, it’s a very useful script, and is used throughout the Wordpress magazine site: Daisy Green Magazine

Images in Wordpress: the benefits

There are a few benefits to this approach, particularly when developing a site for a client who will be writing the posts and having to ensure they are entered  correctly (in the case of the magazine there are several writers, so this is even more acute):

1. We are using Wordpress’s built-in gallery, so it should remain compatible with future versions
2. We don’t have confuse the post author by having multiple ways to enter images (as would be the case with a third party Wordpress plug-in gallery)
3. We don’t risk typos and other errors copying URL’s in to custom fields for a post
4. We don’t have to create multiple sized versions of our images, the thumbnail script does it for us on the fly

So, there you have it.  I hope you find this approach to create Wordpress post excerpt with automatic thumbnail image (without custom fields) useful.