Skip to main content

Image layer

Supported formats#

FormatExtensionMime type
JPEG.jpg, .jpegimage/jpeg
PNG.pngimage/png
Gif.gifimage/gif
WebP.webpimage/webp
SVG.svgimage/svg+xml
BMP.bmpimage/bmp

Layer definition#

player:
type: image
label:
en: Player
fr: Joueur
panelGroup:
en: Section
fr: Section
asset: assets/images/player.png
assetType: image/png
dimensions: [29, AUTO]
position: [50, 18.236]
positionCentered: [TRUE, FALSE]
positionFrom: ["left", "top"]
hideFromPanel: false
hideFromLayers: false
PropertyRequiredUsage
playeryesAn unique identifier defining the layer
typeyesThe layer type (should be image)
labelyesA translatable property defining the layer name
panelGroupyesA translatable property defining the form controls group in the panel
assetyesThe path to the image file
assetTypeyesThe mime type of the image (see supported formats)
dimensionsyesAn array defining the dimensions of the image, as a percentage (the format is [width, height], can be AUTO to define only the width or the height and scale)
positionyesAn array defining the x/y position of the image, as a percentage (the format is [width, height])
positionCentered-An array of booleans (TRUE or FALSE, default FALSE) defining if the position of the layer should be calculated from the top/left corner or from the horizontal center/vertical center (the format is [horizontal, vertical]). This allows to center a layer independently of its dimensions
positionFrom-An array of booleans defining if the position or the layer should be calculated from the default left (horizontal axis) and top (vertical axis) or if it should be different (the format is [horizontal, vertical], can be left|right and top|bottom)
display-Specifies how the layer should be displayed (can be none, inline, block, inline-block)
margin-Specifies the margin outside of the layer, needs to be defined in %, vw or vh (follows the CSS specification)
padding-Specifies the padding inside of the layer, needs to be defined in %, vw or vh (follows the CSS specification)
hideFromPanel-Allows to hide the controls of the layer in the panel (default is false). Useful if the layer should be controller through properties
hideFromLayers-Allows to hide the the layer in the layers list (default is false). Useful if the layer should not be managed by the user
offsetSelector-In some situations, it is required to calculate the coordinates/dimensions of a layer regarding it offset for the selector (default is false)