A recent exploit revealed that many of the WordPress theme designers and developers, including companies like WooThemes and ThemeShift are using third-party tools like TimThumb to manage their thumbnails, preview and featured images in their themes. It’s not a secret (I really hope so) that WordPress has image management implementations of its own which was introduced back in version 2.9 (December 2009) and improved since then.

In today’s post we’ll take a look at what WordPress has to offer for thumbnail and featured image management. We’ll learn how to get your theme to register new image sizes and use them throughout the template files and we’ll take a brief look at the UI that WordPress gives the end-user to resize, rotate and crop the image, as well manipulate the thumbnail.

Large, Medium & Small (Thumbnail) Sizes

So what happens when you upload a file in WordPress? Nothing much. Unless it’s an image. You might have noticed that the dynamic file uploader goes into a state called Crunching after an image upload has been successful. Ever wondered what that is?

Crunching is the process of cutting down your uploaded image into various different sizes. The sizes depend on your media settings and any additional sizes you have registered (we’ll get to this later). Note that WordPress uses the GD library to work with images, meaning your hosting account has to support that.

If the GD library is not installed, WordPress will insert your original images instead, and use the width and height HTML attributes to pseudo-size them on your pages. We all know that this is inefficient, bad quality and bandwidth consuming.

Anyhow, it’s up to you how to set the three different sizes so I can only give a recommendation here. The large image size is generally what you’ll set for the largest possible image size on your website, but not for display within your content (that’s where medium is). Make sure this size fits on the screens of your target audience but doesn’t consume too much traffic. The large size is very useful when you’re working with photos, so uploading a 15 megabyte high-quality photo ready for print will get crunched into, say a 1024 pixel width one, which is more friendly to the web. You still have your original image stored, just in case.

The medium size is what you should probably use to embed images in your content, this should be within your content area width. Note that the medium size is also the default for your attachment post types, if you’re using them.

The thumbnail size is relatively new to WordPress. The thumbnail size is used in the image gallery output via the [ gallery ] shortcode. Don’t confuse this with the post thumbnails printed by the the_post_thumbnail function, that requires an extra set_post_thumbnail_size call. We’ll get to it later.

Themes Content Width & Media

WordPress themes are different. And sometimes (or most of the times) they’re different in their content width as well. So even if an end-user has set the medium thumbnails to match the current theme’s content width, there’s no guarantee that they’ll not forget to change their settings when switching to a new theme, and this is where the $content_width variable comes in.

The $content_width variable is set in the theme’s functions.php file, of course child themes can override that if they have increased or decreased the width. Not only does this affect the maximum width of images in their posts, but also sets the ideal width for video embeds from Vimeo, YouTube and others.

Here’s a short snippet of how the content width is set, somewhere near the top of your functions file:

if ( ! isset( $content_width ) )
    $content_width = 620;

Of course this doesn’t mean that the image sizes will be regenerated, it just sets their maximum width. We’ll get to regeneration in a bit, but keep in mind that this ensures that images and other media does not overlap your content area, keeping your theme clean and shiny.

Post Thumbnails

This is a whole new area introduced in WordPress 2.9 — thumbnails support. This requires a blog post of it’s own, but the Codex article pretty much explains everything, from adding support for post thumbnails in your theme, to usage in your template files. Keep in mind that by default, the_post_thumbnail will output an image of the set post thumbnail size and not of the size that has been configured in the Media section under settings, so please don’t forget to set_post_thumbnail_size.

Also note that the thumbnail function accepts a size parameter where you can explicitly tell it which size you want your thumbnails to be printed in. This means that you can have different thumbnail sizes on your home page, your archives page and perhaps your search results. This is very convenient, but there’s a catch.

The media library has got built-in support for image manipulation and currently (3.2.x) allows to modify the post thumbnail, but not any additional sizes that were registered by the theme. This basically means that the end-user will have control over the thumbnails set with set_post_thumbnail_size but not over the ones registered with add_image_size.

Adding Image Sizes

