Image cropping and positioning

Responsive Focal Point

Lets an editor pick the part of an image that must never be cropped out, and set a different point per breakpoint when one is not enough.

Free on WordPress.org, and finished. The paid tier is still being built.

Setting the point in the Media Library, with live previews of the crop at five aspect ratios.

The problem

Every theme crops images to fit, and the crop is always from the centre. On a wide hero that is usually fine. On a portrait crop for mobile it takes the middle of the photograph and throws away the person the photograph was of. Editors work around it by uploading the same image three times, cropped by hand.

How this handles it

An editor clicks the point that matters, once, in the Media Library, and sees live previews of how it will crop at five aspect ratios. The value is written as object-position and resolved in the CSS cascade, so there is no JavaScript, nothing shifts after load, and it costs nothing on a page that has no focal points set. Where one point is not enough, a breakpoint can carry its own.

Every screen, as it actually looks

Screenshots from a running install, not mockups. These are the same images on the WordPress.org listing.

Setting the point in the Media Library, with live previews of the crop at five aspect ratios.
Setting the point in the Media Library, with live previews of the crop at five aspect ratios.
A breakpoint with its own value. Anything left blank inherits from the next widest, so nobody fills in every row.
A breakpoint with its own value. Anything left blank inherits from the next widest, so nobody fills in every row.
The Breakpoints screen: the widths an editor can set a point for.
The Breakpoints screen: the widths an editor can set a point for.
The Status screen: what is active, and how to use the helpers in a template.
The Status screen: what is active, and how to use the helpers in a template.
The image audit: coverage across the library, and which images still have nothing set.
The image audit: coverage across the library, and which images still have nothing set.

Free against Pro

Free, on WordPress.org

  • One focal point per image, honoured at every size
  • Two custom breakpoints on top of the default
  • Live crop previews while choosing the point
  • Resolved in the CSS cascade, with no JavaScript
  • Applies to post content images and featured images

Pro, in development

  • Unlimited breakpoints
  • A library wide audit of what has no focal point yet
  • Cover block and ACF image field support

Not on sale yet. This tier is still being built, so there is nothing to buy and this page will not ask you to. The free version beside it is finished, supported and does everything listed.

Install the free version

It is on WordPress.org and it is finished software, not a preview of the paid tier.