影像元件(v2)

核心元件影像元件是具有就地編輯功能的自適應影像元件。

使用狀況

影像元件具有自適應影像選擇和響應行為，對頁面訪問者具有延遲載入以及對內容作者易於影像放置和裁剪。

影像寬度以及裁剪和附加設定可由模板作者在 設計對話框。 內容編輯器可以在 配置對話框 並在 編輯對話框。 為了更方便，還提供了影像的簡單就地修改。

版本和相容性

本文檔介紹了2018年1月隨核心元件2.0.0版而推出的影像元件v2。

響應功能

影像元件具有強大的響應功能，即可開箱即用。 在頁面模板級別， 設計對話框 可用於定義影像資產的預設寬度。 然後，影像元件將自動載入正確的寬度以根據瀏覽器窗口的大小進行顯示。 在調整窗口大小時，影像元件會動態載入正確的影像大小。 由於映像元件已優化以載入您的內容，因此元件開發人員無需擔心定義自定義媒體查詢。

此外，映像元件支援延遲載入，以延遲實際映像資產的載入，直到其在瀏覽器中可見為止，從而提高頁面的響應能力。

Dynamic Media支援

影像元件(截至 發行版2.13.0)支援 Dynamic Media 資產。 啟用後， 這些功能提供了通過簡單的拖放功能或通過資產瀏覽器添加Dynamic Media映像資產的功能，就像您添加任何其他映像一樣。 此外，還支援影像修飾符、影像預設和智慧作物。

您使用核心元件構建的Web體驗不能提供豐富、Sensei支援、強健、高效能、跨平台的Dynamic Media映像功能。

SVG支援

影像元件支援可縮放向量圖形(SVG)。

• 支援從DAM拖放SVG資產和從本地檔案系統上載SVG檔案。
• 原始SVG檔案被流式傳輸（跳過轉換）。
• 對於SVG影像，「智慧影像」和「智慧大小」被設定為影像模型中的空陣列。

安全性

出於安全原因，影像編輯器從未直接調用原始SVG。 它被調用 <img src=“path-to-component”>。 這會阻止瀏覽器執行嵌入在SVG檔案中的任何指令碼。

元件輸出示例

要體驗映像元件，並查看其配置選項以及HTML和JSON輸出的示例，請訪問 元件庫。

技術詳細資訊

有關映像元件的最新技術文檔 可在GitHub上找到。

有關開發核心元件的詳細資訊，請參閱 核心元件開發人員文檔。

映像元件支援 schema.org微資料。

配置對話框

除了 編輯對話框 和 設計對話框，影像元件提供一個配置對話框，其中定義了影像本身及其說明和基本屬性。

資產標籤

• 影像資產
  • 從 資產瀏覽器 或點擊 瀏覽 從本地檔案系統上載。
  • 點擊或按一下 清除 來取消選擇當前選定的映像。
  • 點擊或按一下 編輯 至 管理資產的格式副本 的子菜單。

元資料頁籤

• 預設類型 — 這定義了可用影像預設的類型 影像預設 或 智慧裁剪，且僅在 Dynamic Media特徵 的子菜單。
  • 影像預設 — 時間 預設類型 共 影像預設 下拉框 影像預設 可用，允許從可用的Dynamic Media預設中進行選擇。 僅當為所選資產定義預設時，才可用。
  • 智慧裁剪 — 時間 預設類型 共 智慧裁剪 已選擇下拉 格式副本 可用，允許從選定資產的可用格式副本中進行選擇。 僅當為所選資產定義格式副本時，才可使用此選項。
  • 影像修飾符 — 此處可以分隔其他Dynamic Media影像服務命令 &，無論 預設類型 的子菜單。
• 影像是裝飾性的 — 檢查影像是否應被輔助技術忽略，因此不需要替代文本。 這僅適用於裝飾性影像。
• 備選文本 — 視障讀者對影像含義或功能的文字選擇。
  • 從DAM獲取替代文本 — 選中後，影像的替代文本將填充 dc:description 元資料。
• 標題 — 影像的其他資訊，預設顯示在影像下方。
  • 從DAM獲取標題 — 選中後，將使用 dc:title 元資料。
  • 將標題顯示為彈出窗口 — 選中後，標題不會顯示在影像下方，而是當懸停在影像上方時，由某些瀏覽器顯示的彈出窗口。
• 連結 — 將映像連結到其他資源。
  • 使用選擇對話框連結到另AEM一資源。
  • 如果未連結到AEM資源，請輸入絕對URL。 非溶質URL將被解釋為相對於AEM。
• ID — 此選項允許控制HTML和 資料層。
  • 如果留空，則系統會為您自動生成唯一ID，並通過檢查生成的頁面來找到它。
  • 如果指定了ID，則作者有責任確保其唯一。
  • 更改ID可能會影響CSS、JS和資料層跟蹤。

編輯對話框

