Using the Focal Point Module for Images in Drupal 8

You most likely created image styles with Drupal’s “Scale and crop” image effect. This style allows you to display large images on a smaller scale and save precious screen space.

There is one issue with such styling though. Often the most interesting point of the image gets chopped off. The “Focal Point” contrib module helps avoid this issue.

In this tutorial, you will learn to use this module to select the most important portion of the image you would like to show to your readers.

There is always a limited amount of space on a screen. So when you insert an image in your posts, you have sometimes either to crop it or to scale and crop it. By default, Drupal provides image styles, which you can create and configure.

This is a good solution, but sometimes it’s kind of rigid. You only have the focal point, the part of an image that will be retained during the crop, for all images with that style. Sometimes the most interesting part, the part you want your readers to see, is not in the center.

Example:

If we crop this image with the anchor in the center of it we will have this result:

We should set the anchor point to the right of the image style. But, what if we want to draw the attention of the reader to the left of the image in the next post? That would certainly complicate everything.

For these cases, you have the contributed module Focal Point available. Focal Point allows you to choose the most important portion of the image to show to your readers. In this tutorial, you will learn how to do that.

Let’s start!

Step #1. Install and enable the module

• Before installing the Focal Point module, install first the Crop API module. This is a required dependency.

Step #2. Configure the Image Style

• Click Configuration > Media > Image Styles
  Click Add image style

• Give your image style a proper name. In this case, I’m going to call it Square (300×300). It’s a good practice to include the dimensions of your image style in the name so that you have a better orientation when selecting image styles for your displays (for example in Views)
• Click Create new style

• Select the Focal Point Crop effect
• Click Add

• Now set the dimensions for the cropped image, in this case, 300x300px
• Click Add effect

The new image style has been created. Let’s test it!

Step #3. Set the image style as the default display

We’re going to apply this image style to the Article content type

• Click Structure > Content Types > Article > Manage display
• Click on the cogwheel on the right of the Image field
• Choose the newly created style Square (300×300)
• Click Update
• Click Save

Step #4 Create an Article

• Click Content > Add content > Article
• Upload an image
• After uploading you will see a little cross on the preview thumbnail
• Drag this cross and place it wherever you want to set the focal point of the image
• Save the article and view the result

• Don’t like the result? No problem! Edit the article and drag the cross until you get the expected image in your article.

This handy module gives the site editors a great flexibility! I hope you enjoyed reading about the Focal Point contrib module.

Leave your comments below. Thanks!