ImageCropper
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 |
Example:
