Focal Point

ABOUT

Focal Point allows you to specify the portion of an image that is most important. This information can be used when the image is cropped or cropped and scaled so that you don't, for example, end up with an image that cuts off the subject's head.

DEPENDENCIES

Drupal 8

Crop API

Image (from Core)

Drupal 7

Entity

Image (from Core)

USAGE

Thanks to the folks at NonProfit and their "Drupal Modules: The One Percent" series there is a video that walks you through setting up focal point.

Setting up image fields

Install the module as usual. Once enabled all standard image fields will allow users to set a focal point by default. The D7 version also supports media image fields if you are using the Media module ( >= 7.x-2.x).

The Drupal 8 version of Focal Point has a dedicated form widget that must be selected on the form view page in order for content creators to set the focal point for a particular image.

Setting the focal point for an image

To set the focal point on an image, go to the content edit form (ex. the node edit form) and upload an image. You will notice a crosshair in the middle of the newly uploaded image. Drag this crosshair to the most important part of your image. Alternatively you can click on the important part of your image if dragging seems too daunting.

As a bonus, you can double-click the crosshair to see the exact coordinates (in percentages) of the focal point.

Cropping your image

The focal point module comes with two image effects:

• focal point crop
• focal point crop and scale

Both effects will make sure that the define focal point is as close to the center of your image as possible. It guarantees the focal point will be not be cropped out of your image and that the image size will be the specified size.