Smartsite 7 - ...

The image cropper control allows a user to crop an image selected in a different control to an optional given aspect ratio, minimum and maximum size. The control within the form shows a preview of the cropped image. The actual cropping is done in a sub-action when the user clicks the Crop image button.

The following properties are supported by the image cropper

Name Example Description
cust:cropping_sourceField banner The name of the field holding the image to be cropped. Without this property, no image cropper will be rendered.
cust:cropping_aspectRatio 16:9 (Optional) The desired aspect ratio of the cropped image, written as width:height. If no aspect ratio is configured, the user is free to crop any aspect ratio.
cust:cropping_minSize 160x90 (Optional) The minimum size of the cropped image
cust:cropping_maxSize 1600x900 (Optional) The maximum size of the cropped image
cust:cropping_bgColor black (Optional, default is black) Color of the overlay used in the cropper sub action.
cust:cropping_bgOpacity 0.4 (Optional, default is 0.4) Transparency of the overlay
cust:cropping_boxWidth 640 (Optional, default is 640) Maximum width of the cropper preview within the form
cust:cropping_boxHeight 320 (Optional, default is 320) Maximum height of the cropper preview

The image cropper was originally designed in the legacy manager, using a javascript include "smartsite.cms.jCrop.js" in the MgrScripts directory. This implementation also requires the following properties

Name Value Description
ctrl:className imagecropper The classname is used to bind the cropping behaviour
ctrl:onChange intializeCroppingControls(this); Set on the source field of the cropper. Re-initializes the cropper when a different image is selected
cust:cropping_Fields [imageCroperField] Set on the source field of the cropper. Semicolon-separated list of cropper fields associated with the image control