Show Menu
TOPICS×

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 carga diferida para el visitante de la 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 el ancho 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 incorpora funciones interactivas sólidas listas para usar. En el nivel de plantilla de página, el cuadro de diálogo de diseño se puede utilizar 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 según el tamaño de la ventana del navegador. A medida que se cambia el tamaño de la ventana, el componente 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 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.

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 de AEM con las que las versiones del componente son compatibles y los vínculos a la documentación de versiones anteriores.
Versión del componente
AEM 6.3
AEM 6.4
AEM 6.5
v2
Compatible
Compatible
Compatible
Compatible
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

El componente Imagen admite gráficos vectoriales escalables (SVG).
  • 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
<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 el Service Pack 3 para AEM 6.3 o superior, para admitir nuevas funciones del editor de imágenes en AEM.

Ejemplo de salida de componente

Para experimentar el componente de imagen, así como 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 puede encontrarse en GitHub .
Encontrará más detalles sobre el desarrollo de los componentes principales en la documentación para desarrolladores de los componentes principales.
A partir de la versión 2.1.0 de los componentes principales, el componente de imagen admite microdatos de schema.org.

Configurar cuadro de diálogo

Además del cuadro de diálogo de edición estándar y del cuadro de diálogo de diseño, el componente de imagen ofrece un cuadro de diálogo de configuración en el que la imagen misma se define junto con su descripción y sus propiedades básicas.

Ficha Recurso

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

Ficha Metadatos

  • 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 problemas de visión.
    • Obtener texto alternativo de DAM: cuando se selecciona, el texto alternativo de la imagen se rellena con el valor de los metadatos en DAM
      dc:description
      .
  • 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 selecciona, el texto del rótulo de la imagen se rellena con el valor de los
      dc:title
      metadatos en DAM.
    • Mostrar rótulo como emergente
      Cuando está activado, el rótulo no se mostrará debajo de la imagen, sino como una ventana emergente que muestran algunos navegadores 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 de AEM, introduzca la dirección URL absoluta. Las direcciones URL no resueltas se interpretarán como relativas a AEM.

Edit Dialog

El cuadro de diálogo de edición permite al autor recortar, modificar el mapa de inicio y aplicar zoom a 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
      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 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.
  • Iniciar mapa
    La función de mapa de inicio requiere la versión 2.1.0 de los componentes principales o superior, junto con el Service Pack 2 para AEM 6.4 o el Service Pack 3 para AEM 6.3 o superior para admitir nuevas funciones de editor de imágenes en AEM.
    Utilice esta opción para aplicar un mapa de inicio a la imagen. Al seleccionar esta opción se abre una nueva ventana que permite al usuario seleccionar la forma del mapa:
    • Agregar mapa rectangular
    • Agregar mapa circular
    • Agregar mapa poligonal
      • De forma predeterminada, agrega un mapa de triángulo. Haga doble clic en una línea de la forma para añadir un nuevo controlador azul de cambio de tamaño en un lado nuevo. Una vez seleccionada una forma de mapa, se superpone a la imagen, lo que permite cambiar el tamaño. Arrastre y suelte los controladores de tamaño azules para ajustar la forma.
    Después de ajustar el tamaño del mapa de inicio, haga clic en él para abrir una barra de herramientas flotante para definir la ruta del vínculo.
    • Ruta
      • Utilice la opción Selector de ruta para seleccionar una ruta en AEM
      • Si la ruta no está en AEM, utilice la dirección URL absoluta. Las rutas no absolutas se interpretarán en relación con AEM.
    • Texto
      alternativo Descripción alternativa del destino de ruta
    • Destino
      • Misma ficha
      • Nueva ficha
      • Marco principal
      • Marco superior
        Toque o haga clic en la marca de verificación azul para guardar, la x negra para cancelar y la papelera roja para eliminar el mapa.
  • 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.

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.

Ficha Principal

En la ficha
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 navegador. Esta es una parte importante de las funciones Funciones adaptables interactivas del componente de 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 carga
    diferidaDefina 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.
  • Desactive la
    comprobación de seguimiento UUID para desactivar 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
      Agregar
      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 retrasa 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).
La opción Calidad JPEG está disponible desde la versión 2.2.0 de los componentes principales.
A partir de la versión 2.2.0 de los componentes principales, el componente de imagen agrega el atributo UUID exclusivo
data-asset-id
al recurso de imagen para permitir el seguimiento y análisis del número de vistas que reciben los recursos individuales.

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, la orientación y el 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
  • Rotar
    Utilice esta opción para permitir que el autor del contenido utilice la opción
    Girar a la derecha
    .
  • Voltear
    Utilice esta opción para permitir que el autor del contenido utilice las opciones
    Voltear horizontalmente
    y
    Voltear verticalmente
    .
    La opción
    Voltear
    está desactivada de forma predeterminada. Al habilitarla, se mostrarán los botones
    Voltear verticalmente
    y
    Voltear horizontalmente
    en el cuadro de diálogo de edición del componente de imagen; sin embargo, AEM no admite actualmente la función y los cambios realizados con estas opciones no se mantendrán.
  • 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
      Agregar
      para agregar una proporción de aspecto de recorte predefinida.
    • Escriba un nombre descriptivo que se mostrará en la lista desplegable
      Iniciar recorte
      .
    • 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.
    Note that in AEM, crop aspect ratios are defined as
    height/width
    . Esto difiere de la definición convencional de anchura y altura y se realiza por motivos de compatibilidad heredados. 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 servlet de imagen 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 a través del
Last-Modified
encabezado son compatibles con el servlet de imagen adaptable, pero el almacenamiento en caché del
Last-Modified
encabezado debe habilitarse en Dispatcher .