Image fields allow the user to import an image from his computer to the card. An Open file window is opened, and the user can select his image file. An [:user:Image Editor]] is then opened, and the user can choose to /crop/ the image (making it to the right ratio). The image is then stored inside the page to be displayed on the card.
"fields": [ { "name": "portray", "label": "Portray", "type": "image", "ratio": 16 / 9 }, { "name": "portray2", "label": "Portray", "type": "image", "width": 16, "height": 9 }, ]
To set a field to the Image type, set the type
property to image
. No default value is required.
The ratio
property is an optional value, with a default value of 1. It accepts a numeric value representing the ratio of the image width by the height. The best way to get a correct value is to set the value to the width / height of the image canvas field related to this editable field. A 1 will result in a square cropping area.
The width
and height
properties act the same as the ratio
one. They can be used instead of the ratio
property to set a ratio with the same width and height than the image.
An image field stores the image as a Data-Url. Inside the canvas, when a property requires an url to an image, you can then instead set it to the variable $portray
. See also the DataUrl Variables.