Componente de imagen (v1)

El componente de imagen del componente principal es una función de edición in situ del componente de imagen adaptable.

Uso

El componente de imagen permite colocar fácilmente recursos de imagen y ofertas en la edición in-situ. Incluye selección de imágenes adaptables con carga diferida, así como recorte para el autor del contenido.

El autor de la plantilla puede definir los anchos de imagen permitidos, 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.

Versión y compatibilidad

Este documento describe la versión 1 del componente de imagen, introducida originalmente con la versión 1.0.0 de los componentes principales con AEM 6.3.

La siguiente tabla lista la compatibilidad de v1 del componente de imagen.

Versión de AEM	Componente de imagen v1
6.3	Compatible
6.4	Compatible

Salida de componente de muestra

El siguiente es un ejemplo tomado de We.Retail.

Captura de pantalla

HTML

<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
 
        <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}">
            <img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
        </noscript>

</div>

JSON

"image": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "smartSizes": [],
              "smartImages": [],
              "lazyEnabled": true,
              "src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
              ":type": "weretail/components/content/image"
            }

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.

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

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

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

• Rótulo : la información adicional sobre la imagen que se muestra debajo de la imagen es predeterminada.

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

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

• Iniciar mapa

  

  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:

  • Añadir mapa rectangular

  • Añadir mapa circular

  • Añadir mapa poligonal

    • De forma predeterminada, agrega un mapa de triángulo. Haga clic con el botón doble en una línea de la forma para agregar 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.

    • Alt
      textDescripció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.

Diálogo de diseño

El cuadro de diálogo de diseño permite al autor de la plantilla definir las cargas de recorte, carga y rotación que el autor tiene al utilizar este componente.

Principal

En la ficha Main puede definir una lista de anchuras permitidas en píxeles para que la imagen cargue automáticamente la anchura más adecuada desde la lista.

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.

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

  

  • Rotar : utilice esta opción para permitir que el autor del contenido utilice la opción Rotar 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.

Detalles técnicos

La documentación técnica más reciente sobre el componente de imagen se encuentra en GitHub.

Todo el proyecto de componentes principales se puede descargar desde GitHub.

Encontrará más detalles sobre el desarrollo de los componentes principales en la documentación para desarrolladores de los componentes principales.