Editing and Cropping Images

Image fields in the CollectContent editor help you add visuals quickly while keeping every image consistent. Upload your photo, crop it to the frame, and publish with confidence that it fits the space cleanly without stretching.

Adding an image

Adding an image is easy. The template author can choose a number of options for each image field, including:

• The file formats accepted (i.e. PNG, JPG, etc);
• The minimum dimensions the image you upload can be (i.e. at least 600x400 pixels); and
• What size the image should be cropped and resized to.

You can upload an image by:

1. Open your content item.
2. Find the image field you want to upload an image to.
3. Within the field, take note of any specific file formats or minimum image sizes. The maximum file size for images is 10 MB.
4. Click the "Choose Image" button to browse your computer for an image, or drag and drop an image directly onto it.
5. Your image will be uploaded, and you will be shown a preview of your uploaded image.

If the image you try to upload does not meet the requirements set by the template author, you will be presented with an error message explaining why the image you have chosen was unsuitable.

Cropping and editing an image

Once an image is placed in a field, it will be automatically cropped and resized based on the image field settings.

You can change the default crop and edit the image by:

1. Click the Edit button beneath the image preview to open the image editor.
2. Adjust the crop area by dragging the corner handles to resize the crop frame, or drag inside the frame to reposition it.
3. Add some alternative text to describe the image. Screen reader users rely on alternative text to understand the content and purpose of images.
4. Apply the crop by clicking "Save Image". The original upload is kept, so you can always reopen the crop panel and adjust it again later.

Downloading an image

Once an image is placed in a field, you can download either the original image, or the cropped image.

You can download an image by:

1. Click the Download button beneath the image preview.
2. Select either Original Image or Cropped Image to start a download.

Removing an image

Once an image is placed in a field, you can remove an image by:

1. Click the Remove button beneath the image preview.
2. Confirm you wish to remove the image in the dialogue by pressing "Remove".