Would you like to create additional image sizes in WordPress?
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.
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 Modeadd_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Modeadd_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.
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:
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.
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
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.
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.