How to create multiple image sizes in WordPress?


In this week’s post I am going to cover how to create a number of different sized images when uploading an image using the default image uploader within WordPress.

This will involve editing your functions.php file within a code editor. Lets get started.

1. Enable post thumbnails in WordPress

First we need to tell WordPress to use post thumbnails, as this is not enabled by default. You can enable post thumbnails using the following code.

</p>

<p>add_theme_support( 'post-thumbnails' );</p>

<p>

2. Add new image sizes.

WordPress creates three different sized images by default.This includes thumbnail, medium and large image sizes which can be changed by going to Settings > Media and adjusting width/height for the corresponding sized image. Although this is a great feature these sizes can be constrictive in your theme, and can create images that are larger than the container in which its held. This can often lead to a messy looking site.

The following code is added to the functions.php file for each image size you wish to create and is duplicated for each subsequent image.

add_image_size( $name, $width, $height, $crop );

Lets explain the attributes.

The name attribute defines the name of the thumbnail used by WordPress, this does not amend the name of the uploaded image. The significance of this name will become clear later in this tutorial. Be sure to avoid the following names when using this code, as these are the names used to define the default image sizes in WordPress.

thumb, thumbnail, medium, large, post-thumbnail

The width/height attributes are self explanatory and are set in pixels.

The crop attribute is used to define how the image is cropped. If this is set to false the image will be proportionally cropped using the largest attribute of the height/width settings. If this is set to true this will create an image the exact size depending on the width and height set. You may lose some part of the image using this setting so this should be tested before use.

Here is an example of this code with the attrubutes completed, which will create an image size of 210px x 140px.

add_image_size('thumbnail-210px', 210, 140, true);

3. Add the image to a template file.

So we have now told WordPress to create the new image size, now we need to place it in our template file so that it will show on your site. Open up the corresponding file for where you want to place the image and add the following code.

&lt;!--?php if ( has_post_thumbnail() ) {   the_post_thumbnail('thumbnail-210px'); } ?--&gt;

The first line checks if a post thumbnail has been set using the feature image on the post screen. If you choose not to set a thumbnail then this will not produce an error.

The second line displays the thumbnail using the name specified earlier using the name attribute within the quotations.

You know need to define the image on the post by using the featured image tab in the write post section of WordPress.
WordPress  Featured Image Screen

One last point to remember, is that WordPress will generate these additional images on upload only so if you have existing images when adding this code, you will need to regenerate these images using a plugin such as Regenerate thumbnails or Simple Image Sizes Plugin. Also try not to use too many different sized images as this may cause errors when uploading the image. WordPress has to create each sized image on upload and your hosting setup may not be able to manage this creation. This will also take additional disk space on your server.

I hope you enjoyed this tutorial and be sure to leave a comment below.