WordPress has a built-in feature post thumbnail aka featured image. Whenever new image uploaded to WordPress through media uploader 3 types of images with different sizes get created.
Admin can register 3 sizes for images from Settings->Media page.
Default Thumbnail Size
As seen in the screenshot, Thumbnail size, Medium size, Large size are registered. When we upload a new image, 3 images with above-specified dimensions proportionally created. If we select the option ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’ under ‘Thumbnail size’ then the image will be a hard crop to the specified size.
Its all about default 3 sizes of image WordPress allows us from Media settings. What if we need to register one more size for the uploaded image? There are some cases appear where we need to display the images with the exact width and height.
Well, we can do this with the few lines of code.
Register New Image Size For Thumbnails
WordPress provides a function
add_image_size() which helps to register new post_thumbnail size.
To use this method we should add support for post thumbnails. Place the below code in
add_theme_support( 'post-thumbnails' );
add_image_size() method has 4 parameters like this: add_image_size(‘name-of-size’, width, height, crop mode );
If we pass the fourth parameter as true then the image will be a hard crop. If we pass false then the image will be crop proportionally.
Example code would be as follows.
add_image_size('hard-crop-thumb', 120, 120, true ); // Hard Crop Mode add_image_size('soft-crop-thumb', 220, 180 ); // Soft Crop Mode
Make sure you are not using reserved names in above function. Reserved names are ‘thumb’, ‘thumbnail’, ‘medium’, ‘large’, ‘post-thumbnail’.
So our final code is as follows.
add_theme_support( 'post-thumbnails' ); add_image_size('hard-crop-thumb', 120, 120, true ); // Hard Crop Mode add_image_size('soft-crop-thumb', 220, 180 ); // Soft Crop Mode
Once you add above code in your functions.php, every new image uploaded through media uploader will create additional 2 thumbnails with above sizes.
How To Use It?
We have added code for additional image sizes, Now to display those images you can use the below code.
<?php the_post_thumbnail( 'your-specified-image-size-name' ); ?>
Above code should use inside post loop. If you want to use it outside the loop then the code will be:
<?php get_the_post_thumbnail('YOUR_POST_ID', 'your-specified-image-size-name'); ?>
Why Should Use Regenerate Thumbnails?
add_image_size() function register new thumbnail sizes for the new images, not to the old images which already uploaded in a system. To convert old images, install the plugin Regenerate Thumbnails and activate it.
After activating plugin, go to Tools->Regen. Thumbnails. Click on Regenerate All Thumbnails button.
You can also regenerate thumbnail for specified image. Below are steps for it.
- Go to Media page.
- Select the table grid layout.
- Check the image you want to regenerate thumbnails.
- Select the ‘Regenerate Thumbnails’ option from the drop-down.
- Hit the Apply button.
We hope you understand about register custom image sizes and resize existing images. If you have any questions or suggestions, please leave a comment below.
- How To Set Featured Image Programmatically In WordPress
- Resize Image In PHP Using TinyPNG
- Upload Image Using Bulletproof Library In PHP
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.