# AX - Galerie ## Aperçu **AX - Galerie** est un composant Experience Cloud qui affiche des images et du contenu selon quatre styles de mise en page sur les pages Experience Sites : carrousel (diaporama), onglets (sections organisées), grille (multicolonnes) ou galerie (mise en valeur d’images). Utilisez-le pour afficher des photos de produits, des portfolios de projets, des images d’études de cas, des collections de ressources ou tout contenu visuel que les utilisateurs du portail doivent parcourir. Configurez le style de mise en page, la navigation et les sources d’images dans Experience Builder sans code. Parfait pour les catalogues de produits, les portfolios visuels, les bibliothèques d’images, les présentations avant/après, ou partout où votre portail a besoin d’affichages d’images ou de contenu attractifs
*** ## Prise en main Utilisez ce tutoriel simple pour apprendre les bases du composant Galerie et commencer à créer vos cas d’usage. {% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="" %} *** ## Se connecter aux données Salesforce La **Source de données** est l’endroit où vous définissez le contenu de votre galerie. AX - Galerie prend en charge deux types de source de données : **Manuel** et **Requête**.
| Type de source de données | Description | Quand l’utiliser | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Manuel** | Téléchargez ou saisissez directement chaque élément de la galerie dans le composant. Chaque image ajoutée via le sélecteur Source média crée un **nouveau** fichier dans votre bibliothèque Salesforce Files. | Galeries ponctuelles avec du contenu statique qui change rarement (visuel principal de page d’accueil, présentation fixe de produits, démos). | | **Requête** | Récupérez dynamiquement des éléments depuis un objet Salesforce (Product, Knowledge, ContentVersion, objet personnalisé…). La galerie se met à jour automatiquement lorsque les enregistrements sous-jacents changent. | Tout contenu qui doit rester synchronisé avec les données Salesforce, être renouvelé régulièrement ou être géré par une équipe non technique en dehors d’Experience Builder. | {% hint style="info" %} #### **Choisir entre Manuel et Requête** Le mode Manuel crée un **tout nouveau fichier** dans la bibliothèque chaque fois que vous téléchargez une image. Il ne référence pas les fichiers qui existent déjà dans Salesforce Files. Si vous devez réutiliser ou mettre à jour le contenu de votre galerie sans rouvrir le panneau Propriétés, utilisez **Requête** à la place. {% endhint %} #### Partage de modèle avec Avonni AX - Galerie **Conformité aux règles de partage des données Salesforce :** * **Respect des paramètres de l’organisation :** Les composants Avonni respectent pleinement les configurations de partage des données et les paramètres d’accès existants de votre organisation Salesforce. * **Politique de non-interférence :** Ces composants ne modifient ni n’affectent en aucune façon vos règles de partage des données préétablies. * **Visibilité et accès contrôlés :** La capacité à voir et interagir avec les enregistrements via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation *** ### Utiliser des fichiers Salesforce existants comme source média La **Source média** Le champ dans AX - Galerie est flexible quant à ce que vous lui fournissez. Vous pouvez le mapper à une URL, à un ContentDocumentId ou à un chemin de téléchargement complet Salesforce Files. Le composant détecte automatiquement les ContentDocumentId et les résout vers l’URL d’aperçu correcte au moment du rendu. Voici comment garder une galerie pointant vers des fichiers dans la **bibliothèque Salesforce Files** sans jamais retélécharger via le composant. | Ce que vous mettez dans Source média | Ce que la galerie affiche | | ---------------------------------------------------------------------------------- | ------------------------------------------------------- | | **ContentDocumentId** (commence par `069…`) | La dernière version du fichier est résolue et affichée. | | **URL Shepherd** comme `/sfc/servlet.shepherd/version/download/{ContentVersionId}` | La version exacte référencée dans l’URL est affichée. | | **URL publique** (image externe hébergée ailleurs) | L’image est chargée depuis la source externe. | #### **Comment le configurer en mode Requête** 1. Dans le **Source de données**, sélectionnez **Requête** et choisissez votre objet source (par exemple `ContentVersion`, `Product2`, `Knowledge__kav`, ou un objet personnalisé contenant vos références de bannière). 2. Appliquez un filtre qui identifie quels enregistrements doivent apparaître (par convention de titre, étiquette, champ personnalisé, valeur de liste de sélection, etc.). 3. Dans **Mappages de données**, mappez **Source média** à : * Un champ contenant un ContentDocumentId (par ex., `ContentDocumentId__c`), **ou** * Une expression construisant une URL shepherd (par ex., `/sfc/servlet.shepherd/version/download/{!Record.Id}` lors de l’interrogation de `ContentVersion`). Une fois configuré, mettre à jour le contenu de votre galerie est aussi simple que de remplacer les fichiers dans la bibliothèque Salesforce Files ou de mettre à jour le champ de référence sur vos enregistrements. La galerie se rafraîchit automatiquement à chaque chargement de page — inutile de rouvrir Experience Builder *** ## **Définir une variante** ### **Carrousel** La variante Carrousel offre une manière dynamique et attrayante de présenter votre contenu, vos images ou vos cartes. Elle est conçue pour afficher les éléments de façon séquentielle dans un format de diaporama, ce qui en fait un excellent choix pour mettre en avant du contenu vedette, des images de produits ou des annonces importantes.
**Quand l’utiliser :** Utilisez la variante Carrousel lorsque vous souhaitez : * Capter l’attention des utilisateurs avec une présentation visuellement attrayante. * Afficher plusieurs éléments ou images de manière peu encombrante. * Créer des bannières rotatives ou des sections de contenu vedette sur votre site. **Fonctionnalités :** * **Contrôles de navigation :** Naviguez dans le carrousel à l’aide de contrôles intuitifs tels que des boutons fléchés ou des points de pagination. * **Option de lecture automatique :** Configurez le carrousel pour faire défiler automatiquement les éléments, avec la possibilité de mettre en pause et de reprendre. * **Apparence personnalisable :** Adaptez l’apparence du carrousel au design de votre site en ajustant des éléments tels que les effets de transition et la durée d’affichage. ### **Onglets** La variante Onglets introduit une approche organisée et tabulée de la présentation du contenu. Cette variante est idéale pour catégoriser les informations, en offrant une mise en page propre et structurée qui permet aux utilisateurs de naviguer rapidement et d’accéder à différentes sections de contenu.
**Quand l’utiliser :** Envisagez la variante Onglets lorsque vous devez : * Présenter des informations catégorisées dans un format clair et segmenté. * Permettre aux utilisateurs de passer facilement d’une section de contenu à une autre sans quitter la page. * Organiser du contenu tel que des spécifications produit, des catégories de services ou des onglets informatifs de manière conviviale. **Fonctionnalités :** * **Contenu segmenté :** Organisez votre contenu en onglets clairement définis, afin de permettre aux utilisateurs de trouver et consulter facilement les différentes sections. * **Navigation conviviale :** Permettez aux utilisateurs de passer d’un onglet à l’autre de manière fluide, garantissant une interaction simple et intuitive. * **Design personnalisable :** Adaptez l’apparence des onglets à votre image de marque et à l’esthétique de votre site, en modifiant des éléments comme les libellés d’onglet, la mise en page et les palettes de couleurs. ### **Grille** Présente le contenu dans une mise en page structurée à plusieurs colonnes. Chaque élément occupe une cellule dans la grille. **Quand l’utiliser :** Idéal pour afficher une collection d’éléments où une importance égale est souhaitée, comme : * Listes de produits * Profils des membres de l’équipe * Aperçus d’articles de blog **Fonctionnalités** * Nombre de colonnes personnalisable * Possibilité de définir l’espacement (écart) entre les éléments * Options pour les images, titres, descriptions et boutons d’appel à l’action dans chaque cellule de la grille ### **Galerie** Une mise en page axée sur le visuel qui met les images en évidence. **Quand l’utiliser :** Idéal pour mettre en valeur du contenu basé sur l’image, tel que : * Portfolios de photographie * Galeries de produits * Contenu vedette centré sur l’image **Fonctionnalités** * Accent sur des images grandes et de haute qualité * Options pour inclure des légendes ou une fonctionnalité de lightbox pour zoomer sur les images * Possibilité de mises en page créatives et d’effets au survol *** ## Interactions La section « Lier à » détermine ce qui se passe lorsqu’un utilisateur clique sur un élément dans votre galerie Avonni. Utilisez-la pour diriger les utilisateurs vers des pages détaillées, ouvrir un nouveau contenu ou déclencher d’autres actions. **Exemple :** * Par exemple, présentez des maisons vedettes dans une galerie et permettez aux utilisateurs de cliquer sur chaque image pour voir plus de détails sur une page distincte. *** ## Style de l’apparence Les attributs de style vous permettent de contrôler l’apparence visuelle de chaque élément de la galerie. Les paramètres sont regroupés selon ce qu’ils affectent.
### Paramètres généraux de la galerie S’applique à toutes les variantes (Carrousel, Onglets, Grille, Galerie). | Paramètre | Ce qu’il contrôle | | ----------- | ----------------------------------------------------------------------------------------- | | **Taille** | Largeur et hauteur globales de la galerie. | | **Bordure** | Style, largeur et couleur de la bordure autour de la galerie. | | **Légende** | Style du texte de légende affiché sur chaque élément. | | **Titre** | Style du texte de titre sur chaque élément. | | **Contenu** | Style de la zone de contenu principale à l’intérieur de chaque élément. | | **Média** | Façon dont les images et vidéos sont affichées (ajustement, alignement, dimensionnement). | ### Variante Carrousel S’applique uniquement lorsque **Variante** est défini sur `Carrousel`. | Paramètre | Ce qu’il contrôle | | ----------------------------------------- | ---------------------------------------------------------------------- | | **Élément du diaporama** | Arrière-plan, alignement et espacement de chaque élément du carrousel. | | **Titre de l’élément du diaporama** | Police, taille et couleur des titres d’élément. | | **Description de l’élément du diaporama** | Police, taille et couleur des descriptions d’élément. | | **Image du diaporama** | Taille et bordure des images à l’intérieur de chaque élément. | | **Indicateur actif du diaporama** | Style de l’indicateur pour l’élément actuellement affiché. | | **Indicateur inactif du diaporama** | Style des indicateurs pour les éléments non actifs. | | **Bouton de navigation du diaporama** | Style des boutons de navigation précédent/suivant. | ### Variante Onglets S’applique uniquement lorsque **Variante** est défini sur `Onglets`. | Paramètre | Ce qu’il contrôle | | --------------------------------------- | --------------------------------------------------- | | **Onglet** | Style de chaque onglet individuel. | | **Bordure de l’onglet** | Bordure autour de chaque onglet. | | **Bordure de l’onglet actif/au survol** | Bordure pour l’onglet actif et l’état de survol. | | **Arrière-plan de l’onglet** | Couleur d’arrière-plan ou image pour les onglets. | | **Libellé de l’onglet** | Police, taille et couleur des libellés d’onglet. | | **Sous-titre de l’onglet** | Police, taille et couleur des sous-titres d’onglet. | *** ## Dépannage | Problème | Cause | Correction | | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **« Aucun aperçu disponible » apparaît en mode Manuel** | L’image téléchargée n’a pas été marquée comme lien public, donc les utilisateurs du portail ne peuvent pas la charger. | Téléchargez à nouveau l’image et cochez **Lien public** au moment du téléchargement, ou passez en mode Requête où les règles de partage standard s’appliquent. | | **Le mode Manuel vous oblige à retélécharger chaque fois que vous souhaitez changer une image** | Le mode Manuel est un téléverseur direct — il ne référence pas les fichiers Salesforce Files existants. | Utilisez le **Requête** mode avec ContentVersion ou un objet personnalisé contenant des références de fichier. Voir *Utiliser des fichiers Salesforce existants comme source média* ci-dessus. | | **La galerie est vide pour les utilisateurs du portail mais fonctionne dans l’aperçu Experience Builder** | Le profil de l’utilisateur du portail n’a pas accès à l’objet interrogé ou aux fichiers référencés. | Vérifiez les autorisations de profil sur l’objet, la sécurité au niveau du champ et l’accès à la bibliothèque/au partage sur `ContentVersion` ou l’objet source. | | **Les images définies via ContentDocumentId ne s’affichent pas** | L’ID n’est pas un `069` ContentDocumentId valide, ou l’utilisateur du portail ne peut pas accéder au document. | Confirmez que la valeur commence par `069`, vérifiez l’accès de l’utilisateur du portail au fichier dans la bibliothèque Salesforce Files. | | **La galerie affiche les bons titres mais toutes les images sont cassées** | Source média est mappé à un champ qui ne contient pas de ContentDocumentId ni d’URL valide. | Dans Mappages de données, confirmez que Source média pointe vers un champ ContentDocumentId, une URL shepherd ou une URL d’image publique valide. | *** ## Exemples de cas d’usage ### Exemple 1 : Carrousel d’actualités client {% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="" %} Tenez vos clients informés et engagés en mettant en avant vos derniers articles directement sur votre page d’accueil Experience Cloud. Le composant AX Gallery facilite l’affichage d’un carrousel d’actualités dynamique et riche en images qui se met à jour automatiquement à mesure que de nouveaux contenus sont publiés. *** #### **Ce que vous allez obtenir** * **Du contenu récent en un coup d’œil :** Affichez vos articles Knowledge les plus récents sur la page d’accueil, avec des images, afin que les visiteurs ne manquent jamais une mise à jour. * **Navigation sans effort :** Permettez aux clients de faire défiler les actualités de l’entreprise dans une mise en page de carrousel propre et structurée. * **Filtrage ciblé :** Affichez uniquement les articles d’actualité en utilisant un champ de liste de sélection personnalisé, afin que le carrousel reste ciblé et pertinent. *** #### **Avant de commencer** * **`ImageId__c` champ :** Créez un champ Texte sur l’objet Knowledge pour stocker l’ID du document de contenu de l’image de chaque article. * **`Type__c` champ :** Créez un champ Liste de sélection sur l’objet Knowledge pour catégoriser les articles, en vous assurant que la valeur **Actualités** existe et est appliquée à vos articles. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le composant **AX Gallery** sur la page souhaitée dans Experience Builder. {% endstep %} {% step %} #### **Personnalisez l’affichage du composant** * Définissez le **Titre** sur `Carrousel d’actualités`. * Définissez le **Légende** sur `Parcourez nos articles hebdomadaires`. * Définissez le **Nombre de colonnes** sur `3`. {% endstep %} {% step %} #### **Configurez votre source de données** * Créez une nouvelle requête dans la configuration de la source de données. * Sélectionnez **Knowledge** comme objet (assurez-vous de sélectionner la deuxième option Knowledge dans la liste). * Ajoutez un filtre : **Type\_\_c est égal à** `Actualités`. * Définissez l’ordre de tri sur **Date de création, décroissant** afin que vos articles les plus récents apparaissent toujours en premier. {% endstep %} {% step %} #### **Configurez le mappage des données** * Mappez **Titre** au champ Knowledge `Titre` . * Mappez **Source média** sur `ImageId__c` pour récupérer les images des articles. * Définissez le **Vitesse de lecture** sur `5`. {% endstep %} {% step %} #### **Prévisualisez votre travail** * Utilisez l’aperçu Experience Builder pour confirmer que votre carrousel affiche les bons articles, images et la bonne mise en page avant la publication. {% endstep %} {% endstepper %} *** ### Exemple 2 : Galerie de produits client {% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="" %} Offrez à vos clients une manière visuellement attrayante de découvrir votre catalogue de produits, directement depuis votre page d’accueil. En combinant le composant AX Gallery avec vos données Produit, vous pouvez créer un carrousel accrocheur qui met en avant les produits vedettes et guide les visiteurs directement vers les pages de détail produit. *** #### **Ce que vous allez obtenir** * **Une vitrine visuelle de produits :** Affichez des casques vedettes dans un carrousel riche en images qui encourage la navigation. * **Navigation fluide :** Permettez aux clients de passer facilement du carrousel directement aux pages de détail de chaque produit. * **Une expérience de page d’accueil sélectionnée :** Mettez en avant les produits les plus importants en n’affichant que votre catalogue vedette sur la page d’accueil. *** #### **Avant de commencer** * **`Type__c` champ :** Créez un champ Liste de sélection sur l’objet Product2 et assurez-vous que la valeur **Casque** existe, afin que vous puissiez filtrer le carrousel sur les bons produits. * **`ContentDocumentId__c` champ :** Créez un champ Texte sur l’objet Product2 pour stocker l’URL de l’image de chaque produit. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le composant **AX Gallery** sur la page souhaitée dans Experience Builder. {% endstep %} {% step %} #### **Personnalisez l’affichage du composant** * Définissez le **Titre** sur `Carrousel de produits`. * Définissez le **Légende** sur `Parcourez nos produits vedettes !` * Définissez le **Nombre de colonnes** sur `3`. {% endstep %} {% step %} #### **Configurez votre source de données** * Créez une nouvelle requête dans la configuration de la source de données. * Sélectionnez **Produit** comme objet. {% endstep %} {% step %} #### **Configurez le mappage des données** * Mappez **Titre** au `Nom du produit` . * Mappez **Source média** sur `ContentDocumentId__c` pour afficher l’image de chaque produit. * Définissez le **Vitesse de lecture** sur `5`. {% endstep %} {% step %} #### **Prévisualisez votre travail** * Utilisez l’aperçu Experience Builder pour confirmer que vos produits, images et la mise en page du carrousel s’affichent comme prévu avant la publication. {% endstep %} {% endstepper %}