Storyblok
Search Storyblok's Documentation
  1. Focal Point

Focal Point

Define a focal point that should remain centered when resizing the image by appending filters:focal(X1xY1:X2xY2). Think of the focal point as a small rectangular area that is defined by the respective coordinates.

Usually, content editors would define a focal point in the CMS. If a focus point has been set, the coordinates will be included in the focus property of the asset field and can be used as a value for the focal point filter.

Try setting a focal point in the interactive demo below. See it being kept visible as you progress to resize the image.

Preview that reacts to API
demo-sunflower.png
Copied to the clipboard
Focal Point

Once enabled, click on the button to show the image in the original aspect ratio. Proceed by clicking on the image to set the desired focal point.