Imágenes con AEM sin encabezado

Las imágenes son un aspecto crítico de desarrollo de experiencias ricas, atractivas AEM sin objetivos. AEM sin encabezado admite la administración de recursos de imagen y su entrega optimizado.

Los fragmentos de contenido utilizados en AEM modelado de contenido sin encabezado suelen hacer referencia a recursos de imagen que se van a mostrar en la experiencia sin encabezado. AEM las consultas de GraphQL se pueden escribir para proporcionar direcciones URL a imágenes en función de desde dónde se hace referencia a la imagen.

La variable ImageRef El tipo tiene tres opciones de URL para las referencias de contenido:

• _path es la ruta a la que se hace referencia en AEM y no incluye un origen AEM (nombre de host)
• _authorUrl es la dirección URL completa del recurso de imagen en AEM Author
  • Autor de AEM se puede utilizar para obtener una vista previa de la aplicación sin encabezado.
• _publishUrl es la dirección URL completa del recurso de imagen en AEM Publish
  • AEM Publish es normalmente desde donde la implementación de producción de la aplicación sin periféricos muestra imágenes.

La mejor forma de utilizar los campos es según los siguientes criterios:

Uso de _authorUrl y _publishUrl debe coincidir con el extremo de AEM GraphQL que se está utilizando para generar la respuesta de GraphQL.

Modelo de fragmento de contenido

Asegúrese de que el campo Fragmento de contenido que contiene la referencia de imagen sea del referencia de contenido tipo de datos.

Los tipos de campo se revisan en el Modelo de fragmento de contenido, seleccionando el campo e inspeccionando el Propiedades a la derecha.

Consulta persistente de GraphQL

En la consulta de GraphQL, devuelva el campo como ImageRef y solicite los campos correspondientes _path, _authorUrlo _publishUrl requerida por su aplicación. Por ejemplo, para consultar una aventura en la Proyecto de demostración de referencia WKND e incluyendo la URL de imagen para las referencias de recurso de imagen en su primaryImage , se puede realizar con una nueva consulta persistente wknd-shared/adventure-image-by-path definido como:

query ($path: String!) {
  adventureByPath(_path: $path) {
    item {
      title,
      primaryImage {
        ... on ImageRef {
          _path
          _authorUrl
          _publishUrl
        }
      }
    }
  }
}

La variable $path se usa en la variable _path requiere la ruta completa al fragmento de contenido (por ejemplo /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp).

Respuesta de GraphQL

La respuesta JSON resultante contiene los campos solicitados que contienen las direcciones URL de los recursos de imagen.

{
  "data": {
    "adventureByPath": {
      "item": {
        "adventurePrimaryImage": {
          "_path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg",
          "_authorUrl": "https://author-p123-e456.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg",
          "_publishUrl": "https://publish-p123-e789.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg"
        }
      }
    }
  }
}

Para cargar la imagen a la que se hace referencia en la aplicación, utilice el campo correspondiente. _path, _authorUrlo _publishUrl del adventurePrimaryImage como URL de origen de la imagen.

Los dominios de la variable _authorUrl y _publishUrl se definen automáticamente mediante AEM as a Cloud Service mediante la variable Externalizador.

En React, la visualización de la imagen desde AEM Publish tiene el siguiente aspecto:

<img src={ data.adventureByPath.item.primaryImage._publishUrl } />

Representaciones de imágenes

Compatibilidad con recursos de imagen personalizables representaciones, que son representaciones alternativas del recurso original. Las representaciones personalizadas pueden ayudar en la optimización de una experiencia sin objetivos. En lugar de solicitar el recurso de imagen original, que suele ser un archivo grande de alta resolución, la aplicación sin encabezado puede solicitar representaciones optimizadas.

Crear representaciones

Los administradores de AEM Assets definen las representaciones personalizadas mediante Perfiles de procesamiento. A continuación, los perfiles de procesamiento se pueden aplicar a árboles de carpetas o recursos específicos directamente para generar las representaciones de esos recursos.

Perfiles de procesamiento

Las especificaciones de representación de recursos se definen en Perfiles de procesamiento por administradores de AEM Assets.

Cree o actualice un perfil de procesamiento y agregue definiciones de representación para los tamaños de imagen necesarios para la aplicación sin encabezado. A las representaciones se les puede asignar cualquier nombre, pero se les debe asignar un nombre semántico.

En este ejemplo se crean tres representaciones:

Los atributos que se señalan en la tabla anterior son importantes:

• Nombre de representación se utiliza para solicitar la representación.
• Extensión es la extensión utilizada para solicitar la variable nombre de representación. Preferir webp las representaciones, ya que están optimizadas para su publicación en la web.
• Anchura máxima se utiliza para informar al desarrollador de qué variante de representación debe utilizarse en función de su uso en la aplicación sin encabezado.

