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.
Getting Started
Use this simple tutorial to learn the basics of the Gallery component and start building your use cases.
Configuration
Data Source
The Data Source is where you define your gallery's content. AX - Gallery supports two data source types: Manual and Query. (Set an Api Name to give the component a unique identifier, and Media Position to place each item's media relative to its content.)
Manual
Upload or enter each gallery item directly in the component. Every image added through the Media Source picker creates a new file in your Salesforce Files library.
One-off galleries with static content that rarely changes (landing page hero, fixed product showcase, demos).
Query
Pull items dynamically from a Salesforce object (Product, Knowledge, ContentVersion, custom object…). The gallery auto-updates when the underlying records change.
Any content that needs to stay in sync with Salesforce data, rotate regularly, or be managed by a non-technical team outside Experience Builder.
Choosing between Manual and Query
Manual mode creates a brand new file in the library every time you upload an image. It does not reference files that already exist in Salesforce Files. If you need to reuse or update your gallery content without reopening the Properties Panel, use Query instead.
Model Sharing with Avonni AX - Gallery
Adherence to Salesforce Data Sharing Rules:
Respecting Org Settings: Avonni Components fully comply with your Salesforce organization's existing data-sharing configurations and access settings.
No Interference Policy: These components do not alter or affect your pre-established data-sharing rules in any way.
Controlled Visibility and Access: The ability to view and interact with records through Avonni Components is governed by your organization's defined sharing settings and user permissions
Using existing Salesforce Files as your Media Source
The Media Source field in AX - Gallery is flexible about what you feed it. You can map it to a URL, a ContentDocumentId, or a full Salesforce Files download path. The component automatically detects ContentDocumentIds and resolves them to the correct preview URL at render time.
This is how you keep a gallery pointing at files in the Salesforce Files library without ever re-uploading through the component.
A field containing a ContentDocumentId (starts with 069…)
The latest version of the file is resolved and displayed. The component auto-detects 069… IDs.
The standard VersionDataURL field when querying ContentVersion
The file is downloaded and displayed. Recommended when your source object is ContentVersion.
A Shepherd URL built with an expression like /sfc/servlet.shepherd/version/download/{{Record.Id}}
The exact version referenced in the URL is displayed. Useful for custom URL construction.
A Public URL (external image hosted elsewhere)
The image is loaded from the external source.
How to set it up in Query mode
In the Data Source, select Query and choose your source object (
ContentVersion, a custom object holding file references, or any object with an image field).Apply a filter that identifies which records should appear (by title convention, tag, custom field, picklist value, etc.).
In Data Mappings, map Media Source based on your source object :
Querying ContentVersion : map Media Source to the standard
Version Data URLfield.Querying a custom object with a ContentDocumentId field : map Media Source directly to that field (the component auto-detects
069…IDs and resolves them).Querying any object with a full image URL field : map Media Source directly to that field.
Once configured, updating your gallery's content is as simple as replacing the files in the Salesforce Files library or updating the reference field on your records.
Experience Builder Preview
Images pointing to Salesforce Files may not render in the Experience Builder preview because the builder does not authenticate as a portal user. They will render correctly once logged in to the published site as a community user
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.
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.
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 switch between tabs seamlessly, ensuring a smooth, intuitive experience.
Customizable Design: Adapt the appearance of the tabs to align with your branding and site aesthetics by modifying elements such as 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
The styling attributes let you control the visual appearance of every element in the gallery. Settings are grouped by what they affect.
Apply to all variants (Carousel, Tabs, Grid, Gallery).
Size
Overall width and height of the gallery.
Border
Border style, width, and color around the gallery.
Caption
Styling of the caption text shown on each item.
Title
Styling of the title text on each item.
Content
Styling of the main content area inside each item.
Media
How images and videos are displayed (fit, alignment, sizing).
Only applies when Variant is set to Carousel.
Slideshow Item
Background, alignment, and spacing of each carousel item.
Slideshow Item Title
Font, size, and color of item titles.
Slideshow Item Description
Font, size, and color of item descriptions.
Slideshow Image
Size and border of images inside each item.
Slideshow Active Indicator
Styling of the indicator for the currently viewed item.
Slideshow Inactive Indicator
Styling of the indicators for non-active items.
Slideshow Navigation Button
Styling of the previous/next navigation buttons.
Only applies when Variant is set to Tabs.
Tab
Styling of each individual tab.
Tab Border
Border around each tab.
Active/Hover Tab Border
Border for the active tab and hover state.
Tab Background
Background color or image for tabs.
Tab Label
Font, size, and color of tab labels.
Tab Subtitle
Font, size, and color of tab subtitles.
Troubleshooting
Images do not preview in Experience Builder but display correctly on the published site
Experience Builder does not authenticate as a portal user, so it cannot fetch images from Salesforce Files during preview.
Expected behavior. Log in to the published site as a community user to verify images render correctly.
"No preview available" appears in Manual mode
The uploaded image was not flagged as a public link, so portal users cannot load it.
Re-upload the image and check Public link at upload time, or switch to Query mode where standard sharing rules apply.
Manual mode forces you to re-upload every time you want to change an image
Manual mode is a direct uploader — it does not reference existing Salesforce Files.
Use Query mode with ContentVersion or a custom object holding file references. See Using existing Salesforce Files as your Media Source above.
Gallery is empty for portal users but works in Experience Builder preview
The portal user's profile lacks access to the queried object or to the referenced files.
Check profile object permissions, field-level security, and Library/sharing access on ContentVersion or the source object.
Images do not render at all (neither in preview nor on the published site)
Media Source is mapped to a field that does not contain a valid file reference (ContentDocumentId starting with 069…, the Version Data URL field on ContentVersion, or a public image URL).
Verify what the mapped field actually contains. When querying ContentVersion, use the standard Version Data URL field. For custom objects, store a ContentDocumentId (starting with 069…) and map Media Source directly to that field.
Gallery shows correct titles but all images are broken
Media Source is mapped to a field that does not contain a ContentDocumentId or a valid URL.
In Data Mappings, confirm Media Source points to a ContentDocumentId field, a shepherd URL, or a valid public image URL.
Use Cases
Example 1: Customer News Carousel
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__cfield: Create a Text field on the Knowledge object to store the Content Document ID of each article's image.Type__cfield: 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
Example 2: Customer Products gallery
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__cfield: 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__cfield: Create a Text field on the Product2 object to store the image URL for each product.
How to Set It Up
Mis à jour
Ce contenu vous a-t-il été utile ?