Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Using the Focal Point Module for Images in Drupal 8

Parent Feed: 
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

Example:

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

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 (300x300). 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 (300x300)
  • 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!


About the author

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.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web