# AX - Gallery

## Overview

**AX - Gallery** is an Experience Cloud component that displays images and content in four layout styles on Experience Sites pages: carousel (slideshow), tabs (organized sections), grid (multi-column), or gallery (image showcase).

Use it to display product photos, project portfolios, case study images, resource collections, or any visual content that portal users need to browse. Configure the layout style, navigation, and image sources in Experience Builder without code.

Perfect for product catalogs, visual portfolios, image libraries, before/after showcases, or anywhere your portal needs attractive image or content displays

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJToiKLlnA4RZIeE7I0Ni%2F2024-02-07_21-13-18%20(1).gif?alt=media&#x26;token=76515588-cbb1-4dcc-9004-5001d1189ff5" alt=""><figcaption></figcaption></figure>

***

## Getting Started

Use this simple tutorial to learn the basics of the Gallery component and start building your use cases.

{% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="<https://app.arcade.software/share/QrGyk84126ycSIM6P0oX>" %}

***

## Connect to Salesforce Data

The Data Source is where you define your carousel's content. There are two main types of data sources: **Manual** and **Query**.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F81HTiPtGZjjWPmHbMDF5%2F2024-02-07_21-14-11.png?alt=media&#x26;token=2179494c-b3d0-4570-b763-3f336626fb55" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Data Source Type</th><th width="248.33333333333331">Description</th><th>When to Use</th></tr></thead><tbody><tr><td><strong>Manual Data Source</strong></td><td>Involves manually entering data for gallery items. Useful for static content or predefined items.</td><td>Ideal for content that doesn't change frequently or for quick setup with specific items.</td></tr><tr><td><strong>Query Data Source</strong></td><td>Enables fetching data through a query, pulling various records/data points from Salesforce.</td><td>Ideal for complex data retrieval or when sourcing.</td></tr></tbody></table>

## **Setting a variant**

### **Carousel**

The Carousel variant offers a dynamic, engaging way to showcase your content, images, or cards. It's designed to display items sequentially in a slideshow format, making it an excellent choice for highlighting featured content, product images, or important announcements.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FSDPeJtaR0mY1bFLE2Dic%2F2024-02-07_21-17-09.png?alt=media&#x26;token=76edae56-e5be-4800-9299-e0ce0c69c213" alt=""><figcaption></figcaption></figure>

**When to Use:** Utilize the Carousel variant when you want to:

* Capture user attention with a visually appealing presentation.
* Display multiple items or images in a space-efficient manner.
* Create rotating banners or featured content sections on your site.

**Features:**

* **Navigation Controls:** Navigate the carousel with intuitive controls such as arrow buttons or pagination dots.
* **Auto-Play Option:** Set the carousel to cycle through items automatically, with the ability to pause and resume.
* **Customizable Appearance:** Tailor the carousel's look and feel to match your site's design by adjusting elements such as transition effects and display duration.

### **Tabs**

The Tabs variant introduces an organized, tabulated approach to content presentation. This variant is ideal for categorizing information, offering a clean, structured layout that allows users to quickly navigate and access different content sections.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXPjifQ0PqC8J5k1SVBrq%2F2024-02-07_21-18-03.png?alt=media&#x26;token=88201252-88f4-4360-8cf7-135bab8bf714" alt=""><figcaption></figcaption></figure>

**When to Use:** Consider the Tabs variant when you need to:

* Present categorized information in a clear, segmented format.
* Allow users to easily switch between different content sections without leaving the page.
* Organize content such as product specifications, service categories, or informational tabs in a user-friendly manner.

**Features:**

* **Segmented Content:** Organize your content into clearly defined tabs, making it straightforward for users to find and view different sections.
* **User-Friendly Navigation:** Enable users to seamlessly switch between tabs, ensuring a smooth and intuitive interaction.
* **Customizable Design:** Adapt the appearance of the tabs to align with your branding and site aesthetics, modifying elements like tab labels, layout, and color schemes.

### **Grid**

Presents content in a structured, multi-column layout. Each item occupies a cell within the grid.

**When to use:** Ideal for displaying a collection of items where equal emphasis is desired, such as:

* Product listings
* Team member profiles
* Blog post previews

**Features**

* Customizable number of columns
* Ability to define the spacing (gap) between items
* Options for images, titles, descriptions, and call-to-action buttons within each grid cell

### **Gallery**

A visually-driven layout that prominently showcases images.

**When to use:** Best for highlighting image-based content, such as:

* Photography portfolios
* Product galleries
* Image-centric featured content

**Features**

* Focus on large, high-quality images
* Options to include captions or lightbox functionality for zooming in on images
* Potential for creative layouts and hover effects

## Interactions

The "Link to" section determines what happens when a user clicks on an item in your Avonni Gallery. Use this to direct users to detailed pages, open new content, or trigger other actions.

**Example:**

* For example, showcase featured houses in a gallery and allow users to click on each image to view more details on a separate page.

***

## Styling Appearance

Explore the styling attributes for the Avonni Gallery, each designed to refine the visual presentation of your content, whether you're using the Carousel or Tabs variant:

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtiBUANZLlzY5aTG4C29z%2F2024-02-07_21-18-53.png?alt=media&#x26;token=5eb49b41-6c43-4f90-bc97-acc5b1fabce7" alt=""><figcaption></figcaption></figure>

