El componente de imagen del componente principal es un componente de imagen adaptable que incluye la edición in situ.
El componente de imagen presenta una selección de imágenes adaptativa y un comportamiento interactivo con carga diferida para el visitante de la página, así como una ubicación y un recorte sencillos de la imagen para el autor del contenido.
El autor de la plantilla puede definir las anchuras de la imagen y la configuración adicional en el cuadro de diálogo de diseño. El editor de contenido puede cargar o seleccionar activos en el cuadro de diálogo de configuración.
La versión actual del componente de Imagen es la versión 3, 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.
Versión del componente | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
Versión 3 | - | Compatible | Compatible |
Versión 2 | Compatible | Compatible | Compatible |
Versión 1 | Compatible | Compatible | Compatible |
Para obtener más información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.
El componente de imagen incluye funciones adaptables sólidas listas para usar. En el nivel de plantilla de página, se puede utilizar el cuadro de diálogo de diseño para definir los anchos predeterminados del recurso de imagen. El componente de imagen cargará automáticamente la anchura correcta para mostrarla según el tamaño de la ventana del explorador. A medida que cambia el tamaño de la ventana, el componente de imagen carga dinámicamente el tamaño de imagen correcto sobre la marcha. No es necesario que los desarrolladores de componentes se preocupen por definir consultas de medios personalizadas, ya que el componente de imagen ya está optimizado para cargar el contenido.
Además, el componente de imagen admite la carga diferida para aplazar la carga del recurso de imagen real hasta que sea visible en el explorador, lo que aumenta la capacidad de respuesta de las páginas.
El componente de imagen (a partir de la versión 2.13.0) admite recursos de Dynamic Media. Cuando están habilitadas, estas funciones permiten agregar recursos de imagen de Dynamic Media con tan solo arrastrar y soltar o mediante el explorador de recursos como lo haría con cualquier otra imagen. Además, también se admiten modificadores de imagen, ajustes preestablecidos de imagen y cultivos inteligentes.
Las experiencias web creadas con los componentes principales pueden ofrecer funciones de imagen de Dynamic Media enriquecidas, potentes, sólidas y de alto rendimiento en varias plataformas.
Los gráficos vectoriales escalables (SVG) son compatibles con el componente de imagen.
Por motivos de seguridad, el Editor de imágenes nunca llama directamente al SVG original. Se llama a través de <img src=“path-to-component”>
. Esto evita que el explorador ejecute cualquier script incrustado en el archivo SVG.
La compatibilidad con SVG requiere la versión 2.1.0 de los componentes principales o superiores junto con el Service Pack 2 para AEM 6.4 o superior para admitir las funciones del editor de imágenes dentro de AEM.
Para experimentar el componente de imagen y ver ejemplos de sus opciones de configuración, así como la salida HTML y JSON, visite la Biblioteca de componentes.
La documentación técnica más reciente sobre el componente de imagen 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.
El componente de imagen admite microdatos schema.org.
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.
Heredar imagen destacada de la página: esta opción utiliza la imagen destacada de la página vinculada o la imagen destacada de la página actual si la imagen no está vinculada.
Texto alternativo para fines de accesibilidad: este campo le permite definir una descripción de la imagen para los usuarios con deficiencias visuales.
dc:description
metadatos en DAM o de la página actual si no hay ningún recurso vinculado.Recurso de imagen
No proporcionar texto alternativo: esta opción marca la imagen que tecnologías de asistencia ignoran, como lectores de pantalla, en casos en los que la imagen es puramente decorativa o no transmite información adicional a la página.
&
, independientemente de los tipos de ajustes preestablecidos seleccionados.dc:title
de DAM.El recorte inteligente y los ajustes preestablecidos de imagen son opciones que se excluyen mutuamente. Si un autor necesita utilizar un ajuste preestablecido de imagen junto con una representación de recorte inteligente, el autor deberá utilizar los Modificadores de imagen para añadir ajustes preestablecidos manualmente.
El componente Imagen 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.
Puede definir una lista de anchuras en píxeles para la imagen y el componente cargará automáticamente la anchura más adecuada en función del tamaño del explorador. Esta es una parte importante de las funciones adaptables del componente de imagen.
Consulte el documento Servlet de imagen adaptable para obtener sugerencias para optimizar la selección de representaciones definiendo cuidadosamente los anchos.
El componente Imagen es compatible con el sistema de estilos de AEM.
El componente de imagen es compatible con la capa de datos del cliente de Adobe.