Tokyo - Components | Image Gallery

Last modified:

"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), but it can also be added inside other components (for example, a Row).

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

Image 5633

There are two styles of image gallery: 

  1. Style 1. The forward and backward buttons between images are incorporated into the image. The caption is in the lower area. 
  2. Style 2. The forward and backward buttons are out of the image. The caption is in the upper area. A color border can be added by framing the component or not.
  3. Style 3. The forward and backward buttons are out of the image. A background image can be added to the gallery. You can reduce the size of the images and place them in the center, on the right or on the left.

Image 14086

Image 18955

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 here). 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 5634

Image gallery Properties




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.


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


It allows inserting a component and "wrap" it with a text.

Image 5635

  1. First, we should select a size percentage under 100% in "Width" property (25%, for instance).
  2. "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).
  3. We use arrows to move the component and put it on the text. Image 5636
Caption positionIt allows you to decide if the caption of the images will be in the lower area or in the upper area of ​​the gallery.
Show borderProperty available in the gallery with style 2. It allows you to display a border that frames the entire component. The border will have the main color of the unit.
Background imageProperty available in gallery with style 3. Allows you to add a background image to the gallery.
Show navigation bulletsIt allow you to show or hide the lower navigation bullets between images.

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

  • Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
  • Non objetive: this audio will not an objetive to complete the unit.
  • Interact: It is necessary interact with the component to reach the objective.
  • Complete: it is necessary to visit all images in the gallery to exceed the goal.

Is this article helpful for you?
© 2023 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.