The Gallery component lets you display a collection of images to the learners. The Gallery component can be suitable for displaying images of specific topic.
This article provides an overview of the Gallery component, component setup and behavior, and examples of Gallery component configurations.
The Gallery component is an interactive component and allows you to set up a gallery of images. The Gallery component can be suitable for displaying images of a product or a specific topic. The configuration can be set to automatically cycle the Gallery component items. The Gallery component can be configured to display thumbnails above or below the displayed image.
The Gallery component is fully responsive.
Component set up
Follow these steps to add the Gallery component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Gallery component.
- Click the Gallery component and select Add Full.
Click the Edit Component icon on the newly added Gallery component to begin set up.
In the General section:
Add Gallery Title, or a Gallery Display Title, as needed. Gallery Display Title is seen by learners.
Scroll down and add your Gallery Body. Use the text editor to style and format your text, as needed.
- Add Gallery Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Gallery component that can display an icon and label prior to the Gallery component completion, which changes to a different icon and label once the Gallery component is completed.
- In the Behaviour section, toggle to enable the setting Should automatically cycle items.
- When enabling Should automatically cycle items you select the speed at which the next item will be shown. Select Time until next item (Milliseconds) from the options in the drop-down list: 1000, 2000, 3000, 4000, or 5000, i.e. select your speed between 1-5 seconds. By defult the time is set to 3000.
- Select the Position of thumbnails to Top or Bottom according to the options in the drop-down list. By default, the position is set to Top.
In the Animations section, you toggle to enable what animations are run when the next Gallery Item is displayed.
Add Gallery Items
In the Items section, you add Gallery Items to your Gallery component.
For each Gallery Item:
- Select an Item Image to display.
- Toggle to Set Image Per Device Size to allow you to set images per device size, as needed.
- Enter Alt Text for accessibility, as needed.
Add, Duplicate and Delete Gallery Items as needed.
The Gallery component gives you a lot of flexibility. Below is an example that illustrates the Gallery component setup:
Example – the example Gallery component contains three Gallery Items with position of the thumbnails set to top.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.