To ensure that the images on your WordPress website are displayed exactly the way you want them, you can control the size of your images and the cropping. One important aspect of visual presentation is thumbnail cropping. WordPress, a powerful Content Management System (CMS), offers a variety of functions for image cropping. This article explores the details of thumbnail cropping in WordPress and provides code examples to help you achieve the desired appearance of your website’s thumbnails.

Table of Contents

Understanding WordPress Thumbnail Crop

WordPress automatically generates several sizes of each image you upload to fit various locations on your site. By default, it creates three image sizes: thumbnail, medium, and large. The thumbnail size is usually used for previews and listings, making it crucial for the overall user experience.

Thumbnail cropping is the process of resizing and altering the aspect ratio of your original image to fit a specific thumbnail dimension. WordPress offers two primary thumbnail cropping options:

Soft Crop: This method retains the image’s original aspect ratio while adjusting its size to fit the desired thumbnail dimensions. However, it might not fill the entire thumbnail area, leaving some space horizontally or vertically.
Hard Crop: Hard cropping, on the other hand, alters the original aspect ratio to match the specified thumbnail dimensions, filling the entire thumbnail area. This might lead to some parts of the image being cut off.

Setting Thumbnail Sizes in WordPress

WordPress allows you to set the thumbnail size through its admin interface or by using code in your theme’s functions.php file.

Via Admin Interface:

Navigate to Settings > Media, where you can specify the dimensions for thumbnails, medium, and large image sizes.

Via Code:

Add the following code to your theme’s functions.php file to set custom image sizes:

PHP

add_action( 'after_setup_theme', 'custom_thumbnail_sizes' );
function custom_thumbnail_sizes() {
    add_image_size( 'custom-thumb', 220, 180, true ); // Hard Crop
    add_image_size( 'soft-thumb', 220, 180, false ); // Soft Crop
}

PHP

Custom Cropping with add_image_size Function

Use the add_image_size function to define custom image sizes and cropping modes. The syntax of the function is as follows:

PHP

add_image_size( $name, $width, $height, $crop );

PHP

$name: The name of the image size (e.g., ‘custom-thumb’).
$width: The desired width in pixels.
$height: The desired height in pixels.
$crop: Boolean. Set to true for hard crop or false for soft crop.

Utilizing Array Crop for Precision Control

For those who require more control over the cropping position, WordPress accommodates this through the use of an array instead of a Boolean value for the crop parameter in the add_image_size function. This is often referred to as an array crop. The array crop allows you to specify the crop position by passing an array with two values representing the x and y coordinates of the crop origin.

Here’s the modified syntax:

PHP

add_image_size( $name, $width, $height, array( $x_crop_position, $y_crop_position ) );

PHP

$x_crop_position: Accepts 'left', 'center', or 'right'.
$y_crop_position: Accepts 'top', 'center', or 'bottom'.

These values let you control the starting point of the crop. For instance, if you want to ensure that the top of your images is always visible in the thumbnails, you might use 'center' for the x-coordinate and 'top' for the y-coordinate.

Here’s a practical code example:

PHP

add_action( 'after_setup_theme', 'custom_thumbnail_sizes' );
function custom_thumbnail_sizes() {
    add_image_size( 'custom-thumb', 220, 180, array( 'center', 'top' ) ); // Array Crop
}

PHP

In this example, the custom-thumb image size will always start cropping from the original image’s center-top position, ensuring the image’s top part is always visible in the thumbnail.

Array cropping is a powerful tool in the WordPress developer’s toolkit, enabling precise control over how thumbnails are generated and ensuring that critical parts of images are always visible, thus enhancing your website’s visual appeal and user experience.

Advanced Thumbnail Cropping with Plugins

For more control over thumbnail cropping, numerous plugins are available. One notable plugin is Simple Image Sizes. This plugin provides a user-friendly interface to create and manage multiple image sizes and choose the cropping mode for each size.

Conclusion

By understanding the built-in cropping options and leveraging the add_image_size you can ensure your images are always perfectly displayed,

Additional Resources

WordPress.org add_image_size() Function
Simple Image Sizes

How to Create Custom Thumbnails and Set Image Cropping in WordPress