The Best Way to Scale and Crop Your Images 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:
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.
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.
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:
- select Content
- select Add Content
- select Article
The Media Image field is already added to the article. Select Add media button from Media Image section.
- select the photo you would like
- select the Insert selected button
- 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.
- select Content
- 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: