Set a focal point on an image
To keep a face or product in frame when WordPress crops a photo, set a focal point on the image. A focal point marks the part of a photo that has to stay visible when the image is cropped. Heroes, background sections, and archive cards stretch photos to fill the space, so edges get cut off on phones and wide desktops. Without a focal point the crop centers on the middle, which can cut off a face or a product.
How do I set a focal point in the media library?
Set it once on the image and the places that crop it follow: archive cards, Image blocks, Hero Slider, and Dirigible blocks whose own focal point hasn't been moved.
- Go to Media → Library and open an image, or select one in a Select Media or Edit Gallery window.
- Find Focal Point in the sidebar.
- Click the preview on the subject, or type X and Y percentages from 0 to 100.
The focal point saves as soon as you set it. Until you set one, it sits in the center (50%, 50%).
You can also set it from Edit more details on the full attachment screen, or by clicking the Featured image preview in the page or post sidebar.
How do I set a focal point on one block?
Many Dirigible blocks that crop photos have their own focal point control in the block sidebar. The label depends on the block:
| Block | Control |
|---|---|
| Hero (image or video background) | BG Focal Point |
| Section (image style) | Image Focal Point |
| Photo Feature, grid cards, quotes, masked images, and similar | BG Focal Point, Image Focal Point, or a headshot focal point |
- Select the block.
- Open the block settings sidebar.
- Drag the marker onto the subject.
A block follows the image's media library focal point until you move the marker on the block. From then on the point is that block's own: other places that use the image aren't affected, and later changes in the media library don't move it. To go back, click Use the image's Media Library focal point under the marker.
The core Image block works the same way: its Focal point setting, when you set one, wins over the media library point for that block.
Blocks placed before this was added follow the image if their marker was still at the center. A block whose marker had been moved keeps its position.
Check the crop
Put the marker on the face, label, or logo, not on sky or empty background. Then preview the page at phone width and at desktop width.
With Dirigible AI installed, Dirigible → AI Focal Points can find the subject of each photo for you. See AI focal points.
Focal points keep a subject in frame. They won't save a headline that's part of the image, so keep text out of photos. See Best image size and format for your website.