Smart Cropping of Media with Image Widget Crop Drupal Module

Sometimes, in your Drupal site, you may need to crop images with a predefined aspect ratio but with different size values within a certain range. This is where the Image Widget Crop module is your tool for the job.

It can be used in a great variety of Drupal sites. From image galleries to educational sites with illustrations.

In this tutorial, you’ll be using the contrib Image Widget Crop module in conjunction with the new media features for images available in Drupal core.  

Step #1. Create and Configure the Media Entity

To make the most of the Drupal core media features:

• Install the Media Entity Image module
• Go to Structure > Media bundles
• Click Add media bundle

• Give your Media bundle a title and a description
• Choose Image in the Type provider dropdown
• Uncheck the Published checkbox
• Click Save media bundle

Next, you will add an image field to the Media bundle you’ve just created.

• On the dropdown on the right click Manage fields
• Click Add field 

• Choose the Image field type
• Give it a label
• Click Save and continue

• Leave the defaults and click Save field settings
• Click Save settings once again 

You have created a Media bundle with an image field attached to it. Now you have to reference this Media bundle within a Content type through a Reference field. Let’s do just that! 

Step #2. Reference the Media Bundle within the Article Content Type

• Click Structure > Content types > Article > Manage fields
• Delete the default image field of the Article Content type 

Notice: I’m working in a sandbox installation with dummy content. Please, don’t delete anything if you have actual content in your Article Content type.

• Click Add field
• Give your new field a proper name
• Choose Other in the Reference subsection
• Click Save and Continue

• In the Type of item to reference choose Media
• Click Save field settings

• Select the Media bundle you created in Step #1 
• Click Save settings

Good job! You have referenced the Media bundle you created in Step #1.

Step #3. The Image Widget Crop Module

Next, you will add images to your Media bundle and enable the crop functionality of the Image Widget Crop module.

• Download and enable the Image Widget Crop module
• Go to Configuration > Media > Crop types in to create the Crop type you’re going to use
• Click Add crop type

• Give your Crop type a proper name. For example, Image_Widget_Crop
• The Aspect Ratio refers to the relation between the width and the height of the image. I’m going to choose 16:9 for this exampĺe. It is common for wide screens. Other common aspect ratios are 1:1 (square) or 4:3 (like old TVs)

• The SOFT LIMIT dictates the size at which a warning will be displayed if I carry on reducing the size of the image 
• The HARD LIMIT dictates the smallest size an image will be cropped to
• I’m choosing 640x360 for the SOFT LIMIT and 400x225 for the HARD LIMIT in this example
• Click Save crop type

• Click Configuration > Media > Image styles
• Edit the Crop thumbnail style
• Delete the default Scale effect
• Select Manual crop
• Click Add

• For the Crop type choose Image_Widget_Crop (or whatever you called your crop type)
• Click Add effect 

Step #4. Add a Crop Type to your Media Bundle

• Go to Structure > Media bundles > Images to crop > Manage form display
• On the widget column of your image asset select Image_Widget_Crop
• Click the cogwheel on the right
• For the Preview image style select Crop thumbnail
• Select your Crop type
• Click Update
• Click Save

• Click Manage display
• Disable the Thumbnail
• Hide the Media asset label
• Click on the cogwheel on the right and select the proper image style
• Click Update
• Click Save 

Step #5. Create your Media Asset

• Click Content > Media > Add a new media
• Select an image from your computer, preferably a big one
• Click on the down arrow to open your cropping widget
• Resize the cropping area, and play with it a little bit
• Notice that you get the SOFT LIMIT warning and it doesn’t go away. Even when you’ve reached the HARD LIMIT.

•  Click Save once you’re satisfied with your cropping selection
  

Step #6. Create your Content

• Go to Content > Create Content > Article
• Give it a body
• Reference the media asset you’ve just created 
• Click Save.

You’ll see your article with the cropped media asset 

Congratulations! You just learned how to use the Image Widget Crop Drupal contrib module. Along the way, you have also taken a quick look at Drupal 8 core media capabilities.

Please leave us your comments and questions below. Thanks for reading!

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.