How to use the focus point set in Storyblok

In Storyblok, the focal point set feature allows you to specify the part of an image that should be focused on when the image is displayed.

This feature is particularly useful when the image needs to be cropped or resized to fit a specific layout or container with a different aspect ratio.

To utilize the focal point set feature in Storyblok, follow these steps:

In the steps below, you can utilize the focal point set of an image in Storyblok:

• Either select a new asset or click to edit an already selected asset {1}.

• Click on the exact part of the image you want to set as the focal point. A blue circle {1} will appear to indicate the selected focal point and Save {2}.

1

2

To implement the focal point on the frontend, you can use the Storyblok image service to resize images according to your needs. Additionally, the focus point information obtained from the API can be leveraged to ensure that the focus point remains visible within the resized image.

Combining the image service resizing capabilities with the focus point information retrieved from the API allows you to effectively resize and display the image while keeping the focus point visible within your Storyblok-powered application or website.

Here’s a JavaScript example showing how to add a focus point to a resized image.

function optimizeImage(image) {
  if (!image.filename) return null;

  // Resize the image to 1200px width and maintain the original aspect ratio.
  let imageSource = image.filename + `/m/1200x0`;
 
  if (image.focus) imageSource += `/filters:focal(${image.focus})`
// if image.focus exist then append the focus point filters to the image

  return imageSource
}

Here, we fetch an image with data from Storyblok. We set it with an initial width of 1200px by 0 (height of 0 keeps the image's original aspect ratio).

You can leverage the focal point set feature in Storyblok, and utilizing the focal point coordinates provided in the API response, you can dynamically adjust and present the image on the frontend, ensuring that the important part of the image remains visible. You can learn more about the custom focal point on Storyblok.