ImageWidgetCrop module

ImageWidgetCrop provides an interface for using the features of the Crop API. This widget provide an UX for use a crop on all fields images. This module have particularity to purpose capability to crop the same image by 'Crop type' configured. It's very usefull for editorial sites or media management sites.

Try me

You can Test ImageWidgetCrop in action directly with the sub-module, "ImageWidgetCrop example" to test different usecases of this module.


  1. Crop API


  1. Download Crop API from
  2. Download ImageWidgetCrop from GitHub.
  3. Install both Crop API and ImageWidgetCrop in the usual way.


  1. Create a Crop Type
    • On admin/structure choose Crop types Step 1
    • Click on + Add crop type Step 2
    • Add Name, Description and Aspect Ratio for your crop type and click Save crop type Step 3
  2. Create an Image Style
    • On admin/structure/config choose Image styles Step 4
    • Click on + Add image style Step 5
    • Add Image style name and click Create new style Step 6
    • Choose Manual crop effect and click Add Step 7
    • Choose your Crop Type, to apply your crop selection, and click Add effect Step 8
  3. Create an Image field
    • On desired content type (i.e. Basic page), on admin/structure/types, click on Manage fields Step 9
    • Click on + Add field Step 10
    • Choose Image, add label and click Save and continue Step 11
  4. In form display of your page, on admin/structure/types/manage/page/form-display, set the widget for your field to ImageWidgetCrop Step 12 and select your crop types in the Crop settings list and click Update and then Save. You can configure the widget to create different crops on each crop types. For example, if you have an editorial site, you need to display an image on different places. With this option, you can set an optimal crop zone for each of the image styles applied to the image. Step 13
  5. On Manage display of your page, on admin/structure/types/manage/page/display, set the display formatter Image Step 14 and choose your image style and click Update and then Save Step 15
  6. Add an image with your widget to your content and crop your picture, by crop types used for this image Step 16 Step 17

ImageWidgetCrop Code Quality

results matching ""

    No results matching ""