Skip to main content

Layer and Group Properties

Properties can be set in a layer group or a layer itself to define certain parameters which apply to the layers (or group).

Properties are added to the <fsi-layer> or <fsi-layer-group> tag.

Example:
<fsi-layer-group name="Shoes" height="100%" width="100%" right="centered" bottom="centered">

  <fsi-layer src="images/sneaker.jpg" name="Sneaker"
    width="20%" left="80%" top="80%"
    drawmode="difference" bottom="centered">
  </fsi-layer>

</fsi-layer-group>

Ensuring correct aspect ratio​

In order to ensure a correct aspect ratio of the layers while the screen is resized or when viewed with different devices, the root node or groups can be equipped with reference dimensions which ensure correct proportions.

It is important that both refWidth and refHeight are set and a refMode is defined.

An example how this can be used:

Example:
<fsi-layers id="sample" useDevicePixelRatio="true" width="100%" height="100%">

  <fsi-layer-group name="container"
    right="centered" bottom="centered" width="100%" height="100%"
    refMode="fit" refWidth="3840" refHeight="2400">

    <fsi-layer name="flower" src="images/samples/layers/layer1.png"
      left="0" top="0" width="100%" height="100%">
    </fsi-layer>

    <fsi-layer name="vase" src="images/samples/layers/layer2.png"
      left="1704 rpx" top="1291 rpx" width="1975 rpx" height="1109 rpx">
    </fsi-layer>

  <fsi-layer-group>

</fsi-layers>

name​

string

name for the layer or group
since 21.04

Sets the name for the layer or group. Must be unique.

src​

string

path for the image used for the layer
since 21.04

Sets the path for the image used for the layer. Can only be set in the <layer> tag, not in the <group> tag.

Use relative paths to address images on FSI Server or fully qualified URLs for static images.

effects​

string

defines if server-side effects are applied to the layer
since 21.04

Defines which server-side effects are applied to the layer. Read more about effects in the FSI Server manual.

Example: colorize(176,97,10)

cropRect​

string

defines a crop rectangle (server-side crop)
since 21.04
0,0,1,1
Default

Defines a server-side crop rectangle (left, top, right, bottom) as 0.0..1.0 floating point values to display a given section of an image only.

Default is 0,0,1,1 and selects the entire image.

width​

integer

defines the width of the image or group
since 21.04
info
Default

Defines the width of the image or group in % of the parent group or px.

height​

integer

defines the height of the image or group
since 21.04

Defines the height of the image or group in % of the parent group, px or rpx if you are using refWidth & refHeight.

contentInBackground​

boolean

defines if content is set in background
since 23.02
false
Default

Defines if content is set in background. The content is set in the given order (z-index) above or under the canvas depending on this parameter.

refMode​

string

defines the mode in which the reference layer is scaled
since 21.04
fit | fill
Values

Defines the height of the image or group in % of the parent group or px.

Fit will display the layer with the exact given width and height while retaining original proportions, which can lead to white spaces if the aspect ratio is not correctly defined.

Fill results in resizing the layer to fill the given dimension which can result in clipping the image.

Consult Ensuring correct aspect ratio for an example.

refHeight​

integer

defines the reference height of the group
since 21.04

Defines the height of the group in px as reference in order to ensure a correct aspect ratio of the layers. This reference will be used in the underlying layers and groups if you use rpx as a value for width, height, left, right, top, bottom, offset or rotate.

It is obligatory to set both refWidth & refHeight.

Consult Ensuring correct aspect ratio for an example.

refWidth​

integer

defines the reference width of the group
since 21.04

Defines the width of the group in px as reference in order to ensure a correct aspect ratio of the layers. This reference will be used in the underlying layers and groups if you use rpx as a value for width, height, left, right, top, bottom, offset or rotate.

It is obligatory to set both refWidth & refHeight.

Consult Ensuring correct aspect ratio for an example.

left, right, top, bottom​

string

defines the alignment of the image or the group in reference to the parent group
since 21.04
right: centered, bottom: centered
Default

Defines the alignment of the image or the group in reference to the parent group. It's possible to set pixel or % as well as centered (i.e. the image center is aligned) or center (i.e. if left is set to center, the left edge will be aligned to the center of the parent group, not the image center). If you e.g. set left to 10, the image will be aligned 10 pixel from the left edge of the parent group.

It is also possible to use rpx if you are using refWidth & refHeight.

offsetX, offsetY​

integer

offsets the image by the specified horizontal and/or vertical distances
since 21.04

Defines the offset of the image by the specified horizontal and/or vertical distances (in % or px).

It is also possible to use rpx if you are using refWidth & refHeight.

rotate​

integer

rotates the image
since 21.04

Rotates the image by the degrees specified. Basis for the rotation center is the top left corner (can be defined differently with rotateCenter).

It is also possible to use rpx if you are using refWidth & refHeight.

rotateCenter​

string

specifies the center of the rotation
since 21.04
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right
Values

Specifies the origin for the rotation. You can alternatively define the position by two numbers in pixel or percent of the layer dimension (y position first), e.g. 120 50%.

It is also possible to use rpx if you are using refWidth & refHeight.

flip​

string

flips the image horizontally, vertically or both
since 21.04
horizontal | vertical | both
Values

Flips the image horizontally, vertically or both.

drawMode​

string

adds an optional drawMode to the image or group
since 21.04
info
Default

Adds an optional canvas drawMode to the image or group.

Examples: multiply, screen, luminosity.

Please search the web for the HTML Canvas property globalcompositeoperation for possible values and a detailed description.

hidden​

string

defines the visibility of the image or group
since 21.04
0 | 1 | true | false
Values

Defines the visibility of the image or group.

opacity​

float

defines the opacity of the image or group
since 21.04

Defines the opacity of the image or group.

Example: 0.8 → 80%

clip​

float

clips the image parts which are outside of the parent group
since 21.04

Clips child layers and child groups. Applies to groups only.