編輯對話框允許內容作者裁剪、修改啟動映射和縮放影像。

• 開始裁剪

  

  選擇此選項將開啟預定義裁剪比例的下拉框。

  • 選擇選項 自由手 來定義自己的作物。
  • 選擇選項 刪除裁剪 顯示原始資產。

  選擇裁剪選項後，使用藍色手柄來調整影像上的裁剪大小。

  

• 向右旋轉

  

  使用此選項將影像向右（順時針）旋轉90°。

• 水準翻轉

  

  使用此選項可水準翻轉影像或沿y軸旋轉180°影像。

• 垂直翻轉

  

  使用此選項可垂直翻轉影像或沿x軸旋轉180°影像。

• 重設縮放

  

  如果影像已縮放，則使用此選項重置縮放級別。

• 開啟縮放滑塊

  

  使用此選項可顯示滑塊以控制影像的縮放級別。

  

就地編輯器也可用於修改影像。 由於空間限制，只有基本選項可線上使用。 對於完全編輯選項，請使用全屏模式。

設計對話框

設計對話框允許模板作者定義內容作者在使用此元件時具有的裁剪、上載和旋轉及上載選項。

主頁籤

在 主 頁籤，您可以定義影像的寬度清單（以像素為單位），元件將根據瀏覽器大小自動載入最合適的寬度。 這是 響應特徵 表徵圖。

此外，當作者將元件添加到頁面時，還可以定義自動或禁用哪些常規元件選項。

• 啟用DM功能 — 選中後，啟用 Dynamic Media特徵 的雙曲餘切值。
• 啟用Web優化映像 — 選中時， Web優化的影像傳遞服務 將以WebP格式提供影像，平均將影像大小減少25%。
  • 此選項僅在AEMaCS中可用。
  • 如果未選中或Web優化映像提供服務不可用， 自適應影像Servlet 的子菜單。
• 啟用延遲載入 — 定義在將影像元件添加到頁面時是否自動啟用延遲載入選項。
• 影像是裝飾性的 — 定義在將影像元件添加到頁面時是否自動啟用裝飾影像選項。
• 從DAM獲取替代文本 — 定義在將影像元件添加到頁面時是否自動啟用從DAM檢索替代文本的選項。
• 從DAM獲取標題 — 定義在將影像元件添加到頁面時是否自動啟用從DAM檢索標題的選項。
• 將標題顯示為彈出窗口 — 定義在將影像元件添加到頁面時是否自動啟用將影像標題顯示為彈出窗口的選項。
• 禁用UUID跟蹤 — 選中以禁用對映像資產的UUID的跟蹤。
• 寬度 — 定義影像的寬度清單（以像素為單位），元件根據瀏覽器大小自動載入最合適的寬度。
  • 點擊或按一下 添加 按鈕以添加其他大小。
    • 使用抓握手柄重新排列大小的順序。
    • 使用 刪除 表徵圖以刪除寬度。
  • 預設情況下，將延遲載入影像，直到其可見。
    • 選擇選項 禁用延遲載入 在載入頁面時載入影像。
• JPEG質量 — 變換（例如縮放或裁切）JPEG影像的質量系數（以百分比表示，從0到100）。

功能頁籤

在 功能 頁籤，您可以定義在使用元件（包括上載選項、方向和裁剪選項）時內容作者可以使用的選項。

• 來源

  

  選擇選項 允許從檔案系統上載資產 允許內容作者從本地電腦上傳影像。 要強制內容作者僅從中選擇資AEM產，請取消選擇此選項。

• 方向

  

• 旋轉
  使用此選項允許內容作者使用
  向右旋轉 的雙曲餘切值。

• 翻轉
  使用此選項允許內容作者使用
  水準翻轉 和 垂直翻轉 頁籤

  注意

  的 翻轉 選項。 啟用它將顯示 垂直翻轉 和 水準翻轉 影像元件的「編輯」對話框中的按鈕，但當前不支援該功能AEM，並且不會保留使用這些選項所做的任何更改。

• 裁切

  

  選擇選項 允許裁剪 允許內容作者在「編輯」對話框的元件中裁剪影像。

  • 按一下 添加 添加預定義的裁剪縱橫比。
  • 輸入描述性名稱，該名稱將在 開始裁剪 下拉清單。
  • 輸入縱橫比。
  • 使用拖動手柄重新排列長寬比的順序
  • 使用垃圾桶表徵圖刪除縱橫比。
  注意

  請注意，AEM在中，裁剪縱橫比定義為 高度/寬度。 這不同於傳統的寬度/高度定義，是出於傳統相容性原因。 只要您提供比率的明確名稱，內容作者就不會察覺到任何差異，因為該名稱顯示在UI中，而不是比率本身。

樣式頁籤

映像元件支AEM持 樣式系統。

Adobe客戶端資料層

映像元件支援 Adobe客戶端資料層。

Business.Adobe.com 資源