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 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 mayor comodidad, también está disponible una modificación simple in situ de la imagen.

Funciones adaptables

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 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.

Asistencia de Dynamic Media

El componente Imagen (a partir de versión 2.13.0) admite Dynamic Media recursos. Cuando está habilitada, estas funciones permiten agregar recursos de imagen de Dynamic Media con tan solo arrastrar y soltar o mediante el 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 cultivos inteligentes.

Las experiencias web creadas con los componentes principales no pueden ofrecer funciones de imagen de Dynamic Media enriquecidas, potentes, sólidas y de alto rendimiento en varias plataformas.

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.

La siguiente tabla detalla 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.

Para obtener más información sobre las versiones y versiones de los componentes principales, consulte el documento Versiones de los componentes principales.

Compatibilidad con SVG

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

• Se admiten la función de arrastrar y soltar un recurso SVG desde DAM y cargar un archivo SVG cargado desde un sistema de archivos local.
• El servlet de imagen adaptable transmite el archivo SVG original en flujo (las transformaciones se omiten).
• 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 cualquier secuencia de comandos incrustada en el archivo SVG.

Salida de componente de ejemplo

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.

Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.

El componente Imagen admite schema.org microdata.

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 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.

Pestaña Activo

• Recurso de imagen
  • Coloque un recurso desde el navegador de recursos o pulse la opción examinar para cargar desde un sistema de archivos local.
  • Toque o haga clic en Borrar para anular la selección de la imagen seleccionada actualmente.
  • Toque o haga clic en Editar para administrar las representaciones del recurso en el editor de recursos.

Pestaña Metadatos

• Tipo de ajuste preestablecido : define los tipos de ajustes preestablecidos de imagen disponibles, ya sea Selector de imágenes o Recorte inteligente, y solo está disponible cuando las funciones de Dynamic Media están habilitadas.
  • Ajuste preestablecido de imagen : cuando se selecciona Tipo de ajuste preestablecido de ajustes preestablecidos de imagen, está disponible la opción desplegable Ajustes preestablecidos de imagen, que permite seleccionar entre los ajustes preestablecidos de Dynamic Media disponibles. Esto solo está disponible si se han definido ajustes preestablecidos para el recurso seleccionado.
  • Recorte inteligente : cuando se selecciona Tipo de recorte inteligente , está disponible la lista desplegable ​​Representación , que permite seleccionar entre las representaciones disponibles del recurso seleccionado. Esto solo está disponible si las representaciones están definidas para el recurso seleccionado.
  • Modificadores de imagen : los comandos de servidor de imágenes adicionales de Dynamic Media se pueden definir aquí separados por &, independientemente de los tipos de ajustes preestablecidos seleccionados.
• 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 : cuando se marca, el texto del rótulo de la imagen se rellena con el valor de los dc:title metadatos en DAM.
  • 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.
• Vínculo : vincule la imagen a otro recurso.
  • Utilice el cuadro de diálogo de selección para vincular a otro recurso de 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, automáticamente se genera un ID único que 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 afectar al seguimiento de CSS, JS y capa de datos.

Cuadro de diálogo Editar

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.

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

  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).

• Girar horizontalmente

  

  Utilice esta opción para girar la imagen horizontalmente o girar la imagen 180° a lo largo del eje y.

• Girar verticalmente

  

  Utilice esta opción para girar 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 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.

Cuadro de diálogo 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.

Pestaña Principal

En la pestaña 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 de imagen.

Además, puede definir qué opciones generales de componentes se desactivan o se desactivan automáticamente cuando el autor agrega el componente a una página.

• Habilitar funciones de DM: cuando está marcada, las funciones de activación de Dynamic Media están disponibles.
• Habilitar carga diferida : defina si la opción de carga diferida está activada automáticamente al añadir el componente de imagen a una página.
• La imagen es decorativa : defina si la opción de imagen decorativa está activada automáticamente al añadir 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 habilita automáticamente al añadir 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 habilita automáticamente al añadir 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 : compruebe para deshabilitar el seguimiento del UUID del recurso de imagen.
• Anchura : 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 explorador.
  • Toque o haga clic en el botón Add para añadir otro tamaño.
    • Utilice los asideros para reorganizar el orden de los tamaños.
    • Utilice el icono Delete para eliminar una anchura.
  • 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.
• Calidad JPEG : factor de calidad (en porcentaje desde 0 y 100) para imágenes JPEG transformadas (por ejemplo, escaladas o recortadas).

Pestaña Características

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

  

• ​
  RotarUtilice esta opción para permitir que el autor de contenido utilice la variable
  Opción Girar a la derecha .

• ​
  FlipUtilice esta opción para permitir que el autor de contenido utilice la variable
  Girar horizontalmente y voltear verticalmente.

  PRECAUCIÓ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.

  • Haga clic en Add para añadir una relación de aspecto de recorte predefinida.
  • Introduzca un nombre descriptivo que se mostrará en la lista desplegable Iniciar recorte.
  • Introduzca la relación numérica del aspecto.
  • Utilice los controles de arrastre para reorganizar el orden de las relaciones de aspecto
  • Utilice el icono de papelera para eliminar una relación de aspecto.
  PRECAUCIÓ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.

Pestaña Estilos

El componente Imagen es compatible con el sistema de estilos AEM.

Servlet de imagen adaptable

El componente de imagen utiliza el servlet de imagen adaptable del componente principal. El servicio de imagen adaptable es responsable del procesamiento y la transmisión de imágenes y los desarrolladores pueden aprovecharlo en sus personalizaciones de los componentes principales.

Capa de datos del cliente de Adobe

El componente Imagen es compatible con la capa de datos del cliente de Adobe.