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. 

<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>

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

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.

Defines which server-side effects are applied to the layer.
Read more about effects here: Real-Time Image Effects
Example: colorize(176,97,10)

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: "0,0,1,1" (entire image)

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

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

Defines the height of the image or group in % of the parent group or px. Possible values: fit or fill.

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.

Defines the height of the group in px as refefence 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 refHeight and refWidth.

Consult Ensuring correct aspect ratio for an example.

Defines the width of the group in px as refefence 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 refHeight and refWidth.

Consult Ensuring correct aspect ratio for an example.

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.

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.

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.

Specifies the origin for the rotation. Possible values: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
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.

Flips the image horizontally, vertically or both. Possible values: horizontal, vertical, both

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.

Defines the visibility of the image or group. Possible values: 0,1, true, false

Defines the opacity of the image or group. Example: 0.8 → 80%

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