Gallery Component

This component is suitable for use when creating accessible courses.

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 an example of Gallery component configurations.

Component overview

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

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. 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. This widget 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.

Behavior section

1. In the Behavior section, toggle to enable the setting Automatically cycle through items.
2. When enabling Automatically cycle through 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 default, the time is set to 3000.
3. Select the Position of the thumbnails to Top or Bottom according to the options in the drop-down list. By default, the position is set to Top.

Animations section

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:

1. Select an Item Image to display.
2. Toggle to Set Image Per Device Size to allow you to set images per device size, as needed.
3. Enter Alt Text for accessibility, as needed.
4. Toggle View Image in Lightbox, as needed.
5. Toggle Enable Magnifier, as needed.

Add, Duplicate, and Delete Gallery Items as needed.

Component Example

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.