Bulletproof Post Thumbnails in WordPress 2.9
Over the past few weeks I’ve been working on an update for my video-centric WordPress theme, Wave. It’s a bit overdue, but every time I sit down with it, I end up packing something new in that will definitely please my customers and will hopefully justify the wait. Since WordPress 2.9 was recently released, I decided to look into the new Post Thumbnails functionality and see if I could make use of it in my themes. At this point, there isn’t much in the way of documentation, so I thought I would share my findings and show how I’m using this new core feature in my themes.
Searching for Scraps of Information
Mark Jaquith, a lead developer on WordPress sheds some light on this new feature. He provides the necessary fundamentals and understanding required to get Post Thumbnails working in your theme. I later found this article, which goes into the more advanced uses.
Activating Post Thumbnails in Your Theme
Theme development differs from building a site on WP for yourself or a client, in that compatibility has to be maximized. Else you’ll find yourself with a whole pile of dissatisfied customers. In your theme’s functions.php, you can activate Post Thumbnails by adding the following…
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(120, 90, true);
}
I’m sure just about everything there is self explanatory. But just in case – the if statement checks to make sure that the site is running WP 2.9 or higher by seeing if the add_theme_support function is present. The numbers in set_post_thumbnail_size are the width and height of the image. While “true” activates hard crop mode. This means your image will be cropped either from the sides, or top and bottom in order to maintain the aspect ration and fit inside the dimensions you’ve stated. But wait, it gets better!
Additional Custom Sizes
You can state more than one “thumbnail” size to be created, which is perfect for themes that use more than one thumbnail. In short, this means that third party image processing scripts might be a thing of the past. You can create any number of custom thumbnail sizes quite easily…
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(120, 90, true);
add_image_size('post-hero', 480, 250, true);
}
The downside, is that only images uploaded after this code is in place will be generated at the specified sizes. So it’s not exactly backwards compatible.
Retrieving Your Thumbnails
To get the thumbnail, simply drop the following template tag into the loop where you want it to be displayed.
<?php the_post_thumbnail(); ?>
If you want to call one of your custom images, you can specify it’s name and do just that…
<?php the_post_thumbnail('post-hero'); ?>
There are a number of inline variables you can use to custom the output of the image, which are outlined nicely in this article by Matthias Kretschmann.
Covering Your Ass
This is where things get a little complicated. Especially if you’re adding Post Thumbnails to an existing WP theme. You not only have to take into consideration, what version of WP is being used, but also if an older image processing script is in place – that needs to remain in tact for older posts that were created before WP 2.9.
In my themes, I have given the user the ability to disable dynamic image processing in the case that the server isn’t compatible. So this is another situation I have to account for.
And finally, if there is no image specified either as the Post Thumbnail, or the old custom field method, a placeholder image should be displayed. This is roughly how it looks in the latest version of Wave…
<?php
// If WordPress 2.9 or above and a Post Thumbnail has been specified
if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
the_post_thumbnail('hero-thumbnail', array('alt' => ''.get_the_title().''));
}
// Or if a post image has been specified and dynamic image resizing via TimThumb is activate
else if (get_post_meta($post->ID, 'post_image_value', true) && $mb_resize == 0) {
$postimage = get_post_meta($post->ID, 'post_image_value', true);
echo '<img src="'.get_bloginfo('template_url').'/thumb.php?src='.$postimage.'&w=480&h=250&zc=1&q=95" alt="'.get_the_title().'" />';
}
// Or if a post image has been specified and dynamic image resizing via TimThumb is disabled
else if (get_post_meta($post->ID, 'post_image_value', true) && $mb_resize == 1) {
$postimage = get_post_meta($post->ID, 'post_image_value', true);
echo '<img src="'.$postimage.'" alt="'.get_the_title().'" />';
}
// Or if neither Post Thumbnail nor custom field post image have been specified
else {
echo '<img src="'.get_bloginfo('template_url').'/images/placeholder-hero.jpg" alt="'.get_the_title().'" />';
}
?>
Here is a much simpler example which looks for a Post Thumbnail, then an image specified via a custom field called post_image_value. If neither are found, nothing would be displayed.
<?php
// If WordPress 2.9 or above and a Post Thumbnail has been specified
if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
the_post_thumbnail('hero-thumbnail', array('class' => 'post-thumbnail', 'alt' => ''.get_the_title().''));
}
// Or if a custom field post image has been specified
else if (get_post_meta($post->ID, 'post_image_value', true)) {
$postimage = get_post_meta($post->ID, 'post_image_value', true);
echo '<img src="'.$postimage.'" alt="'.get_the_title().'" class="post-thumbnail" />';
}
?>
And, that’s it!
It might look like a lot to take in, but I’ve already done all of the work for you. Simply change some attributes and variables, and you’ll have Post Thumbnails working in your theme in no time.