Image Crops

Image crops allow you to create versions of an existing image. These versions can help optimize the content viewing experience and improve performance. Image crops makes it easy to maintain variation of the same image. Rather than relying on a third party tool to crop and resize images, image crops allows you to do it right within Content Manager. Crops are also managed within the same editor as the source image and inherit the same properties such as sites, alt and tags.

Image crop sizes can be created and configured to constrain crops to specific crop dimensions. See: Create an Image Crop Size

Structured content can be configured to only allow specific crop sizes to be used. See: Restrict crop size for structured content


Create an Image Crop

  1. On the left side bar, go to Images to open the image manager
  2. Find and click on any image to create a crop for to open the Image Editor
  3. In the Image Editor click on "Crops" to open the Crop Editor
  4. image crops tab
  5. Inside the Crop Editor, you will see all available crop sizes. Only crop sizes with dimensions (both width and height) smaller than the source image are actionable. Click on a crop size to open the Crop Editor.
  6. You can click and drag the crop to move the crop. You can also resize the crop to zoom in/out of the source image. The crop can be replaced.


  • Crop size dimensions must be smaller than the source image
  • Deleting the source image will also delete the image crops.
  • Image crops cannot be deleted (until further notice). You can replace the crop or leave the crop as is.


How to use an Image Crop

  • Image crops can be used anywhere an image can be used. Insert an image like you normally would and click on the image crop icon beside the image to open the crop selector dialog:
  • Image crop iconcrop selector





Create an Image Crop Size

  1. On the left side bar, go to System > Image Crop Sizes to open the crop size manager
  2. On the top right, click the "+ Add Crop Size" button.
  3. Input your crop size name and expected dimensions:

add image crop size dialog

  • Only admins can create and maintain image crop sizes. Currently, image crop sizes cannot be deleted.
  • Crop size dimensions must be larger than the source image


Restrict Crop Size for Structured Content


To restrict structured content to only allow particular crop sizes to be used, add the allowedCropSizes property to the rich-text component in Form Structure fields. 

"options": {
    "allowedCropSizes": ["thumbnail", "banner"]
}

For example:

[
    {
        "name": "mainContent",
        "title": "Main Content",
        "description": "",
        "components": [
            {
                "name": "lexical",
                "type": "rich-text",
                "label": "Content",
                "key": true,
                "required": false,
                "validate": "",
                "maximumLength": "",
                "options": {
                    "allowedCropSizes": ["thumbnail", "banner"]
                }
            }
        ]
    }
]