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.
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.
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.
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.
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.
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
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).Aplique un filtro que identifique qué registros deben aparecer (por convención de título, etiqueta, campo personalizado, valor de lista desplegable, etc.).
En Mapeos de datos, asigne Fuente de medios según su objeto de origen :
Consultando ContentVersion : asigne Media Source al estándar
Version Data URLcampo.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.
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
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).
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.
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.
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
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
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__ccampo: 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__ccampo: 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
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.
Ejemplo 2: Galería de productos de clientes
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__ccampo: 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__ccampo: Cree un campo de texto en el objeto Product2 para almacenar la URL de la imagen de cada producto.
Cómo configurarlo
Última actualización
¿Te fue útil?