After an image is uploaded to WordPress, we can set it to have new image dimensions (width x height) in addition to the three default sizes automatically generated by WordPress. The new image size should be registered using add_image_size to instruct WordPress to create it. Additional settings like cropping the image and setting the position of the crop can also be made.
New image dimensions can be registered using two methods. Method 1 is by manually editing the functions.php file and adding a few lines of code to it. The other method is with the help of a plugin called Simple Image Sizes.
Manually Create or Register Image Dimensions
To manually create an additional image dimension, open the functions.php file of your active theme. It can be opened using FTP, a File Manager or using WordPress Appearance Editor.
The following lines of code should be added (with your own values):
[php light=”true”]add_image_size( $name, $width, $height, $crop );[/php]
- $name: A unique name given to the new image size, without spaces. The defaults which are thumb, thumbnails, medium and large cannot be used.
- $width: Maximum width of the image for this size.
- $height: Maximum height of the image for this size.
- $crop: Set to 1 or true to enable crop. You can give array values to control crop position.
Tip: Use child themes and add the lines to the functions.php file there if you want the changes to stay after the theme is updated.
Examples:
For image size up to 500px X 500px without forced cropping to maintain the original aspect ratio.
[php light=”true”]add_image_size( ‘awesome-size’, 500, 500); [/php]
For image size 500px X 500px with forced cropping.
[php light=”true”]add_image_size( ‘awesome-crop’, 500, 500, true);[/php]
For 600px maximum width and unlimited height.
[php light=”true”]add_image_size(‘my-width’, 600); [/php]
For 600px maximum height and unlimited width.
[php light=”true”]add_image_size(‘my-height’, 9999, 600); [/php]
Cropping Settings
There is a configurable option to specify how the cropping is performed. You can set the crop options as an array to specify the positioning of the crop area.
Here are examples of all the possible crop positions:
[php]
add_image_size( ‘lefttop-crop’, 500, 500, array( ‘left’, ‘top’ ));
add_image_size( ‘leftcenter-crop’, 500, 500, array( ‘left’, ‘center’ ));
add_image_size( ‘leftbottom-crop’, 500, 500, array( ‘left’, ‘bottom’ ));
add_image_size( centertop-crop’, 500, 500, array( ‘center’, ‘top’ ));
add_image_size( ‘centercenter-crop’, 500, 500, array( ‘center’, ‘center’ ));
add_image_size( ‘centerbottom-crop’, 500, 500, array( ‘center’, ‘bottom’ ));
add_image_size( ‘righttop-crop’, 500, 500, array( ‘right’, ‘top’ ));
add_image_size( ‘rightcenter-crop’, 500, 500, array( ‘right’, ‘center’ ));
add_image_size( ‘rightbottom-crop’, 500, 500, array( ‘right’, ‘bottom’ ));
[/php]
Displaying Custom Sizes in Media Manager
To use these custom image sizes we can make use of image_size_names_choose filter which adds the new size after images are uploaded in the WordPress Media Manager. Once it is added, you will be able to select your custom image size from the media manager’s Attachment Display Settings > Size dropdown.
This is a final example to add two new image sizes of 500px X 500px one without cropping and the other with hard cropping. This new image size is to be added as a size option in the dropdown present in WordPress Media Manager, as shown in the image above.
[php]add_image_size( ‘awesome-size’, 500, 500);
add_image_size( ‘awesome-crop’, 500, 500, true);
add_filter(‘image_size_names_choose’, ‘my_custom_sizes’);
function my_custom_sizes($sizes) {
$addsizes = array(
"awesome-size" => __( "My Awesome Size"),
"awesome-crop" => __( "My Cropped Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}[/php]
Using a Plugin
The process of adding new image sizes for uploads and the select option to the media manager can be simplified with the help of a plugin. The plugin is called Simple Image Sizes and it will allow you to define new image sizes, enable and specify crop positions, and also regenerate the images according to the new sizes for the past uploads. It is much simpler with this plugin.
Here are the steps:
- Get the plugin called Simple Image Sizes.
- Go to Settings > Media. You will find a lot of new options.
- You will be able to add a custom size by clicking on Add a new size of thumbnail
- Give a name, specify maximum width and height, a public name and specify the crop position.
- Check the “Show in post insertion?” option to display the size in media manager’s attachment display settings size dropdown.
- Validate and Save Changes at the end.
Regenerating Images
There’s also an additional feature that comes with this plugin. It allows you to regenerate images or thumbnails for all or the selected particular image sizes. This feature is useful when you have to generate image sizes for the past uploaded images. Only adding new image sizes doesn’t have any effect in previously present images.
To regenerate, just select the sizes and post types, and then click on Regenerate Thumbnails. It may take some time depending upon the number of images that you have.