El componente de imagen del componente principal es una función de componente de imagen adaptable que se edita in situ.
El componente Imagen permite colocar fácilmente los recursos de imagen y ofrece opciones de edición in situ. Incluye selección de imágenes adaptables con carga diferida, así como recorte para el autor del contenido.
El autor de la plantilla puede definir los anchos de imagen permitidos, el recorte y la configuración adicional en el cuadro de diálogo de diseño. El editor de contenido puede cargar o seleccionar recursos en el cuadro de diálogo de configuración y recortar la imagen en el cuadro de diálogo de edición. Para mayor comodidad, también está disponible una modificación simple in situ de la imagen.
Este documento describe la versión 1 del componente de imagen, introducido originalmente con la versión 1.0.0 de los componentes principales con AEM 6.3.
La siguiente tabla enumera la compatibilidad de v1 del componente de imagen.
Versión de AEM | Componente de imagen v1 |
---|---|
6.3 | Compatible |
6.4 | Compatible |
Este documento describe la versión 1 del componente de imagen.
Para obtener más información sobre la versión actual del componente de imagen, consulte el documento Componente de imagen.
El siguiente es un ejemplo tomado de We.Retail.
<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
<noscript data-cmp-image="{"smartImages":[],"smartSizes":[],"lazyEnabled":true}">
<img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg?lang=es" alt="Surfboard"/>
</noscript>
</div>
"image": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"smartSizes": [],
"smartImages": [],
"lazyEnabled": true,
"src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
":type": "weretail/components/content/image"
}
La exportación de JSON desde los componentes principales requiere la versión 1.1.0 de los componentes principales. Consulte la información de compatibilidad para los componentes principales v1 para obtener más información.
Además del cuadro de diálogo de edición y cuadro de diálogo de diseño estándar, el componente de imagen ofrece un cuadro de diálogo de configuración en el que la propia imagen se define junto con su descripción y propiedades básicas.
Recurso de imagen
La imagen es decorativa : compruebe si la tecnología de asistencia debe ignorar la imagen y, por lo tanto, no requiere un texto alternativo. Esto solo se aplica a imágenes decorativas.
Texto alternativo - Alternativa textual del significado o función de la imagen, para lectores con deficiencias visuales.
Vínculo
Pie de ilustración : la información adicional sobre la imagen que se muestra debajo de la imagen es predeterminada.
Mostrar rótulo como elemento emergente : si se selecciona, el rótulo no se muestra debajo de la imagen, sino como una ventana emergente que muestran algunos exploradores al pasar el ratón por encima de la imagen.
El cuadro de diálogo de edición permite al autor del contenido recortar, modificar el mapa de lanzamiento y ampliar la imagen.
Iniciar recorte
Al seleccionar esta opción, se abre una lista desplegable para las proporciones de recorte predefinidas.
Una vez seleccionada una opción de recorte, utilice los controladores azules para cambiar el tamaño del recorte en la imagen.
Girar a la derecha
Utilice esta opción para girar la imagen 90° a la derecha (en el sentido de las agujas del reloj).
Inicio
Utilice esta opción para aplicar un mapa de lanzamiento a la imagen. Al seleccionar esta opción, se abre una nueva ventana que permite al usuario seleccionar la forma del mapa:
Agregar mapa rectangular
Agregar mapa circular
Agregar mapa de polígono
Una vez seleccionada una forma de mapa, se superpone a la imagen para permitir el cambio de tamaño. Arrastre y suelte los controladores de tamaño azules para ajustar la forma.
Después de cambiar el tamaño del mapa de lanzamiento, haga clic en él para abrir una barra de herramientas flotante y definir la ruta del vínculo.
Utilice la opción Selector de rutas para seleccionar una ruta en AEM
Si la ruta no está en AEM, utilice la dirección URL absoluta. Las rutas no absolutas se interpretarán en relación con AEM.
Texto alternativo
Descripción alternativa del destino de la ruta
Destino
Toque o haga clic en la marca de verificación azul para guardar, la x negra para cancelar y la papelera roja para eliminar el mapa.
Restablecer zoom
Si la imagen ya se ha ampliado, utilice esta opción para restablecer el nivel de zoom.
Abrir deslizador de zoom
Utilice esta opción para mostrar un control deslizante para controlar el nivel de zoom de la imagen.
El editor in situ también se puede utilizar para modificar la imagen. Debido a las limitaciones de espacio, solo las opciones básicas están disponibles en línea. Para obtener opciones de edición completas, utilice el modo de pantalla completa.
Las operaciones de edición de imágenes (recortar, voltear, rotar) no son compatibles con las imágenes GIF. Los cambios que se hagan en el modo de edición a los GIF no se mantendrán.
El cuadro de diálogo de diseño permite al autor de la plantilla definir las cargas de recorte, carga y rotación que tiene el autor del contenido al utilizar este componente.
En la pestaña Main puede definir una lista de anchuras permitidas en píxeles para que la imagen cargue automáticamente la anchura más adecuada de la lista.
Toque o haga clic en el botón Add para añadir otro tamaño.
De forma predeterminada, la carga de imágenes se aplaza hasta que se vuelve visible. Seleccione la opción Disable lazy loading para cargar las imágenes al cargar la página.
En la pestaña Features puede definir qué opciones están disponibles para los autores de contenido al utilizar el componente, incluidas las opciones de carga, orientación y recorte.
Origen
Seleccione la opción Permitir carga de recursos desde el sistema de archivos para permitir que los autores de contenido carguen imágenes desde su equipo local. Para obligar a los autores de contenido a seleccionar solo recursos de AEM, anule la selección de esta opción.
Orientación
La opción Flip está desactivada de forma predeterminada. Al activarlo, se mostrarán los botones Girar verticalmente y Girar horizontalmente en el cuadro de diálogo de edición del componente de imagen, pero la función no es compatible actualmente con AEM y los cambios realizados con estas opciones no se mantendrán.
Recortar
Seleccione la opción Permitir recorte para permitir que el autor del contenido recorte la imagen en el componente en el cuadro de diálogo de edición.
Tenga en cuenta que en AEM, las relaciones de aspecto de recorte se definen como height/width. Esto es distinto de la definición convencional de anchura/altura y se realiza por motivos de compatibilidad con sistemas anteriores. Los autores de contenido no notarán ninguna diferencia siempre que proporcione un nombre claro de la relación, ya que el nombre se muestra en la interfaz de usuario y no en la propia relación.
La documentación técnica más reciente sobre el componente de imagen se encuentra en GitHub.
Todo el proyecto de componentes principales se puede descargar desde GitHub.
Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.