Componente Teaser teaser-component
El componente principal Teaser puede mostrar una imagen, un título, texto enriquecido y, opcionalmente, un vínculo a más contenido.
Uso usage
El componente Teaser permite al autor del contenido crear fácilmente un teaser para añadir contenido mediante una imagen, un título o texto enriquecido y vincularlo a más contenido u otras acciones.
El autor de la plantilla puede utilizar el cuadro de diálogo de diseño para definir si las opciones para crear llamadas a acción y agregar vínculos están disponibles, así como para desactivar las distintas opciones de visualización. El autor del contenido puede utilizar el cuadro de diálogo de configuración para establecer una imagen, definir CTA, definir títulos y descripciones y configurar vínculos al teaser individual. Se puede acceder al cuadro de diálogo de edición del Componente Imagen para modificar la imagen del teaser.
Versión y compatibilidad version-and-compatibility
La versión actual del componente Teaser es la versión 2, que se introdujo con la versión 2.18.0 de los componentes principales en febrero de 2022 y se describe en este documento.
La siguiente tabla detalla todas las versiones compatibles del componente, las versiones de AEM con las que son compatibles las versiones del componente y los vínculos a la documentación de versiones anteriores.
Soporte de recursos remotos remote-assets
El componente de teaser (a partir de la versión 2.23.2) admite recursos remotos. Una vez configurado, puede seleccionar recursos desde un servicio remoto para su componente teaser.
Salida del componente de ejemplo sample-component-output
Para experimentar el componente Teaser, así como ver ejemplos de sus opciones de configuración, así como HTML y salida JSON, visite la Biblioteca de componentes.
Detalles técnicos technical-details
La documentación técnica más reciente sobre el componente Teaser se encuentra en GitHub.
Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.
Cuadro de diálogo de configuración configure-dialog
El autor del contenido puede utilizar el cuadro de diálogo de configuración para definir las propiedades del teaser individual. También existe un cuadro de diálogo de edición para modificar la imagen de teaser si se selecciona una.
Pestaña Vínculos links-tab
El título, la descripción y la imagen del teaser se pueden heredar de la página vinculada o de la página vinculada en la primera llamada a la acción. Si no se especifica ni un vínculo ni una llamada a la acción, el título, la descripción y la imagen se heredarán de la página actual.
- Vínculo: este archivo establece un vínculo a una página de contenido, a una URL externa o a un anclaje de página.
- Abrir en ficha nueva: si está activado, el vínculo se abre en una nueva pestaña del explorador.
- Llamada a acción: esta opción permite la vinculación a varios destinos.
- La página vinculada en la primera llamada a la acción se utiliza al heredar el título, la descripción o la imagen del teaser.
Pestaña Texto text-tab
-
Pretítulo: el pretítulo se mostrará antes del título del teaser.
-
Título: texto que se mostrará como el titular del teaser.
- Obtener el título de la página vinculada: cuando se activa, el título se rellena con el título de la página vinculada.
-
Descripción: define una descripción para mostrarla como el subencabezado del teaser.
- Obtener la descripción de la página vinculada: cuando está marcada, la descripción se rellena con la descripción de la página vinculada.
-
ID: esta opción permite controlar el identificador único del componente del HTML y de la capa de datos.
- Si se deja en blanco, se generará automáticamente un ID único que se puede encontrar inspeccionando la página resultante.
- Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
- Cambiar el ID puede afectar al seguimiento de CSS, JS y de la capa de datos.
Pestaña Recurso asset-tab
-
Heredar imagen destacada de la página: utilice la imagen definida en las propiedades de página de la página vinculada o la página actual si no encuentra ninguna.
-
Recurso de imagen: coloque un recurso desde el explorador de recursos o pulse la opción Examinar para cargar desde un sistema de archivos local.
-
Pulse o haga clic en Borrar para anular la selección de la imagen seleccionada actualmente.
-
Haga clic o pulse Seleccionar para abrir el explorador de recursos para seleccionar una imagen.
-
Si Soporte de recursos remotos está habilitado, tiene múltiples opciones para seleccionar un recurso:
- Local selecciona de la biblioteca de recursos de AEM local.
- Remoto selecciona desde una biblioteca de Dynamic Media fuera de su instancia de AEM.
-
-
Pulse o haga clic en Editar para administrar las representaciones del recurso en el editor de recursos.
-
-
Texto alternativo para fines de accesibilidad: este campo le permite definir una descripción de la imagen para los usuarios con discapacidades visuales.
- Heredar texto alternativo de la página: esta opción utiliza la descripción alternativa del valor de recurso vinculado de los
dc:descriptionmetadatos en DAM o de la página actual si no hay ningún recurso vinculado.
- Heredar texto alternativo de la página: esta opción utiliza la descripción alternativa del valor de recurso vinculado de los
-
No proporcionar texto alternativo: esta opción marca la imagen para que sea ignorada por las tecnologías de asistencia, como lectores de pantalla, en casos en los que la imagen es puramente decorativa o no transmite información adicional a la página.
Pestaña Estilos styles-tab-edit
El componente Teaser es compatible con el sistema de estilos de AEM.
Utilice la lista desplegable para seleccionar los estilos que desea aplicar al componente. Las selecciones realizadas en el cuadro de diálogo de edición tienen el mismo efecto que las seleccionadas en la barra de herramientas de componentes.
Los estilos deben configurarse para este componente en el cuadro de diálogo de diseño para que el menú desplegable esté disponible.
Cuadro de diálogo de edición edit-dialog
El componente Teaser delega el procesamiento de imágenes en el Componente de imagen. Por lo tanto, el cuadro de diálogo de edición del componente de imagen está disponible para que el autor del contenido manipule la imagen de teaser.
Cuadro de diálogo de diseño design-dialog
El cuadro de diálogo de diseño permite al autor de la plantilla definir las opciones de teaser que tiene el autor de contenido al utilizar este componente.
Pestaña Teaser teaser-tab
-
Llamadas a la acción
- Deshabilitar las llamadas a la acción: oculta la opción Llamadas a la acción para autores de contenido
-
Elementos
- Ocultar pretítulo: oculta la opción Pretítulo para autores de contenido
- Ocultar título: oculta la opción Título para autores de contenido
- Cuando se selecciona, el Tipo de título está oculto
- Ocultar descripción: oculta la opción Descripción para autores de contenido
-
Tipo de título predeterminado: define la etiqueta H que se utilizará en el título del teaser.
-
Delegado de imágenes: visualización informativa que indica a qué componente delega el teaser la administración de las imágenes.
Pestaña Estilos styles-tab
El componente Teaser es compatible con el sistema de estilos de AEM.
Capa de datos del cliente de Adobe data-layer
El componente Teaser es compatible con la capa de datos del cliente de Adobe.