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 imagen adaptable y un comportamiento interactivo con la carga diferida para el visitante de página, así como una colocación y recorte sencillos de la imagen para el autor del contenido.
El autor de la plantilla puede definir los anchos de la imagen, así como 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.
El componente de imagen incorpora funciones interactivas 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. A continuación, el componente de imagen cargará automáticamente la anchura correcta para que se muestre en función del tamaño de la ventana del navegador. A medida que se 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 esté visible en el navegador, lo que aumenta la capacidad de respuesta de las páginas.
El componente Imagen (a partir de versión 2.13.0) admite recursos de Dynamic Media. Cuando están activadas, estas funciones oferta la capacidad de agregar recursos de imagen de Dynamic Media con una simple operación de arrastrar y soltar o a través del navegador de recursos, como lo haría con cualquier otra imagen. Además, también se admiten modificadores de imagen, ajustes preestablecidos de imagen y recortes inteligentes.
Las experiencias web creadas con componentes principales no pueden incluir funciones de imagen de medios dinámicos enriquecidas, potentes, robustas, de alto rendimiento y multiplataforma.
La versión actual del componente de imagen es v2, que se introdujo con la versión 2.0.0 de los componentes principales en enero de 2018, y se describe en este documento.
En la tabla siguiente se detallan todas las versiones compatibles del componente, las versiones 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 |
---|---|---|---|
v2 | Compatible | Compatible | Compatible |
v1 | Compatible | Compatible | - |
Para obtener más información sobre las versiones y versiones de los componentes principales, consulte el documento Versiones de componentes principales.
Los gráficos vectoriales escalables (SVG) son compatibles con el componente 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 navegador ejecute secuencias de comandos incrustadas en el archivo SVG.
La compatibilidad con SVG requiere la versión 2.1.0 de los componentes principales o superior, junto con el service pack 2 para AEM 6.4 o superior, a fin de 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.
Encontrará más detalles sobre el desarrollo de los componentes principales en la documentación para desarrolladores de los componentes principales.
El componente Imagen admite microdatos de esquema.org.
Además del cuadro de diálogo de edición y cuadro de diálogo de diseño estándar, el componente de imagen oferta un cuadro de diálogo de configuración donde la imagen misma se define junto con su descripción y propiedades básicas.
&
, independientemente del tipo de ajuste preestablecido seleccionado.dc:description
metadatos en DAM.dc:title
metadatos en DAM.El ajuste preestablecido de imagen de recorte inteligente son opciones que se excluyen mutuamente. Si un autor necesita utilizar un ajuste preestablecido de imagen junto con una representación de recorte inteligente, deberá utilizar los modificadores de imagen para agregar ajustes preestablecidos manualmente.
El cuadro de diálogo de edición permite al autor recortar, modificar el mapa de inicio y aplicar zoom a la imagen.
Las funciones de recorte, rotación y zoom no se aplican a los recursos de Dynamic Media. Si las características de Dynamic Media están habilitadas, cualquier edición de este tipo en los recursos de Dynamic Media debe realizarse a través del Cuadro de diálogo de configuración.
Recorte de inicio
Al seleccionar esta opción, se abre una lista desplegable para las proporciones de recorte predefinidas.
Una vez seleccionada la opción de recorte, utilice los controladores azules para ajustar el tamaño del recorte en la imagen.
Girar a la derecha
Utilice esta opción para rotar la imagen 90° hacia la derecha (en el sentido de las agujas del reloj).
Voltear horizontalmente
Utilice esta opción para voltear la imagen horizontalmente o girar la imagen 180° a lo largo del eje y.
Voltear verticalmente
Utilice esta opción para voltear la imagen verticalmente o girar la imagen 180° a lo largo del eje x.
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 deslizador para controlar el nivel de zoom de la imagen.
El editor in-situ también puede utilizarse para modificar la imagen. Debido a las limitaciones de espacio, solo las opciones básicas están disponibles en línea. Para las 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 realicen en el modo de edición a GIF no se mantendrán.
El cuadro de diálogo de diseño permite al autor de la plantilla definir las opciones de recorte, carga, rotación y carga que tiene el autor del contenido al utilizar este componente.
En la ficha Main 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 Imagen.
Además, puede definir qué opciones generales de componente se desactivan o se desactivan automáticamente cuando el autor agrega el componente a una página.
En la ficha Funciones puede definir las opciones 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 la carga de recursos desde el sistema de archivos para permitir a los autores de contenido cargar imágenes desde su equipo local. Para obligar a los autores de contenido a seleccionar solo recursos de AEM, desactive esta opción.
Orientación
RotarUtilice esta opción para permitir que el autor del contenido utilice la variable
Opción Girar a la derecha.
VoltearUtilice esta opción para permitir que el autor del contenido utilice la variable
Cambiar horizontalmente y voltear verticalmente.
La opción Voltear está deshabilitada de forma predeterminada. Al habilitarlo, se mostrarán los botones Voltear verticalmente y Voltear horizontalmente en el cuadro de diálogo de edición del componente de imagen, aunque la función no se admite actualmente en AEM y no se conservarán los cambios realizados con estas opciones.
Recortar
Seleccione la opción Permitir recortar 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 altura/anchura. 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 tendrán en cuenta 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 relación misma.
El componente Imagen admite el sistema de estilo AEM .
El componente de imagen utiliza el servlet de imagen adaptable del componente principal. El servicio de imágenes adaptable es responsable del procesamiento y la transmisión de imágenes y puede ser utilizado por los desarrolladores en sus personalizaciones de los componentes principales.
Las solicitudes condicionales mediante el encabezado Last-Modified
son compatibles con el servlet de imagen adaptable, pero el almacenamiento en caché del encabezado Last-Modified
debe habilitarse en Dispatcher.
La configuración de despachante de ejemplo del Arquetipo de proyecto de AEM ya contiene esta configuración.