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.



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, "bb_data_planets__SINGLE::image"
containerID
A unique ID field for the record, associated with the container image
Eg, "bb_data_planets__SINGLE::id"
containerTarget
A field that will receive the Base64 for the cropped image when the changes are saved
Eg, "bb_data_planets__SINGLE::image_cropped_b64"
The following optional parameters are also available:
Parameter
Description
settings_viewport_width
The width of the viewport for the image
Eg, "200"
settings_viewport_height
The height of the viewport for the image
Eg, "200"
settings_viewport_type
The shape of the viewport for the image
Eg, "circle"
settings_boundary_width
The width of the boundary for the cropping area
Eg, "300"
settings_boundary_height
The height of the viewport for the cropping area
Eg, "300"
settings_showzoomer
Whether or not the zoom control will show
Eg, "true"
settings_enableresizer
Whether or not the image can be resized
Eg, "false"
settings_mousewheelzoom
Whether or not the mouse wheel can be used to zoom the image
Eg, "true"
settings_enableexif
Whether or not to apply exif orientation settings for image
Eg, "false"
View the Croppie documentation for more details, and additional settings:

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.