06. Croppie
06. Croppie
The Croppie BlackBox is used to crop and manipulate an image stored in a container field. It utilises the Croppie library. The manipulated image will be exported to a seperate container field.
https://foliotek.github.io/Croppie/
The following interactions are included:
Bring in an image from a container field
Save Base64 for cropped image to another field
Parameters
The parameters are as follows:
Croppie ( containerOriginal ; containerID ; containerTarget { ; settings_viewport_width ; settings_viewport_height ; settings_viewport_type ; settings_boundary_width ; settings_boundary_height ; settings_showzoomer ; settings_enableresizer ; settings_mousewheelzoom ; settings_enableexif } )
Parameter | Description |
containerOriginal | A field that contains a container image Eg, |
containerID | A unique ID field for the record, associated with the container image Eg, |
containerTarget | A field that will receive the Base64 for the cropped image when the changes are saved Eg, |
The following optional parameters are also available:
Parameter | Description |
settings_viewport_width | The width of the viewport for the image Eg, |
settings_viewport_height | The height of the viewport for the image Eg, |
settings_viewport_type | The shape of the viewport for the image Eg, |
settings_boundary_width | The width of the boundary for the cropping area Eg, |
settings_boundary_height | The height of the viewport for the cropping area Eg, |
settings_showzoomer | Whether or not the zoom control will show Eg, |
settings_enableresizer | Whether or not the image can be resized Eg, |
settings_mousewheelzoom | Whether or not the mouse wheel can be used to zoom the image Eg, |
settings_enableexif | Whether or not to apply exif orientation settings for image Eg, |
View the Croppie documentation for more details, and additional settings:
https://foliotek.github.io/Croppie/
Example
Croppie (
"bb_data_planets__SINGLE::image" ;
"bb_data_planets__SINGLE::id" ;
"bb_data_planets__SINGLE::image_cropped_b64" ;
)In terms of writing the cropped image back, the containerTarget parameter should be a text field, which you can then use to decode the Base64 from that field into a container image.
The best way to do this is to have a container field, with the following auto-enter set:
Relationship
This BlackBox is designed for a single record, rather than a found set. So your table occurrence should have a relationship from the current context that matches to only one record.
Reactor knows nothing about your current found set.
If your current context is the record containing the image you wish to crop, create a self-relationship, and use that as the BlackBox parameter(s):
Style Customisations
You can add additional settings, or customise the CSS of the ‘Save’ button by using Reactor Core to edit the following HTML document:
You will need to recompile the BlackBox to apply any changes you make.