# AX - Gallery ## Descripción general **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), pestañas (secciones organizadas), cuadrícula (multicolumna) o galería (exposición de imágenes). Úsalo 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. Configura el estilo de diseño, la navegación y las fuentes de imágenes en Experience Builder sin código.
*** ## Primeros pasos Usa este sencillo tutorial para aprender los conceptos básicos del componente Gallery y empezar a crear tus casos de uso. {% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="" %} *** ## Conectar con datos de Salesforce La **fuente de datos** es donde defines el contenido de tu galería. AX - Gallery admite dos tipos de fuentes de datos: **Manual** y **Consulta**.
| Tipo de fuente de datos | Descripción | Cuándo usarlo | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Manual** | Sube o introduce cada elemento de la galería directamente en el componente. Cada imagen añadida mediante el selector Media Source crea un **nuevo** archivo en tu biblioteca de Salesforce Files. | Galerías puntuales con contenido estático que rara vez cambia (hero de página de destino, exposición fija de productos, demos). | | **Consulta** | Obtén elementos dinámicamente de 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 regularmente o ser gestionado por un equipo no técnico fuera de Experience Builder. | {% hint style="info" %} #### **Elegir entre Manual y Query** El modo Manual crea un **archivo totalmente nuevo** en la biblioteca cada vez que subes una imagen. No hace referencia a archivos que ya existen en Salesforce Files. Si necesitas reutilizar o actualizar el contenido de tu galería sin volver a abrir el panel Properties, usa **Consulta** en su lugar. {% endhint %} #### Compartición del modelo con Avonni AX - Gallery **Cumplimiento de las reglas de compartición de datos de Salesforce:** * **Respeto de la configuración de la organización:** Los componentes de Avonni cumplen plenamente con las configuraciones de compartición de datos y de acceso ya existentes en tu organización de Salesforce. * **Política de no interferencia:** Estos componentes no alteran ni afectan de ninguna manera las reglas de compartición de datos preestablecidas. * **Visibilidad y acceso controlados:** La capacidad de ver e interactuar con registros a través de los componentes de Avonni está gobernada por la configuración de compartición y los permisos de usuario definidos por tu organización *** ### Usar archivos de Salesforce existentes como tu fuente Media Source La **Media Source** en AX - Gallery es flexible con lo que le proporcionas. Puedes asignarle una URL, un ContentDocumentId o 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 mantienes una galería apuntando a archivos de la **biblioteca de Salesforce Files** sin volver a subirlos nunca a través del componente. | Qué pones en Media Source | Qué renderiza la galería | | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | Un campo que contiene un **ContentDocumentId** (empieza con `069…`) | Se resuelve y muestra la última versión del archivo. El componente detecta automáticamente `069…` IDs. | | El estándar **VersionDataURL** campo al consultar `ContentVersion` | El archivo se descarga y se muestra. Recomendado cuando tu objeto de origen es ContentVersion. | | Una **URL 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 URLs 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 la **fuente de datos**, selecciona **Consulta** y elige tu objeto de origen (`ContentVersion`, un objeto personalizado que contiene referencias a archivos o cualquier objeto con un campo de imagen). 2. Aplica un filtro que identifique qué registros deben aparecer (por convención de título, etiqueta, campo personalizado, valor de lista de selección, etc.). 3. En **Asignaciones de datos**, asigna **Media Source** según tu objeto de origen : * **Consultando ContentVersion :** asigna Media Source al estándar `Version Data URL` campo. * **Consultando un objeto personalizado con un campo ContentDocumentId :** asigna Media Source directamente a ese campo (el componente detecta automáticamente `069…` IDs y los resuelve). * **Consultando cualquier objeto con un campo de URL de imagen completa :** asigna Media Source directamente a ese campo. Una vez configurado, actualizar el contenido de tu galería es tan sencillo como reemplazar los archivos en la biblioteca de Salesforce Files o actualizar el campo de referencia en tus registros. {% hint style="info" %} #### Vista previa de Experience Builder Es posible que las imágenes que apuntan a Salesforce Files no se muestren en la vista previa de Experience Builder porque el constructor no se autentica como usuario del portal. Se mostrarán correctamente una vez que inicies sesión en el sitio publicado como usuario de la comunidad {% endhint %} *** ## Establecer una variante ### **Carrusel** La variante Carrusel ofrece una forma dinámica y atractiva de mostrar tu contenido, imágenes o tarjetas. Está diseñada para mostrar elementos secuencialmente en formato de presentación, lo que la convierte en una excelente opción para destacar contenido destacado, imágenes de productos o anuncios importantes.
**Cuándo usarlo:** Utiliza la variante Carrusel cuando quieras: * Captar la atención del usuario con una presentación visualmente atractiva. * Mostrar varios elementos o imágenes de manera eficiente en el espacio. * Crear banners rotativos o secciones de contenido destacado en tu sitio. **Características:** * **Controles de navegación:** Navega por el carrusel con controles intuitivos como botones de flecha o puntos de paginación. * **Opción de reproducción automática:** Configura el carrusel para que recorra los elementos automáticamente, con la posibilidad de pausar y reanudar. * **Apariencia personalizable:** Adapta el aspecto y la sensación del carrusel al diseño de tu sitio ajustando elementos como los efectos de transición y la duración de visualización. ### **Pestañas** La variante Pestañas introduce un enfoque organizado y tabulado para la presentación del contenido. Esta variante es ideal para categorizar información, ofreciendo un diseño limpio y estructurado que permite a los usuarios navegar rápidamente y acceder a diferentes secciones de contenido.
**Cuándo usarlo:** Considera la variante Pestañas cuando necesites: * 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 manera fácil de usar. **Características:** * **Contenido segmentado:** Organiza tu contenido en pestañas claramente definidas, facilitando que los usuarios encuentren y vean distintas secciones. * **Navegación fácil de usar:** Permite a los usuarios cambiar de pestaña sin problemas, garantizando una experiencia fluida e intuitiva. * **Diseño personalizable:** Adapta la apariencia de las pestañas para alinearla con tu marca y la estética del sitio modificando elementos como las etiquetas de las pestañas, el diseño y los esquemas de color. ### **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 usarlo:** Ideal para mostrar una colección de elementos donde se desea darles el mismo énfasis, como por ejemplo: * Listados de productos * Perfiles de miembros del equipo * Vistas previas de publicaciones del blog **Características** * Número de columnas personalizable * Posibilidad de definir el espaciado (gap) 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 centrado en lo visual que destaca las imágenes de forma prominente. **Cuándo usarlo:** Ideal para destacar contenido basado en imágenes, como: * Portafolios de fotografía * Galerías de productos * Contenido destacado centrado en imágenes **Características** * Enfoque en imágenes grandes y de alta calidad * Opciones para incluir subtítulos o funcionalidad de lightbox para ampliar las imágenes * Posibilidad de diseños creativos y efectos al pasar el cursor *** ## Interacciones La sección "Enlazar a" determina qué ocurre cuando un usuario hace clic en un elemento de tu Avonni Gallery. Úsala para dirigir a los usuarios a páginas detalladas, abrir contenido nuevo o activar otras acciones. **Ejemplo:** * Por ejemplo, muestra casas destacadas en una galería y permite a los usuarios hacer clic en cada imagen para ver más detalles en una página aparte. *** ## Apariencia de estilo Los atributos de estilo te 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 mostrado 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. | | **Medio** | Cómo se muestran las imágenes y videos (ajuste, alineación, tamaño). | ### Variante Carrusel Solo se aplica cuando **Variante** está configurado como `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 del 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 Pestañas Solo se aplica cuando **Variante** está configurado como `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 pestaña activa/al pasar el cursor** | Borde de la pestaña activa y del estado al pasar el cursor. | | **Fondo de la pestaña** | Color o imagen de fondo para 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. | *** ## Resolució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. Inicia sesión en el sitio publicado como usuario de la comunidad para verificar que las imágenes se muestran correctamente. | | **"No hay vista previa disponible" aparece en modo Manual** | La imagen cargada no se marcó como enlace público, por lo que los usuarios del portal no pueden cargarla. | Vuelve a subir la imagen y marca **Enlace público** en el momento de la carga, o cambia al modo Query, donde se aplican las reglas estándar de compartición. | | **El modo Manual te obliga a volver a subir cada vez que quieres cambiar una imagen** | El modo Manual es un cargador directo: no hace referencia a Salesforce Files existentes. | Usa **Consulta** modo con ContentVersion o con un objeto personalizado que contenga referencias a archivos. Consulta *Usar archivos de Salesforce existentes como tu fuente Media Source* arriba. | | **La galería está 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 o a los archivos referenciados. | Revisa los permisos de objeto del perfil, la seguridad a nivel de campo y el acceso a la biblioteca/compartición en `ContentVersion` o en el objeto de origen. | | **Las imágenes no se muestran en absoluto (ni en la vista previa ni en el sitio publicado)** | Media Source está asignado a un campo que no contiene una referencia válida de archivo (ContentDocumentId que empieza con `069…`, el `Version Data URL` campo en ContentVersion, o una URL pública de imagen). | Verifica qué contiene realmente el campo asignado. Al consultar ContentVersion, usa el estándar `Version Data URL` campo. Para objetos personalizados, almacena un ContentDocumentId (que empiece con `069…`) y asigna Media Source directamente a ese campo. | | **La galería muestra los títulos correctos pero todas las imágenes están rotas** | Media Source está asignado a un campo que no contiene un ContentDocumentId ni una URL válida. | En Data Mappings, confirma que Media Source apunta a un campo ContentDocumentId, una URL shepherd o una URL pública de imagen válida. | *** ## Ejemplos de casos de uso ### Ejemplo 1: carrusel de noticias para clientes {% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="" %} Mantén a tus clientes informados y comprometidos mostrando tus artículos más recientes directamente en la página de inicio de Experience Cloud. El componente AX Gallery facilita mostrar 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 conseguirás** * **Contenido nuevo de un vistazo:** Muestra tus artículos de Knowledge más recientes en la página de inicio, con imágenes, para que los visitantes no se pierdan ninguna actualización. * **Exploración sin esfuerzo:** Permite a los clientes desplazarse por las noticias de la empresa en un carrusel limpio y estructurado. * **Filtrado dirigido:** Muestra solo artículos de News aprovechando un campo personalizado de lista de selección, manteniendo el carrusel centrado y relevante. *** #### **Antes de empezar** * **`ImageId__c` campo:** Crea 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:** Crea un campo de lista de selección en el objeto Knowledge para categorizar los artículos, asegurándote de que el **News** valor exista y se aplique a tus artículos. *** #### **Cómo configurarlo** {% stepper %} {% step %} #### **Añade el componente a tu página** * Arrastra el **AX Gallery** componente a la página que desees en Experience Builder. {% endstep %} {% step %} #### **Personaliza la visualización del componente** * Configura el **Título** a `Carrusel de noticias`. * Configura el **Subtítulo** a `Explora nuestros artículos semanales`. * Configura el **Número de columnas** a `3`. {% endstep %} {% step %} #### **Configura tu fuente de datos** * Crea una nueva consulta en la configuración de la fuente de datos. * Selecciona **Knowledge** como objeto (asegúrate de seleccionar la segunda opción de Knowledge de la lista). * Añade un filtro: **Type\_\_c es igual a** `News`. * Establece el orden de clasificación en **Fecha de creación, descendente** para que tus artículos más nuevos aparezcan siempre primero. {% endstep %} {% step %} #### **Configura la asignación de datos** * Asigna **Título** al Knowledge `Título` campo. * Asigna **Media Source** a `ImageId__c` para incorporar las imágenes de los artículos. * Configura el **Velocidad de reproducción** a `5`. {% endstep %} {% step %} #### **Vista previa de tu trabajo** * Usa la vista previa de Experience Builder para confirmar que tu carrusel muestra los artículos, imágenes y diseño correctos antes de publicar. {% endstep %} {% endstepper %} *** ### Ejemplo 2: galería de productos para clientes {% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="" %} Ofrece a tus clientes una forma visualmente atractiva de descubrir tu catálogo de productos, directamente desde tu página de inicio. Al combinar el componente AX Gallery con tus datos de Product, puedes crear un carrusel llamativo que destaque los productos presentados y lleve a los visitantes directamente a las páginas de detalle del producto. *** #### **Lo que conseguirás** * **Una presentación visual de productos:** Muestra auriculares destacados en un carrusel rico en imágenes que fomente la exploración. * **Navegación fluida:** Permite a los clientes pasar del carrusel directamente a las páginas individuales de detalle del producto con facilidad. * **Una experiencia de inicio seleccionada:** Destaca los productos que más importan mostrando solo tu catálogo destacado en la página de inicio. *** #### **Antes de empezar** * **`Type__c` campo:** Crea un campo de lista de selección en el objeto Product2 y asegúrate de que el **Headphone** valor exista, para que puedas filtrar el carrusel a los productos adecuados. * **`ContentDocumentId__c` campo:** Crea 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** * Arrastra el **AX Gallery** componente a la página que desees en Experience Builder. {% endstep %} {% step %} #### **Personaliza la visualización del componente** * Configura el **Título** a `Carrusel de productos`. * Configura el **Subtítulo** a `¡Explora nuestros productos destacados!` * Configura el **Número de columnas** a `3`. {% endstep %} {% step %} #### **Configura tu fuente de datos** * Crea una nueva consulta en la configuración de la fuente de datos. * Selecciona **Product** como objeto. {% endstep %} {% step %} #### **Configura la asignación de datos** * Asigna **Título** a `Nombre del producto` campo. * Asigna **Media Source** a `ContentDocumentId__c` para mostrar la imagen de cada producto. * Configura el **Velocidad de reproducción** a `5`. {% endstep %} {% step %} #### **Vista previa de tu trabajo** * Usa la vista previa de Experience Builder para confirmar que tus productos, imágenes y el diseño del carrusel aparecen como se espera antes de publicar. {% endstep %} {% endstepper %} --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-gallery.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.