Using the Focal Point Module for Images in Drupal 8

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.

Add Crop effect


Point of attention not in the center

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

Cropped image

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

Enable Crop API module

Step #2. Configure the Image Style

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

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

Create new style

  • Select the Focal Point Crop effect
  • Click Add

Select the Focal Point Crop Effect

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

Set dimensions

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

Choose Square (300x300) style

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

Create article

Not the result you expected?

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

Improved image

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!


  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Notify of

Newest Most Voted
Inline Feedbacks
View all comments
6 years ago

Great find! This will come in handy in a lot of scenarios!

6 years ago
Reply to  Hamza

Thank you, Hamza. Great to hear you found this post handy!

6 years ago

Great tutorial … glad you like the module 🙂

6 years ago
Reply to  bleen

Cheers, bleen.

Paul Lieberman
Paul Lieberman
6 years ago

Doesn’t seem to work with media entities

Gerry Asher
Gerry Asher
6 years ago

On this focal point module there seems to be an issue with the size of the original image grows for example: when I upload an image to the CMS area it starts out at 222kb and I check the download size in the browsers “Network” tab on Developer tools. Slightly higher or lower here for desktop. But then I simulate a mobile device such as tablet or responsive and the size via Network tab grows from the 222 to 765kb. I have tried adjusting the format/Configure Responsive Image Styles in many ways but the image seems to grow no matter what. Any insight into a possible solution would be helpful

6 years ago
Reply to  Gerry Asher

I’m not sure this has to do with focal point, but should definitely open an issue at …. I have some ideas on how you can troubleshoot

5 years ago

Thanks Jorge Montoya.

That’s very good tutorial, I setup in my site that works awsome.

Thanks again. 

3 years ago

Great, is there a way to set a default focal point for the image style?

Would love your thoughts, please comment.x