影像是 開發豐富、引人入勝的AEM無頭體驗. AEM Headless支援影像資產的管理及其最佳化傳送。
AEM無頭內容模型中使用的內容片段,通常會參考用於無頭體驗中顯示的影像資產。 AEM GraphQL查詢可以撰寫,以根據影像的參考位置,提供影像的URL。
此 ImageRef
類型有三個內容參考的URL選項:
_path
是AEM中的參考路徑,且不包含AEM來源(主機名稱)_authorUrl
是AEM Author上影像資產的完整URL
_publishUrl
是AEM發佈上影像資產的完整URL
根據下列條件,最好使用欄位:
ImageRef欄位 | 由AEM提供的用戶端網頁應用程式 | 用戶端應用程式查詢AEM作者 | 用戶端應用程式查詢AEM發佈 |
---|---|---|---|
_path |
✔ | ✔(應用必須在URL中指定主機) | ✔(應用必須在URL中指定主機) |
_authorUrl |
✘ | ✔ | ✘ |
_publishUrl |
✘ | ✘ | ✔ |
使用 _authorUrl
和 _publishUrl
應與用來源化GraphQL回應的AEM GraphQL端點一致。
確保包含影像參考的「內容片段」欄位為 內容參考 資料類型。
欄位類型會在 內容片段模型,方法是選取欄位並檢查 屬性 標籤。
在GraphQL查詢中,將欄位傳回為 ImageRef
類型,並請求適當的欄位 _path
, _authorUrl
,或 _publishUrl
應用程式所需。 例如,在 WKND參考示範專案 並在其中納入影像資產參考的影像URL primaryImage
欄位,可使用新的持續查詢完成 wknd-shared/adventure-image-by-path
定義為:
query ($path: String!) {
adventureByPath(_path: $path) {
item {
title,
primaryImage {
... on ImageRef {
_path
_authorUrl
_publishUrl
}
}
}
}
}
此 $path
變數 _path
篩選器需要內容片段的完整路徑(例如 /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp
)。
產生的JSON回應包含要求的欄位,其中包含影像資產的URL。
{
"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"
}
}
}
}
}
若要在您的應用程式中載入參考的影像,請使用適當欄位, _path
, _authorUrl
,或 _publishUrl
的 adventurePrimaryImage
作為影像的來源URL。
的網域 _authorUrl
和 _publishUrl
由AEMas a Cloud Service自動定義,使用 外置器.
在React中,顯示AEM Publish的影像看起來類似:
<img src={ data.adventureByPath.item.primaryImage._publishUrl } />
影像資產支援可自訂 轉譯,為原始資產的替代表示法。 自訂轉譯有助於最佳化無頭式體驗。 無頭應用程式可以請求最佳化的轉譯,而不是請求原始影像資產(通常是大型高解析度檔案)。
AEM Assets管理員會使用處理設定檔來定義自訂轉譯。 接著,處理設定檔便可直接套用至特定資料夾樹狀結構或資產,以產生這些資產的轉譯。
資產轉譯規格定義於 處理設定檔 由AEM Assets管理員撰寫。
建立或更新處理設定檔,並為無頭應用程式所需的影像大小新增轉譯定義。 轉譯可以命名任何名稱,但應在語義上命名。
在此範例中,會建立三個轉譯:
轉譯名稱 | 副檔名 | 最大寬度 |
---|---|---|
web優化 — large | webp | 1200 px |
web優化媒體 | webp | 900 px |
web優化 — 小 | webp | 600 px |
上表中調出的屬性非常重要:
webp
轉譯,如此會針對網頁傳送最佳化。轉譯定義視無頭式應用程式的需求而定,因此請務必為使用案例定義最佳轉譯集,並在語義上為其命名,以說明其使用方式。
在建立(或更新)「處理設定檔」後,重新處理資產以產生「處理設定檔」中定義的新轉譯。 在使用處理設定檔處理資產之前,新轉譯不存在。
最好, 將處理設定檔指派給資料夾 因此,任何上傳至該資料夾的新資產都會自動產生轉譯。 必須使用下方的臨時方法重新處理現有資產。
或者,您可以隨選選取資料夾或資產,然後選取 重新處理資產,並選取新的處理設定檔名稱。
轉譯可透過驗證 開啟資產的轉譯檢視,以及選取新轉譯以在轉譯邊欄中預覽。 如果缺少轉譯, 確保資產是使用處理設定檔進行處理.
確認含有新轉譯的資產為 (重新發佈) 以便在AEM Publish上存取新轉譯。
轉譯可透過附加 轉譯名稱 和 轉譯擴充功能 在處理設定檔中定義至資產的URL。
資產網址 | 轉譯子路徑 | 轉譯名稱 | 轉譯擴充功能 | 轉譯URL | |
---|---|---|---|---|---|
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg | /_jcr_content/renditions/ | web優化 — 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優化媒體 | .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優化 — 小 | .webp | → | https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-small.webp |
AEM GraphQL要求影像轉譯時不需要額外語法。 而是 查詢影像 以通常的方式,並以程式碼指定所需的轉譯。 這很重要 確保無頭應用程式使用的影像資產具有相同名稱的轉譯.
讓我們建立一個簡單的React應用程式,顯示單一影像資產的三種轉譯項目:Web最佳化 — 小型、Web最佳化 — 中型和Web最佳化 — 大型。
建立可轉譯影像的React元件。 此元件接受四個屬性:
assetUrl
:透過GraphQL查詢的回應提供的影像資產URL。renditionName
:要載入的轉譯名稱。renditionExtension
:要載入的轉譯擴充功能。alt
:影像的替代文字;無障礙非常重要!此元件構建 格式副本URL,使用 存取轉譯. 安 onError
處理常式設為在遺失轉譯時顯示原始資產。
此範例使用原始資產URL做為 onError
處理常式中,會遺失轉譯。
// 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
這個簡單 App.js
查詢AEM以取得冒險影像,然後顯示該影像的三個轉譯:web優化 — 小型、web優化 — 中型和web優化 — 大型。
在自訂React鈎點中執行AEM查詢 使用AEM Headless SDK的useAdventureByPath.
查詢的結果和特定的轉譯參數會傳遞至 影像React元件.
// 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;