Drupal Focal Point Module: Making the most of your images
Focal point is a Drupal module that allows site administrators to select an important portion of an image to focus on.
It’s similar in many ways to the Image field focus module. But rather than giving a square box with crosshairs for focusing and another for cropping (which you can only do inside the focus area and can be quite confusing), focal point allows you to select a single point on the image to focus on. It is also fully compatible with the Media module.
User experience
Let's take a look at focal point from an administrator's perspective. The user can click on the image at any point which adds an icon over that particular area, representing the chosen focal point (see below).
From this, the administrator can then select the “Image preview” link below the image which will display a page with both the original image and how the image will look with the different image styles.
As you can see below, the image has now been focused upon the parrot on the right.
Setup and configuration
Firstly, you need to download and enable the focal point module (https://www.drupal.org/project/focal_point).
Upon enabling the module you will find a new image style called “Focal Point Preview”. This is used for the admin page and is the default preview style for setting the focal point. It rescales the image width to 250px with upscaling allowed.
You will also have two new image effects available for cropping “Focal Point Crop” and “Focal Point Scale And Crop” within the drupal image styles at admin/config/media/image-styles.
These both crop down to the point to which the user has selected on the image, and ensure that the chosen focal point will not be cropped out of the image.
Now you can create a new image style with one of these image effects, and then apply this image style to an image field within the manage display page of your content type. The images will then crop to the selection the user has chosen.
Media
To enable the compatibility with the media module, you should ensure that the “Media module image fields” setting at admin/config/media/focal_point is enabled.
Then, after adding an image via a field using the media browser widget, another step is provided in the media browser overlay. You can now add a focal point as you would in a standard image field.
You can also edit previously uploaded images to set an individual focal point.
