How to Create Additional Image Sizes in WordPress


Last month there was a huge vulnerability spotted in a famous image resizing script known as TimThumb. Since then the community has collaborated and fixed the issues. While TimThumb is a viable option, we believe that WordPress theme developers should focus on using the core functions rather than relying on third party scripts. In this article we will show you how to add additional image sizes in WordPress.

WordPress has a built-in feature Post Thumbnails aka Featured Images. There is also a built-in function add_image_size() which lets you specify image sizes and give you the option to crop. Using these core functions in your theme can essentially eliminate the need of a third party script like TimThumb in most cases.

Registering Additional Image Sizes for your Theme

You will need to start by adding the support of post thumbnails by placing the following code in your theme’s functions.php file:

add_theme_support( 'post-thumbnails' );

Once you enable the support for post thumbnails, you can now use the functionality of registering additional image sizes with the function add_image_size(). The usage of add_image_size function is like this: add_image_size( ‘name-of-size’, width, height, crop mode );

Example code can look like:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode  add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode  add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode  

Now if you notice, we have specified three different sort of image sizes. Each has different modes such as hard crop, soft crop, and unlimited height. So lets cover each example and how you can use them for your benefits.

Hard Crop Mode – As you notice, there is a value “true” added after the height. That true value is telling WordPress to crop the image to the size that we have defined (in this case 120 x 120px). This is the method we use a lot in our theme designs to make sure everything is proportionate and our design is not breaking. This function will automatically crop the image either from the sides or from the top and bottom depending on the size. The downside of hard cropping is that you cannot control which part of the image is displayed.

Correction by Mike Little – When you have uploaded an image and before you insert into post, you can click on ‘edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.

Soft Crop Mode – By default soft cropping mode is turned on this is why you do not see any additional value added after the height. This method resizes the image proportionally without distorting it. So you might not get the dimensions that you wanted. Usually it matches the width dimension and the heights are different based on each image’s proportion. An example display would look like this:

Soft Crop Example

Unlimited Height Mode – There are times when you have super long images that you want to use in your design, but you want to make sure that the width is limited. The main use we find for this sort of image size is on infographic posts. Infographics tend to be very long and full of information. Hard cropping such image on a single post page is not a great idea. But by nature infographics are wider than the content width. So what you can do is specify a width which will not break your design while leaving the height to be unlimited, so all of infographic can be shown without any distortion. An example display would look like this:

Unlimited Height Mode Example

Displaying additional image sizes in your WordPress theme

Now that you have added the functionality for the desired image sizes lets take a look at displaying them in your WordPress theme. Open the theme file where you want to display the image and paste the following code:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Note: This bit of code must be pasted inside the post loop.

That’s all you really have to do to display the additional image sizes in your WordPress theme. You probably should wrap it around with the styling that fits your need.

Regenerating Additional Image Sizes

If you are not doing this on a brand new site, then you probably will have to regenerate thumbnails. The way add_image_size() function works is that it only generates the sizes from the point it was added into the theme. So any post images that were added prior to the inclusion of this function will not have the new size. So what we need to do is regenerate the new image size for older post images. This is made easy by the plugin called Regenerate Thumbnails. Once you install and activate this plugin, a new option is added under the menu: Tools » Regen. Thumbnails

Regenerate Thumbnail Plugin Screen

Click Regenerate Thumbnail icon and let the plugin do its job.

Another plugin that can do this job is Simple Image Sizes.

Enabling Additional Image Sizes for your Post Content

Even though you have enabled image sizes in your theme, the usage is limited only to your theme which does not makes any sense. All image sizes are being generated regardless, so why not make it available for the post author to use it within the post content. You can do this by using a plugin called Simple Image Sizes.

Once you install and activate this plugin new options will be added on your Settings » Media page. You will see a list of sizes that you defined in your theme. All you have to do is check the box that says “Show in post insertion”.

Post Insertion for Additional Image Sizes

Once you check this box, additional sizes will be available for your author to use in the post content.

Additional Image Sizes for Posts

Notice in the image above, we have all the image sizes that we defined in our theme available for our authors to use in the post content if they desire.

Simple Image Sizes plugin also lets you create custom image sizes directly from the WordPress dashboard.

We believe this method should be added under best practices for all WordPress theme developers. What are your thoughts?

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.