Setting up Drupal 8 Image Widget Crop — step by step

Automatic Ribbon Cutting Scissors by jayahimsa from https://www.flickr.com/photos/49822796@N00/4928869326

No long introduction, no long explanation just the steps in a short list as a reminder (and maybe as a little help for others).

  1. Install and enable Crop and Image Widget Crop Drupal modules.
  2. Create a new crop type (/admin/config/media/crop) based on the image style you want to add the crop to.
  3. Add a manual crop effect to your image style (/admin/config/media/image-styles/manage). Select the crop type you’ve just created and after adding it set the manual crop as the first effect applied to the image!
  4. Add the crop type you’ve just created to the list of the available crop types by selecting it in the General Configuration section of Image Widget Crop (/admin/config/media/crop-widget).
  5. Set the form display(!) of the entity type (e.g. an image media entity bundle or a contetnt type with a classic image field) in which you want to use the crop function. Set the widget of the image filed to Image Widget Crop and than configure it to your needs but don’t forget to make available the crop type you created here too by selecting it.
  6. Repeat it for every crop type.

Happy cropping!

Like what you read? Give Tamás Hajas a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.