In the WordPress, by default 4 image size are available. But if you want to add additional image size to make look site eye catching, you can do it by following method :

1. Register Additional Image Sizes in your site

Add custom image support into your site by adding following code :

add_theme_support( 'post-thumbnails' );

The main WordPress function is as below :

 add_image_size( string $name, int $width, int $height, bool|array $crop = false ) 

You can add your desired thumbnail size with attribute by following method :

  1. Hard Crop
    add_image_size( 'codecanal-hard-thumb', 120, 120, true );
  2. Soft Crop
    add_image_size( 'codecanal-easy-thumb', 220, 180 );
  3. Set the image size by cropping the image and defining a crop position:
    add_image_size( 'cc-top-left-thumb', 220, 220, array( 'left', 'top' ) );

2. Generating Additional Image thumbnails that are already Uploaded in Media

The above code is only work after adding the code. So for the previously uploaded images you have to run another crop function in the site. Here is one plugin named “Regenerate Thumbnails“, that will help you in cropping the previously uploaded images. Simply install the plugin, Activate it than go to “Tools” menu option in Admin area. There you will find “Regenerate Thumbnails” menu. Go to this menu and run the crop option.

3. Displaying additional image sizes in your WordPress site

if ( has_post_thumbnail() ) { 
    the_post_thumbnail( 'codecanal-hard-thumb' ); 
}

or

echo wp_get_attachment_image( 27, 'codecanal-hard-thumb' );
// we are assuming your Media Library image has a post id of 27...

Extra :
For Media Library Images (Admin) :
You can also select custom thumbnails from WordPress admin Media library. This can be achieved by using “image_size_names_choose” hook.

add_filter( 'image_size_names_choose', 'codecanal_custom_thumbnail' );
 
function codecanal_custom_thumbnail( $sizes ) {
    return array_merge( $sizes, array(
        'codecanal-hard-thumb' => __( 'Code Canal Thumb' ),
    ) );
}
There are currently no comments.