Skip to main content

How do I Add and Configure One Image Gallery for a Web Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring One Image Gallery on a Webpage

Overview

The One Image Gallery component allows organizers to display a single image on a web page with configurable settings such as title, alt text, navigation URL, target behaviour, dependencies, and styling options. Using the Web Builder, users can upload or select images, apply formatting, control visibility, and manage placement within the page layout. This article explains how to add, configure, and manage a One Image Gallery on a web page.

Step-by-Step Approach

1. Access the Web Builder

  • From the Event Dashboard, navigate to the Content module.
  • Select the Pages submenu.
  • Open the required web page in edit mode.

2. Drag and Drop the One Image Gallery

  • From the Components panel, locate the One Image Gallery component.
  • Drag and drop the component onto the desired section of the web page.
  • The One Image Gallery is added and visible in the page layout.

3. Enter or Edit ID

  • Select the One Image Gallery to open its Settings panel.
  • Locate the ID field.
  • Enter a new ID or edit the existing value as required.

4. Select Dependency from the Dependency Select Field

  • In the Settings panel, locate the Dependency select field.
  • Choose an existing dependency from the list.
  • The One Image Gallery displays or hides based on the configured dependency conditions.

5. Select Section Version Type from the Section Version Type Select Field

  • Locate the Section Version Type select field.
  • Select the appropriate section version type.
  • The One Image Gallery follows the visibility rules defined for the selected version type.

6. Enter or Edit Title

  • Locate the Title field in the One Image Gallery settings.
  • Enter or edit the title as required.
  • The title serves as the primary identifier for a web page for both search engines and users.

7. Enter or Edit Alt Text for the Selected Image

  • Locate the Alt field.
  • Enter or edit the alternative text for the image.
  • Alt text improves accessibility and supports screen readers.

8. Enter New URL With or Without HTTPS for the Selected Image

  • Locate the URL field in the settings panel.
  • Enter the destination URL manually.
  • The URL can be entered with or without the https prefix.

9. Select Target from the Target Select Field for the Selected Image

  • Locate the Target select field.
  • Select whether the URL opens in the same tab or a new tab.

10. Upload or Select an Image

  • Upload an image by dragging and dropping it from your local system into the image area.
    OR, choose an image from the Select Image pop-up.
  • The selected image is displayed in the gallery preview.

11. Apply Formatting Options to the Image

  • Select the image on the Web Builder canvas.
  • Apply available formatting and styling options as required.
  • Changes are reflected immediately in the preview.

12. Manage the One Image Gallery

  • Reposition the One Image Gallery using drag-and-drop within the page layout.
  • Remove the One Image Gallery if it is no longer required.

13. Save and Apply Changes

  • Save and publish the web page to apply the One Image Gallery configuration.
  • Preview the page to confirm that the image displays and behaves as expected.

Related to

Related articles