> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-gallery.md). # AX - Gallery ## Resumen **AX - Gallery** es un componente de Experience Cloud que muestra imágenes y contenido en cuatro estilos de diseño en las páginas de Experience Sites: carrusel (presentación de diapositivas), pestañas (secciones organizadas), cuadrícula (multicolumna) o galería (muestra de imágenes). Úselo para mostrar fotos de productos, portafolios de proyectos, imágenes de casos de estudio, colecciones de recursos o cualquier contenido visual que los usuarios del portal necesiten explorar. Configure el estilo de diseño, la navegación y las fuentes de imágenes en Experience Builder sin código.
*** ## Primeros pasos Use este sencillo tutorial para aprender los conceptos básicos del componente Gallery y comenzar a crear sus casos de uso. {% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %} *** ## Conectar con datos de Salesforce La **Fuente de datos** es donde define el contenido de su galería. AX - Gallery admite dos tipos de fuentes de datos: **Manual** y **Consulta**.
| Tipo de origen de datos | Descripción | Cuándo usar | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Manual** | Cargue o introduzca cada elemento de la galería directamente en el componente. Cada imagen añadida mediante el selector de Media Source crea un **nuevo** archivo en su biblioteca de Salesforce Files. | Galerías puntuales con contenido estático que rara vez cambia (hero de página de inicio, muestra fija de productos, demostraciones). | | **Consulta** | Obtenga elementos de forma dinámica desde un objeto de Salesforce (Product, Knowledge, ContentVersion, objeto personalizado…). La galería se actualiza automáticamente cuando cambian los registros subyacentes. | Cualquier contenido que deba mantenerse sincronizado con los datos de Salesforce, rotarse con regularidad o ser gestionado por un equipo no técnico fuera de Experience Builder. | {% hint style="info" %} #### **Cómo elegir entre Manual y Query** El modo Manual crea un **archivo completamente nuevo** en la biblioteca cada vez que carga una imagen. No hace referencia a archivos que ya existan en Salesforce Files. Si necesita reutilizar o actualizar el contenido de su galería sin volver a abrir el panel Properties, use **Consulta** en su lugar. {% endhint %} #### Uso compartido del modelo con Avonni AX - Gallery **Cumplimiento de las reglas de compartición de datos de Salesforce:** * **Respeto por la configuración de la organización:** Los componentes de Avonni cumplen plenamente con las configuraciones existentes de uso compartido de datos y los ajustes de acceso de su organización de Salesforce. * **Política de no interferencia:** Estos componentes no modifican ni afectan de ninguna manera tus reglas de compartición de datos preestablecidas. * **Visibilidad y acceso controlados:** La capacidad de ver e interactuar con los registros a través de los componentes de Avonni está regida por la configuración de compartición y los permisos de usuario definidos por tu organización *** ### Uso de archivos existentes de Salesforce Files como su fuente multimedia La **Fuente de medios** el campo en AX - Gallery es flexible respecto a lo que le proporcione. Puede asignarlo a una URL, un ContentDocumentId o a una ruta completa de descarga de Salesforce Files. El componente detecta automáticamente los ContentDocumentId y los resuelve a la URL de vista previa correcta en tiempo de renderizado. Así es como mantiene una galería apuntando a archivos en la **biblioteca de Salesforce Files** sin tener que volver a cargarlos nunca a través del componente. | Lo que pone en Media Source | Lo que renderiza la galería | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Un campo que contiene un **ContentDocumentId** (comienza con `069…`) | Se resuelve y muestra la última versión del archivo. El componente detecta automáticamente `069…` IDs. | | El **VersionDataURL** estándar al consultar `ContentVersion` | El archivo se descarga y se muestra. Recomendado cuando su objeto de origen es ContentVersion. | | Una **URL de Shepherd** construida con una expresión como `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | Se muestra la versión exacta referenciada en la URL. Útil para construir URL personalizadas. | | Una **URL pública** (imagen externa alojada en otro lugar) | La imagen se carga desde la fuente externa. | #### **Cómo configurarlo en modo Query** 1. En el **Fuente de datos**, seleccione **Consulta** y elija su objeto de origen (`ContentVersion`, un objeto personalizado que contenga referencias de archivos, o cualquier objeto con un campo de imagen). 2. Aplique un filtro que identifique qué registros deben aparecer (por convención de título, etiqueta, campo personalizado, valor de lista desplegable, etc.). 3. En **Mapeos de datos**, asigne **Fuente de medios** según su objeto de origen : * **Consultando ContentVersion :** asigne Media Source al estándar `Version Data URL` campo. * **Consultando un objeto personalizado con un campo ContentDocumentId :** asigne Media Source directamente a ese campo (el componente detecta automáticamente `069…` los IDs y los resuelve). * **Consultando cualquier objeto con un campo de URL de imagen completa :** asigne Media Source directamente a ese campo. Una vez configurado, actualizar el contenido de su galería es tan sencillo como reemplazar los archivos en la biblioteca de Salesforce Files o actualizar el campo de referencia en sus registros. {% hint style="info" %} #### Vista previa de Experience Builder Es posible que las imágenes que apuntan a Salesforce Files no se rendericen en la vista previa de Experience Builder porque el generador no se autentica como usuario del portal. Se renderizarán correctamente una vez que inicie sesión en el sitio publicado como usuario de la comunidad {% endhint %} *** ## Establecer una variante ### **Carrusel** La variante Carousel ofrece una forma dinámica y atractiva de mostrar su contenido, imágenes o tarjetas. Está diseñada para mostrar los elementos de forma secuencial en formato de presentación de diapositivas, lo que la convierte en una excelente opción para resaltar contenido destacado, imágenes de productos o anuncios importantes.
**Cuándo usar:** Utilice la variante Carousel cuando quiera: * Captar la atención del usuario con una presentación visualmente atractiva. * Mostrar varios elementos o imágenes de manera eficiente en el uso del espacio. * Crear banners rotativos o secciones de contenido destacado en su sitio. **Características:** * **Controles de navegación:** Navegue por el carrusel con controles intuitivos como botones de flecha o puntos de paginación. * **Opción de reproducción automática:** Configure el carrusel para que recorra los elementos automáticamente, con la posibilidad de pausar y reanudar. * **Apariencia personalizable:** Adapte el aspecto y la sensación del carrusel al diseño de su sitio ajustando elementos como los efectos de transición y la duración de la visualización. ### **Pestañas** La variante Tabs introduce un enfoque organizado y tabulado para la presentación de contenido. Esta variante es ideal para categorizar información y ofrece un diseño limpio y estructurado que permite a los usuarios navegar rápidamente y acceder a diferentes secciones de contenido.
**Cuándo usar:** Considere la variante Tabs cuando necesite: * Presentar información categorizada en un formato claro y segmentado. * Permitir a los usuarios cambiar fácilmente entre distintas secciones de contenido sin salir de la página. * Organizar contenido como especificaciones de productos, categorías de servicios o pestañas informativas de una manera fácil de usar. **Características:** * **Contenido segmentado:** Organice su contenido en pestañas claramente definidas, lo que facilita a los usuarios encontrar y ver distintas secciones. * **Navegación fácil de usar:** Permita que los usuarios cambien entre pestañas sin esfuerzo, garantizando una experiencia fluida e intuitiva. * **Diseño personalizable:** Adapte la apariencia de las pestañas para alinearlas con su marca y la estética del sitio modificando elementos como las etiquetas de las pestañas, el diseño y las combinaciones de colores. ### **Cuadrícula** Presenta el contenido en un diseño estructurado de varias columnas. Cada elemento ocupa una celda dentro de la cuadrícula. **Cuándo usar:** Ideal para mostrar una colección de elementos donde se desea darles la misma importancia, como por ejemplo: * Listados de productos * Perfiles de miembros del equipo * Vista previa de publicaciones de blog **Funciones** * Número de columnas personalizable * Capacidad para definir el espaciado (separación) entre elementos * Opciones para imágenes, títulos, descripciones y botones de llamada a la acción dentro de cada celda de la cuadrícula ### **Galería** Un diseño visual que destaca las imágenes de forma prominente. **Cuándo usar:** Ideal para resaltar contenido basado en imágenes, como: * Portafolios de fotografía * Galerías de productos * Contenido destacado centrado en imágenes **Funciones** * Enfoque en imágenes grandes y de alta calidad * Opciones para incluir pies de foto o funcionalidad de caja de luz para ampliar las imágenes * Posibilidad de diseños creativos y efectos al pasar el cursor *** ## Interacciones La sección "Link to" determina qué sucede cuando un usuario hace clic en un elemento de su Avonni Gallery. Úsela para dirigir a los usuarios a páginas detalladas, abrir nuevo contenido o activar otras acciones. **Ejemplo:** * Por ejemplo, muestre casas destacadas en una galería y permita a los usuarios hacer clic en cada imagen para ver más detalles en una página separada. *** ## Apariencia del estilo Los atributos de estilo le permiten controlar la apariencia visual de cada elemento de la galería. La configuración se agrupa según lo que afecta.
### Configuración general de la galería Se aplica a todas las variantes (Carrusel, Pestañas, Cuadrícula, Galería). | Configuración | Qué controla | | ------------- | ------------------------------------------------------------------------ | | **Tamaño** | Ancho y alto generales de la galería. | | **Borde** | Estilo, ancho y color del borde alrededor de la galería. | | **Subtítulo** | Estilo del texto del subtítulo que se muestra en cada elemento. | | **Título** | Estilo del texto del título en cada elemento. | | **Contenido** | Estilo del área principal de contenido dentro de cada elemento. | | **Medios** | Cómo se muestran las imágenes y los videos (ajuste, alineación, tamaño). | ### Variante Carousel Solo se aplica cuando **Variante** está establecido en `Carrusel`. | Configuración | Qué controla | | -------------------------------------------- | --------------------------------------------------------------------- | | **Elemento de presentación** | Fondo, alineación y espaciado de cada elemento del carrusel. | | **Título del elemento de presentación** | Fuente, tamaño y color de los títulos de los elementos. | | **Descripción del elemento de presentación** | Fuente, tamaño y color de las descripciones de los elementos. | | **Imagen de presentación** | Tamaño y borde de las imágenes dentro de cada elemento. | | **Indicador activo de presentación** | Estilo del indicador para el elemento que se está viendo actualmente. | | **Indicador inactivo de presentación** | Estilo de los indicadores para los elementos no activos. | | **Botón de navegación de presentación** | Estilo de los botones de navegación anterior/siguiente. | ### Variante Tabs Solo se aplica cuando **Variante** está establecido en `Pestañas`. | Configuración | Qué controla | | ------------------------------------------------- | ------------------------------------------------------------ | | **Pestaña** | Estilo de cada pestaña individual. | | **Borde de la pestaña** | Borde alrededor de cada pestaña. | | **Borde de la pestaña activa/al pasar el cursor** | Borde para la pestaña activa y el estado de paso del cursor. | | **Fondo de la pestaña** | Color o imagen de fondo de las pestañas. | | **Etiqueta de la pestaña** | Fuente, tamaño y color de las etiquetas de las pestañas. | | **Subtítulo de la pestaña** | Fuente, tamaño y color de los subtítulos de las pestañas. | *** ## Solución de problemas | Problema | Causa | Solución | | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Las imágenes no se previsualizan en Experience Builder, pero se muestran correctamente en el sitio publicado** | Experience Builder no se autentica como usuario del portal, por lo que no puede obtener imágenes de Salesforce Files durante la vista previa. | Comportamiento esperado. Inicie sesión en el sitio publicado como usuario de la comunidad para verificar que las imágenes se rendericen correctamente. | | **Aparece "No preview available" en el modo Manual** | La imagen cargada no se marcó como enlace público, por lo que los usuarios del portal no pueden cargarla. | Vuelva a cargar la imagen y marque **enlace público** al cargarla, o cambie al modo Query, donde se aplican las reglas estándar de uso compartido. | | **El modo Manual le obliga a volver a cargar cada vez que quiera cambiar una imagen** | El modo Manual es un cargador directo: no hace referencia a archivos de Salesforce Files existentes. | Use **Consulta** el modo con ContentVersion o con un objeto personalizado que almacene referencias de archivos. Consulte *Uso de archivos existentes de Salesforce Files como su fuente multimedia* arriba. | | **La galería aparece vacía para los usuarios del portal, pero funciona en la vista previa de Experience Builder** | El perfil del usuario del portal no tiene acceso al objeto consultado ni a los archivos referenciados. | Revise los permisos de objeto del perfil, la seguridad a nivel de campo y el acceso de biblioteca/uso compartido en `ContentVersion` o en el objeto de origen. | | **Las imágenes no se renderizan en absoluto (ni en la vista previa ni en el sitio publicado)** | Media Source está asignado a un campo que no contiene una referencia de archivo válida (un ContentDocumentId que comienza con `069…`, el `Version Data URL` campo en ContentVersion, o una URL pública de imagen). | Verifique qué contiene realmente el campo asignado. Al consultar ContentVersion, use el estándar `Version Data URL` campo. En objetos personalizados, almacene un ContentDocumentId (que comienza con `069…`) y asigne Media Source directamente a ese campo. | | **La galería muestra los títulos correctos, pero todas las imágenes aparecen dañadas** | Media Source está asignado a un campo que no contiene un ContentDocumentId ni una URL válida. | En Data Mappings, confirme que Media Source apunta a un campo ContentDocumentId, una URL de Shepherd o una URL pública de imagen válida. | *** ## Ejemplos de casos de uso ### Ejemplo 1: Carrusel de noticias de clientes {% @arcade/embed url="" flowId="pOjxSsq8rQ3YgZFvjMgr" %} Mantenga a sus clientes informados y comprometidos mostrando sus artículos más recientes directamente en la página de inicio de Experience Cloud. El componente AX Gallery facilita la visualización de un carrusel de noticias dinámico y rico en imágenes que se actualiza automáticamente a medida que se publica nuevo contenido. *** #### **Lo que lograrás** * **Contenido nuevo de un vistazo:** Muestre sus artículos de Knowledge más recientes en la página de inicio, con imágenes, para que los visitantes nunca se pierdan una actualización. * **Navegación sin esfuerzo:** Permita que los clientes recorran las noticias de la empresa en un carrusel limpio y estructurado. * **Filtrado dirigido:** Muestre solo los artículos de News aprovechando un campo personalizado de lista desplegable, manteniendo el carrusel centrado y relevante. *** #### **Antes de empezar** * **`ImageId__c` campo:** Cree un campo de texto en el objeto Knowledge para almacenar el ID de documento de contenido de la imagen de cada artículo. * **`Type__c` campo:** Cree un campo de lista desplegable en el objeto Knowledge para categorizar los artículos, asegurándose de que el **News** valor exista y se aplique a sus artículos. *** #### **Cómo configurarlo** {% stepper %} {% step %} #### **Añade el componente a tu página** * Arrastre el **AX Gallery** componente a la página que desee en Experience Builder. {% endstep %} {% step %} #### **Personalice la visualización del componente** * Establece el **Título** en `Carrusel de noticias`. * Establece el **Subtítulo** en `Explore nuestros artículos semanales`. * Establece el **Número de columnas** en `3`. {% endstep %} {% step %} #### **Configure su fuente de datos** * Cree una nueva consulta en la configuración de la fuente de datos. * Selecciona **Knowledge** como objeto (asegúrese de seleccionar la segunda opción de Knowledge de la lista). * Añada un filtro: **Type\_\_c igual a** `News`. * Establezca el orden de clasificación en **Fecha de creación, descendente** para que sus artículos más recientes aparezcan siempre primero. {% endstep %} {% step %} #### **Configure el mapeo de datos** * Mapa **Título** al objeto Knowledge `Título` campo. * Mapa **Fuente de medios** en `ImageId__c` para traer las imágenes de los artículos. * Establece el **Velocidad de reproducción** en `5`. {% endstep %} {% step %} #### **Previsualiza tu trabajo** * Use la vista previa de Experience Builder para confirmar que su carrusel muestra los artículos, imágenes y diseño correctos antes de publicar. {% endstep %} {% endstepper %} *** ### Ejemplo 2: Galería de productos de clientes {% @arcade/embed url="" flowId="aIu9ZNuteXdewe19LJL0" %} Ofrezca a sus clientes una forma visualmente atractiva de descubrir su catálogo de productos, directamente desde su página de inicio. Al combinar el componente AX Gallery con sus datos de Product, puede crear un carrusel llamativo que destaque los productos más importantes y guíe a los visitantes directamente a las páginas de detalle del producto. *** #### **Lo que lograrás** * **Una muestra visual de productos:** Muestre auriculares destacados en un carrusel rico en imágenes que invite a explorar. * **Navegación fluida:** Permita que los clientes pasen del carrusel directamente a las páginas de detalle de cada producto con facilidad. * **Una experiencia de inicio seleccionada:** Resalte los productos que más importan mostrando solo su catálogo destacado en la página de inicio. *** #### **Antes de empezar** * **`Type__c` campo:** Cree un campo de lista desplegable en el objeto Product2 y asegúrese de que el **Headphone** valor exista, para que pueda filtrar el carrusel hacia los productos correctos. * **`ContentDocumentId__c` campo:** Cree un campo de texto en el objeto Product2 para almacenar la URL de la imagen de cada producto. *** #### **Cómo configurarlo** {% stepper %} {% step %} #### **Añade el componente a tu página** * Arrastre el **AX Gallery** componente a la página que desee en Experience Builder. {% endstep %} {% step %} #### **Personalice la visualización del componente** * Establece el **Título** en `Carrusel de productos`. * Establece el **Subtítulo** en `¡Explore nuestros productos destacados!` * Establece el **Número de columnas** en `3`. {% endstep %} {% step %} #### **Configure su fuente de datos** * Cree una nueva consulta en la configuración de la fuente de datos. * Selecciona **Product** como objeto. {% endstep %} {% step %} #### **Configure el mapeo de datos** * Mapa **Título** a `Nombre del producto` campo. * Mapa **Fuente de medios** en `ContentDocumentId__c` para mostrar la imagen de cada producto. * Establece el **Velocidad de reproducción** en `5`. {% endstep %} {% step %} #### **Previsualiza tu trabajo** * Use la vista previa de Experience Builder para confirmar que sus productos, imágenes y diseño del carrusel aparecen como espera antes de publicar. {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-gallery.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.