WordPress gives you three different image sizes to set in the media settings of the dashboard, but sometimes it’s handy to add a few more to your theme to use around your website.
By default, you can set a thumbnail size, a medium size and a large size. It is possible however, to add in a few additional image sizes with just a little code in the functions file, by using WordPress’ in-built function: add_image_size.
Enable Post Thumbnails
Firstly, you’ll need to add support for post thumbnails if you haven’t already:
add_theme_support( 'post-thumbnails' );
Add Images Sizes
Then add some extra images sizes:
//Additional media sizes add_image_size( 'large-thumb', 200, 200, true ); // Hard Crop Mode add_image_size( 'homepage-thumb', 300, 200 ); // Soft Crop Mode add_image_size( 'singlepost-thumb', 500 ); // Unlimited Height Mode
The add_image_size function takes the following parameters: add_image_size(‘your-label’, width, height, crop mode);
The following crop modes are available:
- Hard crop – crops images to exact dimensions, either from the sides or from the top and bottom
- Soft crop – resizes the image proportionally and without distortion. Often it’s the width that is maintained with the height being variable
- Unlimited height – allows you to specify a width, whilst leaving the height as unlimited
Display Image Sizes
You can call one of your media sizes like so, just change the label to match the image size you want to use:
If you want previous images to have these new image sizes then you’ll need to regenerate them. You can do this with the Regenerate Thumbnails plugin by Alex Mills.
You can learn more about the add_image_size function on the WordPress Code Reference.