Create Additional Image Sizes in WordPress

Post Thumbnails or Featured Images are built-in features of WordPress, but you can give them additional utility by adding add_image_size() to let you to specify as well as to crop the image sizes as they appear. You can checkout how to add post thumbnails/featured images in WordPress as a precursor to this article. Here, you’ll learn how to create additional image sizes in WordPress.

Registering additional image sizes for theme

First, you need to place the following code in the functions.php file of your theme for adding the support of post thumbnails:

After enabling the support for post thumbnails, add the functionality of registering additional image sizes with the function add_image_size(). The usage of add_image_size function will be as follows: add_image_size(‘name-of-size’, width, height, crop mode). For example:

Here, we’ve specified three different sorts of image sizes with different modes like hard crop, soft crop, and unlimited height.

Hard Crop Mode – After the height, there is a value added as “true”, which is telling WordPress to crop the image to the size as defined (in this case we have defined it at 125 x 125px). We use this method in our theme designs to make sure everything is proportionate. This also prevents the design from breaking. This function will automatically crop the image from the both sides, or from the top and bottom. After uploading the image, before inserting it into the post, you can now ‘edit image’ so you can change the thumbnail, change the whole image, alter the scale, rotate or flip the image, or select the exact portion for thumbnail, as a few examples.

Soft Crop Mode – Soft cropping mode is turned on by default. This is why you will not get any additional value added after the height. It resizes the image proportionally without changing it, and you may not get the dimensions that you require. Generally it selects the width dimension and the heights may be different based on the image proportion. For example:

Create Additional Image Sizes in WordPress-1

Unlimited Height Mode – If you want to use super long images with limited width like some infographic posts, you can select this mode. Infographic images are generally long with a lot of information and by nature they are wider than the content width. For this you need to specify a width which will not break your design while leaving the height as unlimited without any distortion. For example:

Create Additional Image Sizes in WordPress-2

Displaying additional image sizes in WordPress theme

After adding the functionality for the desired image sizes, do the following to begin displaying them in your WordPress theme. Open the theme file to display the image and paste the code inside the post loop:

It is better to wrap it around with a styling that fits your requirements.

Regenerating Additional Image Sizes

The add_image_size() only alters the sizes from the point in time that it was added into the theme. Previous post images will not have the new size. So you need to regenerate the new image size for older post images with a plugin called Regenerate Thumbnails. After installation and activation of the plugin, a new option will be added under the Tools menu, called Regen.Thumbnails. Click on the Regenerate Thumbnail icon to use.

Create Additional Image Sizes in WordPress-3

There is also another plugin for this job: Simple Image Sizes.

Enabling Additional Image Sizes for Post Content

By enabling image sizes in your theme, you can use it only within your theme. But to make the image sizes available within the post content, you need a plugin called Simple Image Sizes.

After installation and activation of the plugin, a new option will show up under your Settings, called the Media page. Here, you will find a list of sizes that you defined in your theme. Now check the box “Show in post insertion” and the additional sizes will be available to use in the post content.

Create Additional Image Sizes in WordPress-4

Create Additional Image Sizes in WordPress-5

By using Simple Image Sizes plugin you could create custom image sizes directly from the WordPress dashboard.

Tagged under:

Leave a Reply

Your email address will not be published. Required fields are marked *

Faceebook

ManageWp
Toronto WordPress Web Design - NYTO Group

Create Additional Image Sizes in WordPress

by Tina time to read: 3 min
0