By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
WPExpertPro
SUBSCRIBE
WPExpertProWPExpertPro
Aa
Search
Have an existing account? Sign In
Follow US
All Rights Reserved by Homethagan.
WPExpertPro > WordPress Tutorial > How to Create Additional Image Sizes in WordPress
WordPress Tutorial

How to Create Additional Image Sizes in WordPress

Homethagan
Last updated: 2022/08/16 at 6:13 AM
Homethagan 7 Min Read
Share
SHARE

Would you like to create additional image sizes in WordPress?

Contents
Why do you need to make extra image sizes in WordPress?Additional Image Sizes for Your Theme to RegisterIn your WordPress theme, you can show different image sizes.Additional Image Sizes RegenerationAdding More Image Sizes to Your Post’s Content

WordPress creates multiple copies of image uploads in different sizes by default. Themes and plugins for WordPress can also create their own image sizes.

We’ll show you how to make additional image sizes in WordPress and use them on your website in this article.

In WordPress, you can make additional image sizes.

Why do you need to make extra image sizes in WordPress?

In general, all popular WordPress themes and plugins do a great job with image sizes. Your WordPress theme, for example, may generate additional sizes for use as thumbnails on archive pages.

However, these image sizes may not always be suitable for your needs. In a child theme or a post grid layout, you might want to use a different image size.

This can be accomplished by creating additional image sizes in WordPress and then calling these sizes as needed.

As a result, let’s look at how to make additional image sizes in WordPress.

Additional Image Sizes for Your Theme to Register

By default, most WordPress themes, including all of the best WordPress themes, support post thumbnails (featured images).

If you’re making a custom WordPress theme, however, you’ll need to add support for post thumbnails to the functions.php file.

1
add_theme_support( 'post-thumbnails' );

You can now use the function add image size to register additional image sizes once you’ve enabled support for post thumbnails ().

The following format is used with the add image size function:

add_image_size( 'name-of-size', width, height, crop mode );

Example code can look like the following:

1
2
3
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, you’ll notice that we’ve specified three different image sizes. There are several modes available, including hard crop, soft crop, and unlimited height.

Let’s take a look at each example and see how you can apply it to your own projects.

1. Hard Crop Mode

You’ll notice that after the height, there’s a “true” value. This instructs WordPress to crop the image to the exact size we specify (in this case 120 x 120px).

This method is employed to ensure that everything is proportionately correct. Depending on the size of the image, this function will crop it from the sides or from the top and bottom.

A good example of a hard crop is

2. Soft Crop Mode

Soft cropping mode is enabled by default, which explains why no additional value is added after the height. This method proportionally resizes the image without distorting it. As a result, you might not get the dimensions you desire. It usually matches the width dimension, while the heights vary depending on the proportion of each image. The following is an example of a display:

An example of a soft crop

Unlimited Height Mode

There are times when you have extremely long images that you want to use in your design but need to keep the width to a minimum. Infographic images, for example, are typically very long and wider than the content width.

This mode lets you set a width that won’t break your design while leaving the height unrestricted.

Mode with no limit on height

In your WordPress theme, you can show different image sizes.

Let’s look at how to display the desired image sizes in your WordPress theme now that you’ve added the functionality for them. Paste the following code into the theme file where you want the image to appear:

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

Note: You must paste this code inside the post loop.

That’s all there is to it when it comes to adding additional image sizes to your WordPress theme. You should most likely wrap it in the style that best suits your needs.

Additional Image Sizes Regeneration

If you’re not starting from scratch, you’ll almost certainly have to regenerate thumbnails.

The sizes are generated by the add image size() function only from the point where it was added to the theme. This means that any images added prior to the implementation of this feature will not have new sizes.

You’ll need to regenerate the new image size for older images to fix this. Regenerate Thumbnails is a plugin that makes this simple. When you install and activate the plugin, it adds a new option to the menu: Tools » Thumbnail Regeneration

Refresh the thumbnails

You’ll be able to regenerate thumbnails for all or just the featured images. To avoid any unexpected behavior or broken images, we recommend regenerating all images.

Adding More Image Sizes to Your Post’s Content

Despite the fact that you have image sizes enabled in your theme, the usage is limited to your theme, which makes no sense.

Because all image sizes are generated regardless, why not make it available to the post author to use within the content of the post

Add the following code to your theme’s functions file to accomplish this.

1
2
3
4
5
6
7
8
function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail',
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

After you’ve added the code, don’t forget to save your changes.

Now you’re ready to add an image to a WordPress post or page. Under the ‘Image size’ option in the image block settings, you’ll see your custom image sizes.

Inside the post editor, select your custom image size.

When adding images to posts and pages, you and other authors working on your website can now choose from these size options.

We hope this article taught you how to use WordPress to create additional image sizes.

Homethagan August 16, 2022 December 20, 2021
Share this Article
Facebook Twitter Email Copy Link Print
By Homethagan
Follow:
Hello, my name is Homethagan. This is my personal blog. It is focused on “building businesses online” where I share my journey and experiences with you. My goal is to create insightful and relevant content that you can put to work in your personal and professional life. If you have an online business — or want to have one, then this blog is for you.
Previous Article How to Add a Scrolling News Ticker in WordPress
Next Article How to Find the Most Important Page of Your WordPress Site

You Might Also Like

WordPress Tutorial

How to Disable WordPress Admin Email Verification Notice

Do you want to turn off WordPress' admin email verification…

5 Min Read

How to Properly Add Google AdSense to Your WordPress Site

Do you want to integrate Google AdSense into your WordPress…

13 Min Read

How to Save Changes Without Publishing in WordPress

Would you want to save changes to a WordPress post…

5 Min Read

How to Add Google Maps in WordPress

Would you like Google Maps to appear on your WordPress…

12 Min Read
Follow US

All Rights Reserved by Homethagan.

Welcome Back!

Sign in to your account

Lost your password?