What the focal point does
An image is cropped to fit the space a block gives it, and the same image is cropped differently on a phone and on a desktop. The focal point tells the crop what to keep: it is set once on the image, and every crop of that image keeps it in view.
Without a focal point, the crop is centred. A subject near the edge of the photo, such as a face in a corner, can be cut off.
Set a focal point
- Open the image in the media library and click the image in the Focal point field.
- Click the part of the image that must always stay visible, such as a face or a product.
- Save and publish the image. Every block that uses the image gets the new crop.
Set a point on every image where the subject is not in the middle.
What the crop does
The point is stored on the image as a position in percent from the top left. The crop reads it only when it cuts the image down. A resize that keeps the image's own proportions shows the whole image and ignores the point.
Compare the crops
Both frames below show the same square image at the same width. Its subject, the red SUBJECT circle, sits near the top left.
- No focal point: the crop is centred.
- Focal point set: the image starts with a point on the subject.
The circle must stay in view in the second frame. When it is cut off there too, the crop ignores the point.