核心元件影像元件是具有就地編輯功能的自適應影像元件。
影像元件具有自適應影像選擇和響應行為,對頁面訪問者具有延遲載入以及對內容作者易於影像放置和裁剪。
影像寬度以及裁剪和附加設定可由模板作者在 設計對話框。 內容編輯器可以在 配置對話框 並在 編輯對話框。 為了更方便,還提供了影像的簡單就地修改。
本文檔介紹了2018年1月隨核心元件2.0.0版而推出的影像元件v2。
本文檔介紹「影像元件」的v1。
有關當前版本的映像元件的詳細資訊,請參閱 影像元件 的子菜單。
影像元件具有強大的響應功能,即可開箱即用。 在頁面模板級別, 設計對話框 可用於定義影像資產的預設寬度。 然後,影像元件將自動載入正確的寬度以根據瀏覽器窗口的大小進行顯示。 在調整窗口大小時,影像元件會動態載入正確的影像大小。 由於映像元件已優化以載入您的內容,因此元件開發人員無需擔心定義自定義媒體查詢。
此外,映像元件支援延遲載入,以延遲實際映像資產的載入,直到其在瀏覽器中可見為止,從而提高頁面的響應能力。
影像元件由自適應影像Servlet提供動力。 請參閱文檔 自適應影像Servlet 詳細瞭解它的工作原理。
影像元件(截至 發行版2.13.0)支援 Dynamic Media 資產。 啟用後, 這些功能提供了通過簡單的拖放功能或通過資產瀏覽器添加Dynamic Media映像資產的功能,就像您添加任何其他映像一樣。 此外,還支援影像修飾符、影像預設和智慧作物。
您使用核心元件構建的Web體驗不能提供豐富、Sensei支援、強健、高效能、跨平台的Dynamic Media映像功能。
影像元件支援可縮放向量圖形(SVG)。
出於安全原因,影像編輯器從未直接調用原始SVG。 它被調用 <img src=“path-to-component”>
。 這會阻止瀏覽器執行嵌入在SVG檔案中的任何指令碼。
要體驗映像元件,並查看其配置選項以及HTML和JSON輸出的示例,請訪問 元件庫。
有關映像元件的最新技術文檔 可在GitHub上找到。
有關開發核心元件的詳細資訊,請參閱 核心元件開發人員文檔。
映像元件支援 schema.org微資料。
除了 編輯對話框 和 設計對話框,影像元件提供一個配置對話框,其中定義了影像本身及其說明和基本屬性。
&
,無論 預設類型 的子菜單。dc:description
元資料。dc:title
元資料。智慧裁剪 和 影像預設 是相互排斥的選項。 如果作者需要使用影像預設和Smart Crop格式副本,則作者將必須使用 影像修飾符 來手動添加預設。
編輯對話框允許內容作者裁剪、修改啟動映射和縮放影像。
裁剪、旋轉和縮放功能不適用於Dynamic Media資產。 如果 Dynamic Media特徵 啟用,任何此類對Dynamic Media資產的編輯都應通過 配置對話框。
開始裁剪
選擇此選項將開啟預定義裁剪比例的下拉框。
選擇裁剪選項後,使用藍色手柄來調整影像上的裁剪大小。
向右旋轉
使用此選項將影像向右(順時針)旋轉90°。
水準翻轉
使用此選項可水準翻轉影像或沿y軸旋轉180°影像。
垂直翻轉
使用此選項可垂直翻轉影像或沿x軸旋轉180°影像。
重設縮放
如果影像已縮放,則使用此選項重置縮放級別。
開啟縮放滑塊
使用此選項可顯示滑塊以控制影像的縮放級別。
就地編輯器也可用於修改影像。 由於空間限制,只有基本選項可線上使用。 對於完全編輯選項,請使用全屏模式。
GIF影像不支援影像編輯操作(裁剪、翻轉、旋轉)。 在編輯模式下對GIF所做的任何此類更改都不會保留。
設計對話框允許模板作者定義內容作者在使用此元件時具有的裁剪、上載和旋轉及上載選項。
在 主 頁籤,您可以定義影像的寬度清單(以像素為單位),元件將根據瀏覽器大小自動載入最合適的寬度。 這是 響應特徵 表徵圖。
此外,當作者將元件添加到頁面時,還可以定義自動或禁用哪些常規元件選項。
查看文檔 自適應影像Servlet 用於通過仔細定義寬度來優化格式副本選擇的提示。
在 功能 頁籤,您可以定義在使用元件(包括上載選項、方向和裁剪選項)時內容作者可以使用的選項。
來源
選擇選項 允許從檔案系統上載資產 允許內容作者從本地電腦上傳影像。 要強制內容作者僅從中選擇資AEM產,請取消選擇此選項。
方向
旋轉
使用此選項允許內容作者使用
向右旋轉 的雙曲餘切值。
翻轉
使用此選項允許內容作者使用
水準翻轉 和 垂直翻轉 頁籤
的 翻轉 選項。 啟用它將顯示 垂直翻轉 和 水準翻轉 影像元件的「編輯」對話框中的按鈕,但當前不支援該功能AEM,並且不會保留使用這些選項所做的任何更改。
裁切
選擇選項 允許裁剪 允許內容作者在「編輯」對話框的元件中裁剪影像。
請注意,AEM在中,裁剪縱橫比定義為 高度/寬度。 這不同於傳統的寬度/高度定義,是出於傳統相容性原因。 只要您提供比率的明確名稱,內容作者就不會察覺到任何差異,因為該名稱顯示在UI中,而不是比率本身。
映像元件支AEM持 樣式系統。
映像元件支援 Adobe客戶端資料層。