User Tools
en:template:image_input
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:template:image_input [2016/08/11 10:28] Nicolas Ronvel created |
en:template:image_input [2017/07/24 12:44] Nicolas Ronvel [Image fields] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Image fields ====== | ====== 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. The image is then stored inside the page to be displayed on the card. | + | **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. |
| <code> | <code> | ||
| "fields": [ | "fields": [ | ||
| - | { "name": "portray", "label": "Portray", "type": "image"}, | + | { "name": "portray", "label": "Portray", "type": "image", "ratio": 16 / 9 }, |
| + | { "name": "portray2", "label": "Portray", "type": "image", "width": 16, "height": 9 }, | ||
| ] | ] | ||
| </code> | </code> | ||
| To set a field to the **Image** type, set the ''type'' property to ''image''. No default value is required. | 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 ===== | ===== Using the variable ===== | ||
| An image field stores the image as a [[https://en.wikipedia.org/wiki/Data_URI_scheme|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]]. | An image field stores the image as a [[https://en.wikipedia.org/wiki/Data_URI_scheme|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
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
