Componente de imagen

El componente de imagen del componente principal es un componente de imagen adaptable que incluye la edición in-situ.

Uso

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.

Características interactivas

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.

Compatibilidad con Dynamic Media

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.

Versión y compatibilidad

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.

Compatibilidad con SVG

Los gráficos vectoriales escalables (SVG) son compatibles con el componente Imagen.

• Se admiten la función de arrastrar y soltar un recurso SVG desde DAM y la carga de un archivo SVG desde un sistema de archivos local.
• El servlet de imagen adaptable transmite el archivo SVG original (se omiten las transformaciones).
• Para una imagen SVG, las "imágenes inteligentes" y los "tamaños inteligentes" se establecen en una matriz vacía en el modelo de imagen.

Seguridad

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.

Salida de componente de muestra

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.

Detalles técnicos

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.

Configurar cuadro de diálogo

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.

Ficha Recurso

• Recurso de imagen
  • Suelte un recurso del navegador de recursos o toque la opción examinar para cargarlo desde un sistema de archivos local.
  • Toque o haga clic en Borrar para deseleccionar la imagen seleccionada actualmente.
  • Toque o haga clic en Editar para administrar las representaciones del recurso en el editor de recursos.

Ficha Metadatos

• Tipo de ajuste preestablecido: define los tipos de ajustes preestablecidos de imagen disponibles, ya sea de ajuste preestablecido de imagen o de recorte ​​inteligente, y solo está disponible cuando están habilitadas las funciones de medios dinámicos .
  • Ajuste preestablecido de imagen: cuando se selecciona Tipo de ajuste preestablecido de ajustes preestablecidos de imagen, el menú desplegable Ajustes preestablecidos de imagen está disponible, lo que permite seleccionar entre los ajustes preestablecidos de Dynamic Media disponibles. Solo está disponible si se han definido ajustes preestablecidos para el recurso seleccionado.
  • Recorte inteligente: cuando se selecciona Tipo de recorte inteligente preestablecido, la opción de recorte inteligente desplegable ​​Representación está disponible, lo que permite seleccionar las representaciones disponibles del recurso seleccionado. Solo está disponible si se definen representaciones para el recurso seleccionado.
  • Modificadores de imagen: los comandos de servicio de imágenes de Dynamic Media adicionales se pueden definir aquí separados por &, independientemente del tipo de ajuste preestablecido seleccionado.
• 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.
  • Obtener texto alternativo de DAM : cuando se selecciona, el texto alternativo de la imagen se rellena con el valor de los dc:description metadatos en DAM.
• Rótulo : información adicional sobre la imagen, que se muestra debajo de la imagen de forma predeterminada.
  • Obtener rótulo de DAM : al activarlo, el texto del rótulo de la imagen se rellenará con el valor de los dc:title metadatos en DAM.
  • Mostrar rótulo como elemento emergente : al activarlo, el rótulo no se mostrará debajo de la imagen, sino como elemento emergente que muestran algunos exploradores al pasar el ratón por encima de la imagen.
• Vínculo : vincule la imagen a otro recurso.
  • Utilice el cuadro de diálogo de selección para vincular a otro recurso AEM.
  • Si no se vincula a un recurso AEM, introduzca la dirección URL absoluta. Las direcciones URL no resueltas se interpretarán como relativas a AEM.
• ID : Esta opción permite controlar el identificador único del componente en el HTML y en la capa de datos.
  • Si se deja en blanco, se genera automáticamente una ID única para usted y 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 tener un impacto en el seguimiento de CSS, JS y de la capa de datos.

Editar cuadro de diálogo

El cuadro de diálogo de edición permite al autor recortar, modificar el mapa de inicio y aplicar zoom a la imagen.

• Recorte de inicio

  

  Al seleccionar esta opción, se abre una lista desplegable para las proporciones de recorte predefinidas.

  • Elija la opción Mano libre para definir su propio recorte.
  • Elija la opción Eliminar recorte para mostrar el recurso original.

  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.

Diálogo de diseño

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.

Ficha principal

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.

• Activar las funciones de DM: cuando está activada, están disponibles las funciones de habilitar Medios dinámicos.
• Activar carga diferida: defina si la opción de carga diferida se activa automáticamente al agregar el componente de imagen a una página.
• La imagen es decorativa : defina si la opción de imagen decorativa se activa automáticamente al agregar el componente de imagen a una página.
• Obtener texto alternativo de DAM: defina si la opción para recuperar el texto alternativo de DAM se activa automáticamente al agregar el componente de imagen a una página.
• Obtener rótulo de DAM : defina si la opción para recuperar el rótulo de DAM se activa automáticamente al agregar el componente de imagen a una página.
• Mostrar rótulo como elemento emergente : defina si la opción para mostrar el rótulo de imagen como elemento emergente se activa automáticamente al agregar el componente de imagen a una página.
• Deshabilitar el seguimiento UUID: marque esta opción para deshabilitar el seguimiento del UUID del recurso de imagen.
• Anchos : define una lista de anchuras en píxeles para la imagen y el componente carga automáticamente la anchura más adecuada en función del tamaño del navegador.
  • Toque o haga clic en el botón Añadir para agregar otro tamaño.
    • Use los asideros para reorganizar el orden de los tamaños.
    • Utilice el icono Eliminar para eliminar un ancho.
  • De forma predeterminada, la carga de imágenes se aplaza hasta que se hace visible.
    • Seleccione la opción Deshabilitar la carga diferida para cargar las imágenes al cargar la página.
• Calidad JPEG: factor de calidad (en porcentaje de 0 a 100) para imágenes JPEG transformadas (por ejemplo, escaladas o recortadas).

Ficha Características

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.

  ATENCIÓN

  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.

  • Haga clic en Añadir para agregar una proporción de aspecto de recorte predefinida.
  • Escriba un nombre descriptivo, que se mostrará en la lista desplegable Recortar Inicio.
  • Introduzca la proporción numérica del aspecto.
  • Utilice los controladores de arrastre para reorganizar el orden de las proporciones de aspecto
  • Utilice el icono de papelera para eliminar una proporción de aspecto.
  ATENCIÓ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.

Ficha Estilos

El componente Imagen admite el sistema de estilo AEM .

Servlet de imagen adaptable

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.