Before jumping into adding various image sizes to use in different templates of your theme, you should understand that every extra image size adds some overhead to the crunching process when uploading media, as well as the disk space. Keep in mind that after crunching, each image file is saved separately to the uploads folder, meaning that if you have 20 different sizes and you upload one image, you’ve got 20 files. So think twice before adding a new image size and only do if you plan to use them in your theme.

Image sizes are added using the add_image_size function where a name, width and height are given as arguments. There’s also a crop argument if you’d like to use hard crop mode, which gives a better chance of getting the image resized exactly to the dimensions provided (unless the original is smaller, of course).

Here’s an example:

// In your functions.php file
add_image_size( 'archives-thumbnail', 200, 200, true );

And here’s how you use it in your archives.php file:

// In archives.php, somewhere within the loop
the_post_thumbnail( 'archives-thumbnail' );

Also note that the thumbnail, medium and large names are reserved and already in use by WordPress itself, so be a little bit more specific or perhaps add a prefix to your sizes.

Thumbnail URL/SRC Attribute

Sometimes you’ll want to set the thumbnail image as a background or simply have your own wrapper and wouldn’t like WordPress to construct the whole img tag for you, so how can you get the URL of the image of a specific size? Easy, assuming you’re inside the loop:

// Somewhere in archives.php, within the loop
$image_size = 'archives-thumbnail';
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), $image_size );
$image_url = $image_url[0];

Changing and Regenerating Sizes and Thumbnails

Sometimes in life (or when playing around with your theme) you’ll notice that when changing image sizes, adding and removing custom sizes, the existing media that was uploaded doesn’t get regenerated or “recrunched”. Thank god there’s a plugin called Regenerate Thumbnails by Alex, known as Viper007Bond. It currently works with WordPress 3.1 and above, but you shouldn’t be using lower than that anyway.

When activated, the plugin creates a new item under the Tools menu called Regenerate Thumbnails which loops through all your existing media items and fires the crunching process on each. Note that this might take a while if you’ve got too much images or image sizes. I’d say this tool is essential not only for theme developers, but for end users that have switched from one theme to a different one.

There, you now know where to direct the support requests saying thumbnails are crispy or too large ;)

Media Library & Edit Image

Although this post is mainly targeted at theme and plugin developers who probably wouldn’t care, I’d like to dedicate a section about the end-user. You should know that WordPress has got an Edit Image option when working with media. This was introduced not too long ago and is being improved in every release. Basically the Edit Image option is something that the average end-user would use instead of Photoshop or any other software you geeks use to crop your files ;) Here’s how it looks:

It’s not the best image management tool around, but serves it’s purpose. The interesting thing to note is that section called Thumbnail Settings, and as you can see, you can crop and resize the image for your thumbnail. This us used when the automatic cropping produces a bad thumbnail. Not bad as in quality bad, but bad as in cropping the head off a guy and centering on his belly instead of his smiling face ;)

My thinking is that future works in this section should include all registered post thumbnails, so that the end-user has total control over their thumbnails throughout the whole website or blog. Of course this will make the developers to describe their newly added sizes, but I think that it’s worth the effort.

Final Thoughts

I hope this article gave you a better idea at what WordPress is capable of when it comes to dealing with images and media. Hopefully theme developers will start ditching scripts like TimThumb in the future, and WordPress might introduce more advanced ways of working with thumbnails, like remote images, etc. This is one of the reasons why WooThemes is still using TimThumb in some of their themes:

WP Post Thumbnails will stress the server resources less, but the thumb.php offers some advantages in remote resizing, automatic inline image resizing, crop zoom adjustment etc.

Thanks for reading and hope you loved it. Feel free to tell us whether you use external image manipulation scripts like TimThumb in your WordPress projects and if you do, let us know why. If you’ve got anything to add to the post itself (perhaps we missed something) don’t hesitate to talk. Use the section below to leave your comment and enjoy your day! Oh, and did you know that you can subscribe to Theme.fm by e-mail?