If  you are looking for additional image sizes then you are aware of default WordPress’s four images sizes

  • Thumbnail 
  • Medium
  • Large
  • Full-size

But additional image sizes  are important according to the purpose of design that helps to look better and perform well on WordPress sites.

In this article we will help to create additional image sizes.

Register additional images sizes

Add following code in your active theme’s functions.php for the support of post thumbnails.

add_theme_support( 'post-thumbnails' ); 

With this code you are able to register addition images sizes as shown in the example below:

add_image_size( 'portfolio-thumb', 160, 160, true ); // Hard Crop Mode
add_image_size( 'gallery-thumb', 320, 280 ); // Soft Crop Mode
add_image_size( 'full-page-thumb', 690, 9999 ); // Unlimited Height Mode 

From the above example you see three different images sizes that have different modes such as hard crop,soft crop  and unlimited height.

Hard crop

As you notice from the above example there is a “true” argument after the height.

True argument cropping position is centered but if you have another purpose for cropping images size then you can use array ( ‘horizontal-position’, ‘vertical-position’ ).where

  • Horizontal-position accepts: ‘left’, ‘center’, or ‘right’.
  • Vertical-position accepts: ‘top’, ‘center’, or ‘bottom’.

Soft crop mode 

As shown in example you don’t see additional value added after height.By default mode is turned on, It has value of false.

If you only specify the width, the image will be as long as it needs to be to keep the proportions

Unlimited height mode

If we are planning an infographics page then this method is useful for long and full of information.

By specifying width while leaving the height to be unlimited is best practise for good look of the page.

Displaying additional image size in your frontend

Now your desired image size can be displayed to your theme’s pages by pasting the following code:.

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

With this code you can display image size with the styling that looks good as your need.

If you want to display one picture in particular, using one of your new sizes, use the following code:

 echo wp_get_attachment_image( 42, 'your-custom-size' ); 

Note: Specify your image ID in this case.

This is how you can create and display image size in your WordPress Theme.

But if you switch themes and want old images to regenerate then easy steps to regenerate thumbnails or new image size in wordpress using plugin.

Leave your comments below and let us know which update and feature you liked more. Also, subscribe to our newsletter. We send some awesome WordPress tutorials through our newsletter.

Leave a Reply

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