Image Focal Point

The Image Focal Point app allows you to associate images with focal point data for better cropping amongst different devices and screen sizes.

Set focal point modal

Under the hood

Internally the app will:

Create a new content type with three fields: a title, an image and a focal point field.
Configure the appearance and functionality of the entry editor for this content type.

Fill in the Content type name field (or use the default value Image with Focal Point) and click on Install.

Install Image Focal Point app

This will create a new content type for you with three fields:

To create your first image with focal point data:

Navigate to the Content page.
Create a new entry of type Image with Focal Point (or the name you chose during the installation).
Fill in the title, image and focal point data.
Click on Publish in the sidebar to publish the new image with focal point entry.

To make use of the newly created image with focal point entry:

Go to the Content model page.
Edit the content type that needs to reference the image with focal point.
Create a new field of type Reference and open its configuration.
Set a validation option to accept entries of type Image with Focal Point.
Optionally, set the widget of the new reference field to Entry Card to have a preview of the image with focal point it links to.
Go back to the Content page.
Create/edit an entry of the content type referencing the image with focal point.
Set the reference field you added to point to the image with focal point entry.

To crop the image based on the coordinates you defined, you can use one of the following approaches:

Fetch the entire image and crop it in the frontend based on the coordinates.
Use a third party such as Cloudinary which allows for cropping images based on coordinates.
Implement a Lambda function to do the cropping.