Components | Image Grating

"Image grating" is an element that allows creating an image composition. We can zoom in when clicking on each image. For instance, we can use this component to include a link inside each image, creating an interactive menu.

This component is added within the screens by default (See here), but it can also be added inside other components (for example, inside a Highlight, a Row, etc.).

You will find this component in the group of "Image" components.

Setup process

1. By default, when we add the "Image Grating" a component including four images is created. You can add more images clicking on "Image" inside the "Add" tab.

2. Enter the "Properties" tab and set up grating properties.

3. Click on each image and access the "Properties" tab. Click on "Examine" in the field called "Resource" and associate an image with the unit Resources folder (see here). We configure the rest of properties for each image included in the grating (see here to check image properties).

Remember It is very important that all images have the same size (height and width). Otherwise, the composition will look asymmetrical.

4. Finally, you can add links to each image to create an interactive menu.

Properties

PROPERTY

DESCRIPTION

Images per row

This property is used to indicate the number of images displayed per row. Images displayed per each row can only be seen in preview mode, not in edit mode.

Adjust to column

This field allows choosing how we would like to adjust the image grating. There are three positions:

Normal: adjusted to the centre of the screen.
Right-aligned: aligned to the right of the screen.
Left-aligned: aligned to the left of the screen.