The Best Way to Scale and Crop Your Images in Drupal

Crop and Size in Drupal

Wouldn’t it be great to know the best way to scale and crop your images in Drupal? What if you could tell Drupal exactly where you want to scale and crop an image? There is a module for that! It is called Focal Point. This module allows you to pinpoint the area your scale and crop is going to zoom in on when you apply that image style. Let’s dive into the best way to scale and crop your images in Drupal!


The Best Way to Scale and Crop Your Images in Drupal

You can find Focal Point project page at https://drupal.org/project/focal_point:

The Best Way to Scale and Crop Your Images in Drupal

Focal Point allows you to set the crosshair where the focal point will be. This keeps the focus on portion of the image that is most important and prevents cropping important parts of the image out.

Focal Point for Drupal 8 requires the Crop API. Your best way to install this is via composer but it can also be installed manually. Install both Crop API and Focal Point on your site, there is no configuration.

The Best Way to Scale and Crop Your Images in Drupal

You will also need Media and Media Library installed, as well. You can find these by using the search bar indicated with the blue arrow below.

Next, select Structure from the menu along the top, then select Media types, Image, and finally select Manage form display.

You will now see a new widget here called Focal Point. You will need to click Image and switch to Image (Focal Point) to make this work.

You can then click the Save button at the bottom left corner of the page.

*Blue Save button at bottom of screen.

Focal Point is particularly helpful when you have an image with a face in it. For example, the Mona Lisa. Let’s take a closer look at this example.

To add your image:

  1. select Content
  2. select Add Content
  3. select Article

The Media Image field is already added to the article. Select Add media button from Media Image section.

  1. select the photo you would like
  2. select the Insert selected button
  3. click Save

This image was set this up with a display mode of 100 by 100 scale and crop. It centers the image by default, but you can change that. Notice that the top of her head has been cropped. We will now go change those settings.

  1. select Content
  2. select Media

Next, you will select Edit next to the Mona Lisa.

You will then move the crosshair up to her face and select Save.

Now, back at the site, you can see that the image is perfectly scaled and cropped at 100 pixels by 100 pixels, and the scale and crop is centered on her face!

Conclusion

We hope that an overview of the Focal Point module has given you a better idea on the best way to scale and crop your images in Drupal. This will allow you to easily and quickly pinpoint the area your scale and crop is going to zoom in on and will then perfectly cropped your image quickly! This is certainly the best way to scale and crop your images in Drupal!


For a more in depth and personal look at the best way to scale and crop your images in Drupal, check out the video below:

Author

  • Rod Martin

    Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio. He has worked in both the non-profit and for-profit worlds, in small companies and large corporations. His extensive open source experience includes WordPress, Joomla and Drupal and he really knows how to help you get the most out of the system you chose. Rod plays ice hockey a couple of times a week and rides his Goldwing motorcycle pretty much everywhere he can.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x