Using Focal Points to Frame Your Images

The problem

You upload a beautiful landscape image of a character standing on the left side of the frame. It looks perfect in the editor. But when it shows up as a story card (cropped to portrait 3:4) or a mobile reader panel, the character is gone — all you see is sky and mountains.

That's because every render surface on FableHatch crops your image to a different aspect ratio using object-cover. By default, the crop is centered. If your subject isn't in the center, it gets cut off.

The fix: focal points

A focal point is a single coordinate on your image — an X/Y percentage — that tells every render surface "keep THIS point visible." No matter how the image gets cropped, the focal point stays in frame.

How to set a focal point

On story covers

1. Open the Story Settings drawer (gear icon in the editor toolbar)
2. Upload or view your cover image
3. Below the cover, a Focal Point picker appears
4. Click or drag on the image to set the crosshair where your subject is
5. Two live previews show you exactly how the frame will land at Card (3:4 portrait) and Hero (16:9 widescreen) crops
6. The focal point saves with your next autosave — no extra button

On page panel images

1. In the story editor, hover over any image panel
2. A "Drag to reposition" hint appears
3. Click and drag directly on the image to slide the visible frame
4. A crosshair shows the focal anchor while you're dragging
5. Release to commit — saved to the server in one write

On character avatars and covers

The character editor has the same focal picker under both the avatar and cover image uploaders. The avatar picker shows circle and square previews (matching how avatars actually render on the site), while the cover picker shows card band (2.75:1) and hero (16:9) previews.

When to use it

• Always set the focal point on story covers — cards are the most-cropped surface
• Set it on any page panel where the subject is off-center
• Set it on character avatars if the face/head isn't centered in the source image
• You can skip it when your subject is dead center — 50/50 (the default) is already correct

The ideal upload

JPEG, around 3000px on the longest edge, under 4MB. This passes through our pipeline pristine — no re-encoding, no quality loss. The focal point then handles the framing at every output size.