While there are third party plugins, scripts, addons and other fixes for creating different image sizes in WordPress, the best way is to use the core functions of WordPress. This will help you reduce processing power and memory required to process the images. It will also help protect you from hacker exploits and it will save fees charged by various third party tools.
WordPress has a built-in, free to use feature known as Post Thumbnails (Featured Images) which can easily be adapted to create different sized images. You can then use the add_image_size() function to coerce WordPress into displaying an image size that you specify.
How To Get New Image Sizes In Your Theme
Start by including the following code in your functions.php file:
add_theme_support( 'post-thumbnails' );
This will activate support for Featured Images and allow you to record a number of different image sizes, via the add_image_size() function. The parameters for that function include: name, width, height and crop mode. You can read more details in the WordPress Codex.
Here are some examples of how to use the add_image_size() function inside the WordPress loop to make images of differing sizes:
add_image_size( 'sidebar-thumb', 110, 110, true ); // Hard Crop Mode add_image_size( 'homepage-thumb', 248, 182 ); // Soft Crop Mode add_image_size( 'singlepost-thumb', 590, 9999); // Unlimited Height Mode
What is Hard Crop Mode?
The modifier in the code – true or false – refers to whether or not the sizes that you’ve input will be used or not. You can easily use it as a switch – true to use it, and false to disregard the information.
This helps in establishing theme standards, to make sure the design won’t “break”. When set to true, the image will be resized and the bottom will be cut off (if necessary) to make it fit.
Soft Crop Mode
Soft Crop mode is a default cropping model that automatically resizes an image to the desired size, without distortions of any kind (in other words, it keeps the aspect ratio).
Unlimited Height Mode
This parameter limits the width of the image; however, it doesn’t interfere with an image that is very high. This is best used on infographic type posts, where you want an image to be limited horizontally but not vertically.
Theme files
By using the following code:
With the code inserted inside a WordPress loop, you will be able to specify different dimensions that you want used, for a specific picture.
Plugin: Thumbnail Regeneration
There is a plugin called Regenerate Thumbnail, which is used to regenerate thumbnails. This comes in useful when you’ve forced a specific image size using the add_image_size() function and now you want to generate other sizes of the image.
Once installed it will be available in your Tools WordPress tab and will give you the ability to regenerate all of your thumbnails.
Plugin: Simple Image Sizes
You can enable different image sizes for your posts with the help of the Simple Image Sizes, a WordPress plugin that simply adds a size option to your Settings and Media Pages. For each post you can pick different sizes for pictures, customizing them as you see fit.
Although, the default WordPress image functions are good enough for most themes and users, there may come a time when you want to create custom image sizes. It’s safer to do this yourself in your theme files using core WordPress functions.