If one of our most commonly asked questions is how to size images for your blog, the follow up question is inevitably: “Why don't the thumbnails on my Home Page line up?” If your WordPress theme is image-heavy (like our Rania or Miramar themes!), you may be missing a piece of the puzzle: how to size your featured images so they work across your site. Today, we're breaking it down, whether you use an <em>press theme or not!
What is a featured image?
For many WordPress themes, featured images correspond to the images seen on the Home Page or archival (category/tag) pages of your site. For example, in our Rania theme, all the images you see here on this demo's Home Page are featured images.
Featured images are typically assigned in the right hand panel of the post editor. (Look for the box that says “Featured Image,” usually located under the categories and tags boxes.) This allows you to have control over the visual thumbnail displayed site wide, to encourage reader's to click into your post.
In some themes, featured images may also be featured at the top of the post. For example, in our Brevier theme, users can opt to automatically lead a post with their selected featured image. We've seen other pre-made themes where this is the case too. So it can be disconcerting if you change from one theme to another, and featured images aren't dealt with similarly.
How featured images work in WordPress
Featured images, or post thumbnails, are not included in WordPress automatically — it's up to a WordPress theme to enable support for the feature and add the proper code corresponding to where the images should be displayed. WordPress includes a few default image sizes, which you can see under Settings > Media. The most common size used for displaying thumbnails is, naturally, the thumbnail size. However, themes can update this sizing in the theme code. If you try to change the thumbnail sizing yourself, and your options won't save, that means your theme set these options in the code and you won't be able to update them.
Themes and plugins can also register new image sizes for thumbnails. Here at <em>press, we set a thumbnail size in the theme code that works for as much of the site as possible, then we register new image sizes for featured posts that may require larger sizing, or an aspect ratio that stands out from the rest of the feed. Image sizes that are registered by your theme do not display in WordPress, but you can install the Simple Image Sizes plugin to view all image sizes currently registered to your site by your theme and plugins under Settings > Media. You can even edit registered image sizes if they aren't the right fit for your content — you just can't edit the thumbnail size if that's set in the theme code.
How your theme crops photos
When it comes to cropping, WordPress will crop to the center of the image, unless otherwise specified by the theme. WordPress will not scale an image up in size — if your image is too small, it will do what it can, but this often results in a thumbnail appearing to small. For example, in our Rania theme, if you have Retina support enabled, the featured post thumbnail size is 990 x 1280. If you upload an image that's 900 x 1500, WordPress will crop it to 900 x 1280. If your image is 1000 x 1200, it will crop it to 980 x 1200. If your image is 900 x 1000, it won't crop it at all. This is how you end up with thumbnails that don't line up.
How to determine your theme's optimum image size
To ensure that your thumbnails do line up, install the Simple Image Sizes plugin temporarily so you can view the sizing information for all thumbnails on your site. Also, be aware of your blog post column size. Look through your thumbnails for the largest width and largest height. If your blog post column size, doubled for retina, is larger than the largest thumbnail width, go by that instead. Those are your minimum featured image dimensions to ensure that every image size is cropped properly.
However, keep in mind that you may not actually use all image sizes for every post you publish, or you may not use a specific image size at all. For example, in our Rania theme, if you highlight evergreen content in the featured post section at the top of the Home Page (rather than always displaying the latest posts), then you only have to make sure those posts have large enough images, while your other posts can use smaller featured images. Similarly, if you don't display featured posts at all, you can use smaller featured images.
The last important piece: resizing old content!
One final note: any changes to image sizing affect images uploaded from that point forward — WordPress will not go back and resize images that have already been uploaded. This is why we recommend the Regenerate Thumbnails plugin when you install and activate any of our themes. You'll need to run the plugin any time you make a change to your image sizing, whether you install a new theme, install a plugin that adds a new image size (like our Grid plugin), or modify your media settings. You only need to run the plugin on featured images; however, keep in mind that if you edit an old post and swap out the featured image, you'll probably need to regenerate thumbnails for that image as well.
//
We hope this answers everything you wanted to know about featured images and helps your blog post grid look perfect! Let us know if you have any questions in the comments below.
