User Tools

Site Tools

Translations of this page?:

en:template:image_input

Image fields

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.

Using the variable

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.

en/template/image_input.txt · Last modified: 2017/07/24 12:44 by Nicolas Ronvel