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
_publishUrl
es la dirección URL completa del recurso de imagen en AEM Publish
La mejor forma de utilizar los campos es según los siguientes criterios:
Campos ImageRef | Aplicación web del cliente ofrecida desde AEM | La aplicación de cliente consulta al autor de AEM | La aplicación del cliente consulta AEM Publish |
---|---|---|---|
_path |
š | ✓ (La aplicación debe especificar el host en la dirección URL) | ✓ (La aplicación debe especificar el host en la dirección URL) |
_authorUrl |
ü | š | ü |
_publishUrl |
ü | ü | š |
Uso de _authorUrl
y _publishUrl
debe coincidir con el extremo de AEM GraphQL que se está utilizando para generar la respuesta de GraphQL.
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.
En la consulta de GraphQL, devuelva el campo como ImageRef
y solicite los campos correspondientes _path
, _authorUrl
o _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
).
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
, _authorUrl
o _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 } />
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.
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.
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:
Nombre de representación | Extensión | Anchura máxima |
---|---|---|
web-optimized-large | webp | 1200px |
web-optimized-medium | webp | 900px |
web-optimized-small | webp | 600px |
Los atributos que se señalan en la tabla anterior son importantes:
webp
las representaciones, ya que están optimizadas para su publicación en la web.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.
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.
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.
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.
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.
URL de recurso | Subruta de representaciones | Nombre de representación | Extensión de representación | URL de representación | |
---|---|---|---|---|---|
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg | /_jcr_content/renditions/ | web-optimized-large | .webp | → | https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-large.webp |
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg | /_jcr_content/renditions/ | web-optimized-medium | .webp | → | https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-medium.webp |
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg | /_jcr_content/renditions/ | web-optimized-small | .webp | → | https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-small.webp |
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.
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.
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}/>
</>
);
}
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;