Components | Image Gallery
"Image gallery" is a component that shows one or various images. It is possible to add an "explanatory text" in the caption.
This component is added within the screens by default (See here) and pop-ups (See here), but it can also be added inside other components (for example, a Row).
You will find this component in the group of "Image" components.
When creating an image gallery, we can choose between two presets:
-
Standard gallery. It is a common image gallery, which has Next and Back buttons to see all the images included in it.
-
Thumbnail gallery. This type of gallery shows a list on top including miniatures of the images included in it.
Setup process
1. When we add the "Image gallery", a component including two images is created by default. You can add more images clicking on "Image" inside the "Add" tab.
2. Enter the "Properties" and set up gallery properties.
3. Click on each image and access the "Properties" tab. Go to "Resource" property, click on "Examine" to find and associate an image from the unit Resources folder (see Section 4.10. in the Author's Guide to learn how to manage the Resources folder). Optionally, set up the rest of properties of each image in the gallery (see here to review the properties for each image).
4. Optionally, access the "Add" tab, where you can add two components:
-
Credits offering specific properties to define image colours and position (up, down, right, left, etc.)
-
Caption located under the image. This component has the same specific properties than the "Text" component. (In order to learn how these properties work, visit here)
Image gallery Properties
PROPERTY
DESCRIPTION
Width
This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default. Text size can be reduced to other preset percentages or can be displayed in "full-size". For some quote styles, "Full" width makes quotes lay over the central column.
Align
This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.
Float
It allows inserting a component and "wrap" it with a text.
- First, we should select a size percentage under 100% in "Width" property (25%, for instance).
-
"Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
- We use arrows to move the component and put it on the text.
