Add "cover" cropping mode for custom image sizes

[jefferyto]

When developing a custom theme, sometimes images are shown, not to display them in their entirety, but to "fill in" an area with a graphical element.

For example, the category/tag archive page may be designed to have a thumbnail area next to each post title. Often, the design goal is to have the thumbnail area entirely covered with an image; whether the whole post thumbnail is visible is not important.

The current "soft" cropping mode for custom image sizes do not cater to this use-case.

Using the above example (post thumbnails on an archive page), suppose the thumbnail area is 200px x 200px and the theme adds a custom 200x200 image size:

add_image_size( 'custom-size', 200, 200 );

If the user uploads a 600x400 image, then WordPress will generate a 200x133 version of the image. This version is not large enough to cover the 200x200 thumbnail area.

In other words, the current "soft" cropping mode enforces a maximum image size. Using CSS terms, this corresponds to the contain keyword for background-size and object-fit.

What this enhancement request is asking for is a "cover" cropping mode that enforces a minimum image size, to be used with background-size: cover or object-fit: cover.

In the above example of a 600x400 image, this "cover" cropping mode would generate a 300x200 version. This version would be large enough to cover the 200x200 thumbnail area.

[joedolson]

Hi! Thanks for reporting an issue!

In fact, WordPress already supports this. The 4th parameter of the add_image_size() function sets the crop behavior. See ​add_image_size() in the function documentation.

Essentially, you'll want something like add_image_size( 'custom-size', 200, 200, true );, to do a hard crop from the center of the image, or add_image_size( 'custom-size', 200, 200, array( 'left', 'top' ) ); to do your hard crop from the top left corner, etc.

[jefferyto]

I am aware of hard cropping mode and it is not what I am asking for.

With hard cropping mode, the original image is cropped without any resizing first. The cropped image is the exact right size but it cuts out detail from the original image.

If you are familiar with CSS, the easiest analogy is:

• Soft cropping mode is like background-size: contain
• Hard cropping mode is like background-size: 100%
• "Cover" cropping mode (what I am asking for here) is like background-size: cover (just the resizing behaviour, I am not asking for any cropping)

I think the key points I am asking for are:

• Resizing the image (and no cropping) so the overall integrity of the image is retained
• Being able to specify a minimum image size (width/height), so that the resized image can be used without any upscaling by the browser