Crop and image presets

Different online frontends and devices often require a different view of your (cover) photos. If things go really badly, you just see the top of the beautiful photo and you miss what exactly the photo is about. The Prepr cropper allows you to crop your image in a custom way. Crop photos to be ready for mobile, desktop, app, and more.

Manage presets

Before you want to use the crop function, you need to set image presets in the model once. To do this, go to Settings > Publish > Models and select the model.
Select the asset field, scroll to ' Settings', select ' Photo' and enable ' Image presets'. The preset options become visible so you can set them. Name your preset and set the width and height in pixels. Typical presets are crops for mobile view and for desktop view. It is therefore possible to add multiple presets to the same asset field. There is no limit on this, so you can add all the presents you need.
Select ' Changing preset is required' if you want to enforce editors to add a crop to the photo. After saving the field, you can apply crops to photos in the content item. If you add multiple photos to the same field in the content item, you must make a crop on all photos.
Note: You can also set image presets in an asset field in an element and in a drag-and-drop element 'asset'.

Crop images from upload

When you upload one or more photos to a content item, the option ' Crop x items' is visible if you have added image presets to this field in your content item
  • If you do not require a crop, a crop is optional. Click 'Crop x items' to crop the image(s), or click 'Add x items' to skip the crop and add the photo to your content item.
  • If a crop is mandatory, the button 'Add items' is only visible after you have added crops. You need to click on 'Crop x items' to crop the image(s).

To add a crop, follow the steps below:
1
Select the area in your crop. To do this, drag the points to the correct position, or move the entire crop area.
2
Save a crop by clicking the checkmark.
3
Go through both steps for each preset you have set.
4
At last, click on 'Add items' to apply the added crops to the photo.

Crop existing images

If you want to crop an existing photo for your content item, click on the asset field in your content item to open the media browser. Select one or more existing photos and select ' Crop items'. You will now enter the crop screen, where you can add a crop for all presets. Click 'Add items' to apply the crop to the photo or photos.
Have you not applied a crop to a photo in your content item yet, but still want to add it afterward? This is also easily possible in Prepr. Go to the specific photo in your content item, move your mouse over the photo and click on ' Crop photo' under the three dots that appear. You will now enter the crop screen, where you can still add a crop for all presets. Click 'Save' to apply the crop to the photo in your content item.

Update image crop

The crop icon on a photo indicates that you already added a crop to this photo. If you want to change the existing crop, just click ' Crop photo' again and update the existing crop.