Setting a focal point

  • focal-point
  • images
  • media-library
  • cropping
  • hero

A focal point tells Dirigible which part of a photo should stay visible when the image is cropped to fill a space. Without one, crops default to the center — which can cut off faces, products, or logos on phones and wide desktops.

Prepare images first with Formatting images, then set focus where it matters.

What a focal point does

Cover-style layouts (heroes, background sections, archive cards, and similar) scale the photo to fill the frame. Edges can disappear at different breakpoints. The focal point anchors the crop on the subject you care about.

Set it on the image (media library)

Focal points live on the attachment in the media library. Change it once and every place that uses that image’s library focal point follows along.

  1. Go to Media → Library and open an image, or choose an image in a Select Media / Edit Gallery modal.
  2. In the sidebar, find Focal Point.
  3. Click the preview where the subject should stay, or enter X and Y percentages (0–100).
  4. Changes save automatically — you do not need a separate Save for the focal point itself.

You can also set it from Edit more details on the classic attachment screen, or by clicking the Featured image preview in the post/page sidebar after you assign one.

If you never set a point, the default is the center (50%, 50%).

Set it on a block

Many Dirigible blocks that crop a photo also offer a focal point control in the block sidebar. Labels vary by block:

Where Typical control
Hero (image or video background) BG Focal Point
Section / background (image style) Image Focal Point
Photo Feature, grid cards, quotes, masked images, and similar BG Focal Point, Image Focal Point, or a headshot/avatar focal point
  1. Select the block on the canvas.
  2. Open the block settings sidebar.
  3. Drag the focal point marker (or use the picker) so the subject stays in frame.

When you pick an image from the library, many blocks start from the attachment’s saved focal point. You can still override it for that block without changing the library default for other uses.

Tips

  • Put the marker on faces, product labels, or logos — not empty sky or margins.
  • Preview the page on a narrow phone width and a wide desktop to confirm the crop still looks right.
  • Burned-in text in the photo file is still a bad idea; focal points help subjects, not headlines in the JPG — see Formatting images.