1. **Size:** Adjust the overall dimensions of the gallery to fit perfectly within your layout.
2. **Border:** Customize the border style, width, and color to frame your gallery content effectively.
3. **Caption:** Style the caption text associated with each item for clarity and emphasis.
4. **Title:** Modify the title text for each gallery item to stand out or align with your site's theme.
5. **Tailor the appearance of the main content area in each gallery item to ensure a** cohesive visual presentation.
6. **Media:** Customize how media (images or videos) are displayed to ensure they complement your gallery's overall design.
7. **Slideshow Item:** Style individual items in the carousel, including background, alignment, and spacing.
8. **Slideshow Item Title:** Customize the appearance of titles within each carousel item for immediate impact and recognition.
9. **Slideshow Item Description:** To enhance readability, tailor the font, size, and color of descriptions in carousel items.
10. **Slideshow Image:** For visual consistency, adjust the size and border of images in the carousel.
11. **Slideshow Active Indicator:** Style the indicator for the currently viewed item, making it prominent and distinct.
12. **Slideshow Inactive Indicator:** Customize indicators for non-active items to ensure smooth navigation through the carousel.
13. **Slideshow Navigation Button:** Tailor the appearance of navigation buttons, ensuring they are user-friendly and match your gallery's style.
14. **Tab:** Style individual tabs to differentiate between active and inactive content sections.
15. **Tab Border:** Customize the border of each tab for clear segmentation and visual appeal.
16. **Active/Hover Tab Border:** Style the border of active or hovered-over tabs to guide users visually through their interactions.
17. **Tab Background:** Adjust the background color or image of tabs to align with the overall theme of your site.
18. **Tab Label:** Customize tab labels' font, size, and color for clarity and visual harmony.
19. **Tab Subtitle:** Tailor the appearance of tab subtitles, cohesively providing additional context or information.

***

## Use Case Examples

### Example 1: Customer News Carousel

{% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="<https://app.arcade.software/share/pOjxSsq8rQ3YgZFvjMgr>" %}

Keep your customers informed and engaged by showcasing your latest articles directly on your Experience Cloud home page. The AX Gallery component makes it easy to display a dynamic, image-rich news carousel that updates automatically as new content is published.

***

#### **What You'll Achieve**

* **Fresh content at a glance:** Surface your most recent Knowledge articles on the home page, complete with images, so visitors never miss an update.
* **Effortless browsing:** Let customers scroll through company news in a clean, structured carousel layout.
* **Targeted filtering:** Display only News articles by leveraging a custom picklist field, keeping the carousel focused and relevant.

***

#### **Before You Begin**

* **`ImageId__c` field:** Create a Text field on the Knowledge object to store the Content Document ID of each article's image.
* **`Type__c` field:** Create a Picklist field on the Knowledge object to categorize articles, making sure the **News** value exists and is applied to your articles.

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the component to your page**

* Drag the **AX Gallery** component onto your desired page in Experience Builder.
  {% endstep %}

{% step %}

#### **Customize the component display**

* Set the **Title** to `News Carousel`.
* Set the **Caption** to `Browse our weekly articles`.
* Set the **Number of Columns** to `3`.
  {% endstep %}

{% step %}

#### **Set up your data source**

* Create a new query in the data source configuration.
* Select **Knowledge** as the object (make sure to select the second Knowledge option in the list).
* Add a filter: **Type\_\_c equals** `News`.
* Set the sort order to **Created Date, Descending** so your newest articles always appear first.
  {% endstep %}

{% step %}

#### **Configure the data mapping**

* Map **Title** to the Knowledge `Title` field.
* Map **Media Source** to `ImageId__c` to pull in article images.
* Set the **Playback Rate** to `5`.
  {% endstep %}

{% step %}

#### **Preview your work**

* Use the Experience Builder preview to confirm that your carousel displays the correct articles, images, and layout before publishing.
  {% endstep %}
  {% endstepper %}

***

### Exemple 2: Customer Products gallery

{% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="<https://app.arcade.software/share/aIu9ZNuteXdewe19LJL0>" %}

Give your customers a visually compelling way to discover your product catalog, right from your home page. By combining the AX Gallery component with your Product data, you can create an eye-catching carousel that highlights featured products and guides visitors straight to product detail pages.

***

#### **What You'll Achieve**

* **A visual product showcase:** Display featured headphones in a rich, image-forward carousel that encourages browsing.
* **Seamless navigation:** Allow customers to move from the carousel directly to individual product detail pages with ease.
* **A curated homepage experience:** Highlight the products that matter most by surfacing only your featured catalog on the home page.

***

#### **Before You Begin**

* **`Type__c` field:** Create a Picklist field on the Product2 object and ensure the **Headphone** value exists, so you can filter the carousel to the right products.
* **`ContentDocumentId__c` field:** Create a Text field on the Product2 object to store the image URL for each product.

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the component to your page**

* Drag the **AX Gallery** component onto your desired page in Experience Builder.
  {% endstep %}

{% step %}

#### **Customize the component display**

* Set the **Title** to `Products Carousel`.
* Set the **Caption** to `Browse our featured products!`
* Set the **Number of Columns** to `3`.
  {% endstep %}

{% step %}

#### **Set up your data source**

* Create a new query in the data source configuration.
* Select **Product** as the object.
  {% endstep %}

{% step %}

#### **Configure the data mapping**

* Map **Title** to the `Product Name` field.
* Map **Media Source** to `ContentDocumentId__c` to display each product's image.
* Set the **Playback Rate** to `5`.
  {% endstep %}

{% step %}

#### **Preview your work**

* Use the Experience Builder preview to confirm that your products, images, and carousel layout appear as expected before publishing.
  {% endstep %}
  {% endstepper %}