custom-image-sizes

Custom Featured Image Sizes in WordPress

When developing websites with WordPress, an often overlooked feature is the built-in function that allows developers to create their own custom Featured Image sizes. In this tutorial and supporting video, I’m going to explain why and how you can use custom Featured Image sizes.

WordPress themes that support Featured Image allow authors to upload and specify a ‘featured image’ to accompany their post. However I see countless WordPress sites whereby featured images are not shown at their true native size and are simply scaled through CSS. Displaying the image at a different size can often look distorted and take longer to load than necessary. In the video tutorial below, I’ll show you a few examples of what I mean by this and also how easy it is to not only set the base Featured Image size, but to create and use as many sizes as you like for the different usage that you might need around your site.

How to set the base Post Thumbnail Size

Like I demonstrate in the video, setting your Post Thumbnail size is incredibly easy via your theme’s functions file. Simply add and customise one of the two lines below:


set_post_thumbnail_size( 60, 60 ); // Creates a proportionate image 60px by 60px

set_post_thumbnail_size( 60, 60, true ); // Creates a cropped image 60px by 60px

And if your theme doesn’t already bring out the thumbnail, you can simply use the following code within the query Posts Loop:

<?php the_post_thumbnail(); ?>

How to create additional custom Featured Image sizes

If you’re post’s featured image is going to appear at different sizes throughout the site, then you can register, generate and deploy as many different sizes as you wish. New custom sizes can be registered by adding them to your functions file in a similar way to setting the default Featured Image size above.


add_image_size( 'small-featured', 300 ); // Creates a proportionate new image 300px wide with unlimited height

add_image_size( 'small-cropped', 200, 200, true ); // Creates a cropped new image 200px by 200px high

Once you’ve set your new sizes on the theme’s functions.php file, you can then call them out on the front-end by using referencing them in either of the following ways:


<?php the_post_thumbnail( 'small-featured' ); ?>

<?php the_post_thumbnail( 'small-cropped', array('class' => 'classname')); // to add a class to the img tag ?>

How to generate the new Featured Image size for existing images.

All this can sound great, but there is one small hurdle if you’re hoping to add a new Featured Image size onto an existing and established WordPress site. Once you create the new custom Featured Image size on your functions file, WordPress won’t automatically regenerate your existing media library images for the new size. It’s fine from then-on-in, any new image you upload will be generated at the new size, but it won’t automatically go through your previously uploaded images and do the same.

Regenerate Thumbnails is a free WordPress plugin
Regenerate Thumbnails is a free WordPress plugin that quite literally regenerates your media library images against your latest and new sizes.

However help is at hand. Regenerate Thumbnails for WordPress is a free plugin designed to specifically overcome this problem. From the Tools tab in the sidebar, you can choose to regenerate all thumbnails and images within your Media Library (see opposite). Or you can navigate to the Media Library itself and regenerate individual or selections of images that you require at the new sizes.

So why bother?

Displaying various featured images at an exact, native size can seem like an unnoticeable and unnecessary task. However, when you consider that they will be crisp, undistorted, optimal file size and tailored to your design; it really is worth spending an extra few minutes setting up and deploying custom featured image sizes.

  • Pedro Ponciano

    but if i want to choose in the backoffice the size that I want to choose? instead of showing the three sizes?

    • http://www.creare.co.uk/ James Bavington

      Hi Pedro, sorry I’m not sure I understand your question. Are you talking about specifying a specific size of image when adding one to posts and pages?

  • Harry

    Hi, this looks like a great solution, but I second Pedro’s question: how could we choose the exact size of the image when setting a featured image?
    For me this would solve a problem: my pages (many, as I have use WP as CMS) have different sized featured images than posts (as posts have a slighly different layout, with postmeta to the left of the image.

    So either being able to choose the size of the featured image or being able to adapt the code above so it is different per post type would be best. Would it be possible to adapt the code, so it is different per post type?

    Thanks!

    • http://www.creare.co.uk/ James Bavington

      You can’t adapt the code per post type, you would simply have to create new custom image sizes for each. You could then have specific theme files per custom post type or post format, and fetch images for a specific custom size. Hope that makes sense?

  • Pedro Ponciano

    Hello James,
    sorry for my late reply (5months) but I have a break on learning wordpress.

    So what i want it to say was something like this:
    I have three different width sizes, 600px, 400px, 200px for the post thumbnail. And then I want to select for every post a size. Like size one, size two and size three. to look something like this (attachment).

    It’s possible?