August 7th, 2019
This article is the eighth in a series of topics regarding Drupal modules. Throughout this series, Sectorlink will discuss some of the best modules offered for Drupal.
Crop API module is a basic API for image cropping. Users will need to pick one of the UI modules that utilize Crop API. There are currently two UI modules that use Crop API, Image Widget Crop and Focal Point.
Image Widget Crop (IWC)
IWC provides an interface for using the features of the Crop API. This element provides an UX for using a crop on all fields images or file elements. Utilizing this module allows you to crop the same image by “Crop type” configured. This is very useful for editorial sites or media management sites. Here is a demo video.
Focal Point (FP)
FP 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. A video is available that will walk you through setup. Note: this video was created before there was a dedicated field widget for focal point. Make sure you choose the "Image (Focal Point)" in the form display for your entity.
Install the module as usual. Once enabled you will have a new image field widget called "Image (Focal Point)". Using this widget will allow your content editors to set the focal point at the desired position on the image.
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).
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 cross-hair in the middle of the newly uploaded image. Drag this cross-hair 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 cross-hair 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 ensure that the user-defined focal point is as close to the center of your cropped 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.
Using Crop API along with Image Widget Crop and/or Focal Point are great tools for image cropping. If you require tools for image editing, you should consider using Crop API (w/ Image Widget Crop and/or Focal Point) for your Drupal site.