I’ve been working with WordPress for years now, and I’ve always struggled with an easy way to display an image that’s attached to a post in a list of posts. I didn’t say it wasn’t possible, just not easy. In the past I’ve used plugins, like "The Attached Image", or hacked my way around the issue. While these methods worked, they weren’t ideal, and any time you can avoid using plugins, the more healthy your WordPress site will be.
I was delighted then, to find that WordPress 2.9+ comes with a few new functions designed specifically for working with images attached to posts. Specifically, the_post_thumbnail works wonders. Here’s how it works:
Add Thumbnail Support
First, you have to activate post thumbnails for your theme. Open functions.php, and add this line somewhere near the top:
add_theme_support('post-thumbnails');
set_post_thumbnail_size(224, 126, true);
The first line adds thumbnail support to your theme. The second line overrides the "thumbnail" settings in your WordPress admin panel. The three values passed here are image width, image height, and the crop flag. If you set the crop flag to true, WordPress will automatically re-crop images so they’re not distorted.
Next, open any of your existing posts. You’ll be happy to find a new box in the right column, titled "Featured Image". You can then use the standard WordPress media tool to either upload a new image, or select an image from your site’s Media Library. Once you’ve associated a featured image with a post, the next step is adding it to your templates.
Insert Thumbnails in Your Theme
Locate the loop where you’d like thumbnail images to appear, and insert the following code:
the_post_thumbnail();
This will insert a full image HTML element, with the option to pass an array to specify dynamically generated attributes, like the image’s alt or title text.
Have More than One Size? No Problem!
Say you want to feature two thumbnail sizes on your site. Switch back to functions.php and add this code, below the code we added earlier:
add_image_size('thumbnail-50', 50, 50);
This cuts an additional image at 50×50 every time an image is uploaded to the WP Media Library. You can add as many sizes as you’d like. You can then add this call in any of your templates:
the_post_thumbnail('thumbnail-50');
Here you’re just passing the name of the thumbnail you assigned in functions.php, so WordPress knows which thumbnail to use. When the_post_thumbnail() is called with no argument, it will use the default size originally set in set_post_thumbnail_size().
There’s a lot more you can do with these new functions, including setting up conditional PHP during loops to display a larger image first, with smaller images for the second and subsequent posts, for example. I encourage further reading at the WordPress codex:
withinsight 