Skip to main content

ImageContain layer

Difference with an Image layer#

The ImageContain layer represents a zone on the template that will display an image by scaling it as large as possible within its container without cropping or stretching it. The image will be centered in the zone.

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#

club1:
type: imageContain
label:
en: Home club logo
fr: Logo club domicile
panelGroup:
en: Section
fr: Section
asset: assets/images/brive.svg
assetType: image/svg+xml
dimensions: [0, 100]
position: [0, 0]
positionFrom: ["left", "top"]
padding: 0 21.095% 0 0
hideFromPanel: false
hideFromLayers: false
PropertyRequiredUsage
club1yesAn unique identifier defining the layer
typeyesThe layer type (should be imageContain)
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)