Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#61066 reopened enhancement

Add "cover" cropping mode for custom image sizes

Reported by: jefferyto's profile jefferyto Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: Cc:


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.

Change History (3)

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.

3 months ago

#2 @joedolson
3 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

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.

#3 @jefferyto
3 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

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
Note: See TracTickets for help on using tickets.