Skip to main content

Groups and Layers

Layers can be put into a group, which has the benefit of organizing them better and making it possible to apply certain properties to all images in a group at once.

Groups are marked by the <fsi-layer-group> tag.

If a property is set individually on a layer, this will overwrite the group property. Example: If the group opacity is set to 50%, but one layer is set to 80%, for this layer only the layer property will apply.

How groups are addressed:

Example:
<fsi-layer-group name="lamps"
  width="100%" height="100%" right="0" top="20%" opacity="0.5">

  <fsi-layer name="Small Lamp" src="images/configurator/small.png2"
    width="30%" bottom="0" left="0" opacity="0.8">
  </fsi-layer>

  <fsi-layer name="Big Lamp" src="images/configurator/big.png"
    height="60%" top="10" left="0">
  </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's important that both refWidth & 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"
    width="100%" height="100%" right="centered" bottom="centered"
    refMode="fit" refWidth="3840" refHeight="2400">

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

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

  <fsi-layer-group>

</fsi-layers>