Change size of thumbnails images

In some cases, you may need to change the sizes of the thumbnails images for a better display. This article will show you how to do it. In order to imagine easily, please take a look at this example.

The Smart Content Box- Small carousel layout is designed for page layouts which have at least a sidebar. But if you use it for a full-width page (page without sidebar), the SBC shortcode still loads the small size of thumbnail images as default, then the images are blurred. The solution is that we will add a small custom code to increase the image sizes.

With Sidebar
Without Sidebar- Before
Without Sidebar- After


As you can see, the thumbnail images look sharper.

How to change the size of the images.

1. Increase the dimension
Add this code to themes\truemag-child\functions.php

add_action( 'after_setup_theme', 'wpdocs_theme_setup' );
function wpdocs_theme_setup() {
add_image_size('thumb_180x101',278,157, true); //scb small

In this case, thumb_180x101 is the value which is used Smart Content Box- Small Carousel layout. Change that value according to the corresponding layouts. You can check other values below in functions.php file.

add_image_size('thumb_139x89',139,89, true); //widget
add_image_size('thumb_365x235',365,235, true); //blog
add_image_size('thumb_196x126',196,126, true); //cat carousel, related
add_image_size('thumb_520x293',520,293, true); //big carousel 16:9
add_image_size('thumb_260x146',260,146, true); //metro carousel 16:9
add_image_size('thumb_356x200',356,200, true); //metro carousel 16:9 bigger
add_image_size('thumb_370x208',370,208, true); //scb grid 16:9
add_image_size('thumb_180x101',180,101, true); //scb small
add_image_size('thumb_130x73',130,73, true); //mobile
add_image_size('thumb_748x421',748,421, true); //classy big
add_image_size('thumb_72x72',72,72, true); //classy thumb
add_image_size('thumb_358x242',358,242, true); //shop

2. Install and activate this plugin, Go to Tools- Regen. Thumbnails to regenerate the images.