Las definiciones de representación dependen de las necesidades de su aplicación sin encabezado, por lo que asegúrese de definir el conjunto de representación óptimo para su caso de uso y se les asigna un nombre semántico con respecto a cómo se utilizan.

Volver a procesar recursos

Con el perfil de procesamiento creado (o actualizado), reprocese los recursos para generar las nuevas representaciones definidas en el perfil de procesamiento. Las nuevas representaciones no existen hasta que los recursos se procesen con el perfil de procesamiento.

• Preferentemente, se ha asignado el perfil de procesamiento a una carpeta por lo tanto, cualquier nuevo recurso cargado en dicha carpeta, genera automáticamente las representaciones. Los activos existentes deben volver a procesarse con el método específico que se describe a continuación.

• O bien, según sea necesario, seleccionando una carpeta o un recurso, seleccionando Volver a procesar recursos y seleccionando el nuevo nombre del perfil de procesamiento.

  

Revisar representaciones

Las representaciones pueden ser validadas por apertura de la vista de representaciones de un recursoy seleccionando las nuevas representaciones para la vista previa en el carril de representaciones. Si faltan las representaciones, asegúrese de que los recursos se procesan mediante el perfil de procesamiento.

Publicar recursos

Asegúrese de que los recursos con las nuevas representaciones son (re)publicado por lo tanto, se puede acceder a las nuevas representaciones en AEM Publish.

Acceso a representaciones

Para acceder a las representaciones directamente, añada la variable nombres de representación y extensiones de representación se define en el perfil de procesamiento como la URL del recurso.

Consulta de GraphQL

AEM GraphQL requiere sintaxis adicional para solicitar representaciones de imágenes. En su lugar las imágenes son consultadas de la forma habitual, y la representación deseada se especifica en el código. Es importante para asegúrese de que los recursos de imagen utilizados por la aplicación sin encabezado tengan las representaciones con el mismo nombre.

Ejemplo de reacción

Creemos una sencilla aplicación React que muestra tres representaciones, optimizada para la web, pequeña, optimizada para la web y optimizada para la web y grande, de un único recurso de imagen.

Crear componente de imagen

Cree un componente React que procese las imágenes. Este componente acepta cuatro propiedades:

• assetUrl: La URL del recurso de imagen proporcionada a través de la respuesta de la consulta de GraphQL.
• renditionName: Nombre de la representación que se va a cargar.
• renditionExtension: Extensión de la representación que se va a cargar.
• alt: Texto alternativo de la imagen; ¡la accesibilidad es importante!

Este componente construye el URL de representación con el formato descrito en Acceso a representaciones. Un onError está configurado para mostrar el recurso original en el caso de que falte la representación.

Este ejemplo utiliza la dirección URL del recurso original como alternativa en la onError , en el evento, falta una representación.

// src/Image.js

export default function Image({ assetUrl, renditionName, renditionExtension, alt }) {
  // Construct the rendition Url in the format:
  //   <ASSET URL>/_jcr_content/renditions<RENDITION NAME>.<RENDITION EXTENSION>
  const renditionUrl = `${assetUrl}/_jcr_content/renditions/${renditionName}.${renditionExtension}`;

  // Load the original image asset in the event the named rendition is missing
  const handleOnError = (e) => { e.target.src = assetUrl; }

  return (
    <>
      <img src={renditionUrl}
            alt={alt}
            onError={handleOnError}/>
    </>
  );
}

Defina el App.js

Esta sencilla App.js consulta AEM de una imagen de aventura y, a continuación, muestre las tres representaciones de esa imagen: optimizado para la web: pequeño, medio optimizado para la web y grande optimizado para la web.

La consulta con AEM se realiza en el vínculo React personalizado useAdventureByPath que utiliza el SDK AEM sin encabezado.

Los resultados de la consulta y los parámetros de representación específicos se pasan al Componente React de imagen.

// src/App.js

import "./App.css";
import { useAdventureByPath } from './api/persistedQueries'
import Image from "./Image";

function App() {

  // Get data from AEM using GraphQL persisted query as defined above
  // The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
  let { data, error } = useAdventureByPath("/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp");

  // Wait for GraphQL to provide data
  if (!data) { return <></> }

  return (
    <div className="app">

      <h2>Small rendition</h2>
      {/* Render the web-optimized-small rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="web-optimized-small"
        renditionExtension="webp"
        alt={data.adventureByPath.item.title}
      />

      <hr />

      <h2>Medium rendition</h2>
      {/* Render the web-optimized-medium rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="web-optimized-medium"
        renditionExtension="webp"
        alt={data.adventureByPath.item.title}
      />

      <hr />

      <h2>Large rendition</h2>
      {/* Render the web-optimized-large rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="web-optimized-large"
        renditionExtension="webp"
        alt={data.adventureByPath.item.title}
      />
    </div>
  );
}

export default App;

Recursos de Business.Adobe.com