The Complete Guide To Featured Thumbnails And Image Sizes In WordPress

A picture is worth a thousand words – unless it’s been resized inappropriately, in which case it’s worth negative one-hundred words. Okay – so maybe that’s a lesser known version of an old saying or something I just made up, but the point is: WordPress is very powerful when it comes to thumbnails and image sizes – you just need to know how to deal with them. Read on for everything you need to know about image sizes in WordPress and managing featured images.

Basics First

In the WordPress admin dashboard, you probably already know about Settings -> Media.

These are the three default image sizes, which WordPress calls: thumbnail, medium, and large. The thumbnail size has a special setting to be cropped at the exact dimension you specify here. This needn’t be a 1:1 dimension – you can set it however you like – but images will be centred and cropped, meaning any portion of your image that doesn’t fit those dimensions after being scaled down will simply be cut out.

The medium and large setting work slightly differently, in that you’ll specify maximum dimensions for both width and height, and the images will be scaled down accordingly. If the image is too small, those image sizes simply wont be created. When you upload a new image, the original is saved and available to insert into a post at full size, and the other registered image sizes are automatically created.

These three image sizes, as well as the original full size, are the only ones available when you edit a post and insert media, so I tend to set large as the absolute width of my theme for full width pages and posts, and medium as width of the typical content column.

Making More Sizes

When editing theme or creating widgets, the three sizes defined in your media settings might not be enough. I always leave those alone for content – then define some new image sizes in functions.php file, like this:

add_image_size( 'my-thumbnail', 400, 200, true);

Each new image size needs a name, width and height dimensions, and whether or not images should cropped to exactly this size (true or false). For structural parts of a theme or widget, you generally would want to crop so it doesn’t break the layout.

Featured Image

Since version 2.9, WordPress has allowed us to set a specific image as the “featured image” for a post. This image isn’t inserted into the body of the post (unless you insert it yourself), but instead can be used structurally throughout your theme – as a thumbnail next to the post title, or perhaps in the header when viewing that particular post. Not including a featured image just seems lazy given how many themes and widgets rely upon them – paste this snippet into functions.php to remind you when saving a post if you forgot to set one (source):

add_action('save_post', 'wpds_check_thumbnail');
add_action('admin_notices', 'wpds_thumbnail_error');
function wpds_check_thumbnail($post_id) {
 // change to any custom post type
 if(get_post_type($post_id) != 'post')
  return;
 if ( !has_post_thumbnail( $post_id ) ) {
  // set a transient to show the users an admin message
  set_transient( "has_post_thumbnail", "no" );
  // unhook this function so it doesn't loop infinitely
  remove_action('save_post', 'wpds_check_thumbnail');
  // update the post set it to draft
  wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));
  add_action('save_post', 'wpds_check_thumbnail');
 } else {
  delete_transient( "has_post_thumbnail" );
 }
}
function wpds_thumbnail_error()
{
 // check if the transient is set, and display the error message
 if ( get_transient( "has_post_thumbnail" ) == "no" ) {
  echo "<div id='message' class='error'><p><strong>You must select Featured Image. Your Post is saved but it can not be published.</strong></p></div>";
 delete_transient( "has_post_thumbnail" );
 }
}

WordPress provides a convenient function for getting the featured image and using it in themes:

the_post_thumbnail('my-thumbnail',array('class'=>'my_post_thumbnail_css_class'));

The function takes 2 parameters: the named size you’re looking for, and any attributes you want to pass in, like a custom CSS class (note: you can’t override the alt attribute). If you’re modifying a really old theme, you may also need to add the following to your functions.php:

add_theme_support('post-thumbnails');

If you’d rather just get the actual URL of the featured image rather than output the required HTML too, try this instead (getting the medium image size in this example):

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
echo $thumbnail[0];

Regenerating Images

Anytime you change you default image sizes or create a new size definition, it’ll only apply to new uploads. All your existing images remain as the original dimensions. Never fear though, there’s a great plugin that will go back through your posts and regenerate these new image sizes for you. AJAX Thumbnail Rebuild lets you select which sizes to regenerate, and will slowly work through your archive. This won’t resize images that have been inserted into posts – those are fixed at the point of insertion. Regenerating images will make the new size available to use in your themes or in future posts, but you can’t automatically edit the size of existing images that have been inserted already.

You’ll find two downsides to making new images. Firstly, even if the image size you’ve made is only used for the featured image as part of a theme, a new version of every single image you’ve ever uploaded will be created – not just the featured image. This is a limitation of WordPress; a featured image is just like any other and you can’t specifically target it with the add_image_size() function. Luckily, the Thumbnail Rebuild plugin does actually let you limit this to only featured images from the archive – but all future image uploads will be managed by WordPress, and it will create the new image size for everything. Now would be a great time to also learn the difference between JPG and PNG so you know to use the optimal format in future.

Secondly, even if you’re no longer using a certain size, they will remain on the server – WordPress won’t delete unused images for you. On a site like MakeUseOf with hundreds of thousands of images, this means a couple of gigabytes wasted. For smaller sites, the Image Cleanup plugin will help by scanning and giving you the option to delete; but larger sites will need to learn some command-line and regex fu (see our quick guide to getting starting with the Linux command line). Always take a full backup first, just in case it deletes something it shouldn’t have.

My Theme Doesn’t Change

So you’ve edited a theme with your new image sizes, and correctly regenerated all existing featured images – but the right size still isn’t appearing? You’ve probably got some CSS applied to the image or it’s surrounding DIV then. Use your browser’s debug mode to find the offending CSS and tweak accordingly. And remember, you can only resize if the source image is big enough – WordPress and the generate thumbnail plugin won’t upscale images due to the loss of quality.

WordPress is nearly 11 years old, so it’s a testament to its power and flexibility that it’s one of the few web apps that has been kept alive for so long and not replaced. Features like post thumbnails are now ubiquitous on the web, and to its credit, WordPress has always kept up with design trends. Mind you, Ghost is looking good.

Having trouble with featured images? Post in the comments and I’ll see if I can help you out.