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 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 una mayor comodidad, también está disponible una modificación simple in situ de la imagen.
Este documento describe la versión 2 del componente de Imagen, que se introdujo con la versión 2.0.0 de los componentes principales en enero de 2018.
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 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 funciona con el servlet de imagen adaptable. Consulte el documento Servlet de imagen adaptable para obtener más información sobre cómo funciona.
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.
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.
Además del cuadro de diálogo de edición y del 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.
&
, independientemente de los tipos de ajustes preestablecidos seleccionados.dc:description
en DAM.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 cuadro de diálogo de edición permite al autor del contenido recortar, modificar el mapa de lanzamiento y ampliar 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 los recursos de Dynamic Media debe realizarse a través del Cuadro de diálogo de configuración.
Iniciar recorte
Al seleccionar esta opción, se abrirá 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).
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 del 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, girar) 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 opciones de recorte, carga y rotación que tiene el autor del contenido al utilizar este componente.
En la pestaña Principal 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.
Además, puede definir qué opciones generales de componentes se desactivan o se desactivan automáticamente cuando el autor agregue el componente a una página.
Consulte el documento Servlet de imagen adaptable para obtener sugerencias y optimizar la selección de representaciones definiendo cuidadosamente las anchuras.
En la pestaña Características 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 la 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
Rotar
Utilice esta opción para permitir que el autor de contenido utilice la opción de
Girar a la derecha.
Voltear
Utilice esta opción para permitir que el autor de contenido utilice las opciones
Voltear horizontalmente y voltear verticalmente.
La opción Voltear está desactivada de forma predeterminada. Al activarla, se mostrarán los botones Voltear verticalmente y Voltear 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 Activar 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 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.
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.