Cropped featured image in WordPress

Cropped featured image in WordPress

The featured image you see in the front end, however, is post_tumbnail as per the back end at the time of using it on the site. It is easy to add the image with the cropped feature in WordPress. In the beginning, you must add featured image support onto your website (note – necessary to include it to after_setup_theme hook) – you should also add it to functions.php.

add_theme_support( 'post-thumbnails' );

Let’s assume that you already chosen featured image dimensions (on either posts or pages). Now you want to crop whatever user uploaded to fit your container. Therefore you may want to add your custom size:

add_image_size( 'page-featured-image', 1110, 400, true ); // (cropped)

This is resulting in the enablement of hard cropping function. If you use the array then you will be able to fine-tune cropping function (such as cropping start from center, left or right side). The details for the same are discussed in the code references, which you may access by following the link mentioned below.
After the implementation of the functions.php it would look like:

function bbird_under_setup() {
 
// Add Featured image sizes
        add_theme_support( 'post-thumbnails' );         
        add_image_size( 'page-featured-image', 1110, 400, true ); // (cropped)
}
add_action( 'after_setup_theme', 'bbird_under_setup' );

The method of calling it (which should be within the loop) over your post or page:

if ( has_post_thumbnail() ) {
     the_post_thumbnail('page-featured-image');
}

References:

Post Thumbnails
Function Reference/add image size
Code Reference/add image size