核心元件影像元件是自我調整影像元件,具備就地編輯的功能。
影像元件提供最適化影像選擇和回應式行為,頁面訪客可延遲載入,內容作者可輕鬆放置和裁切影像。
範本作者可以在中定義影像寬度、裁切以及其他設定。 設計對話方塊. 內容編輯者可以上傳或選取 設定對話方塊 並裁切影像 編輯對話方塊. 為了增加便利性,您也可以使用簡單的影像就地修改。
本檔案說明影像元件v2,此版本隨2018年1月的核心元件發行版本2.0.0的發佈引入。
本檔案說明影像元件v1。
如需目前版本的影像元件的詳細資訊,請參閱 影像元件 檔案。
影像元件隨附強大的回應式功能,立即可用。 在頁面範本層級, 設計對話方塊 可用來定義影像資產的預設寬度。 然後,影像元件會自動載入正確的寬度,以根據瀏覽器視窗的大小來顯示。 視窗調整大小時,影像元件會即時動態載入正確的影像大小。 元件開發人員無需擔心自訂媒體查詢的定義方式,因為影像元件已最佳化以載入您的內容。
此外,影像元件支援延遲載入,將實際影像資產的載入延遲到顯示在瀏覽器中時,以提高頁面的回應速度。
影像元件由最適化影像Servlet提供技術支援。 請參閱檔案 最適化影像Servlet 瞭解其運作方式的詳細資訊。
影像元件(截至 版本2.13.0)支援 Dynamic Media 資產。 啟用時, 這些功能可讓您透過簡單的拖放功能或透過資產瀏覽器,像新增任何其他影像一樣新增Dynamic Media影像資產。 此外,也支援影像修飾元、影像預設集和智慧型裁切。
使用核心元件建立的網頁體驗無法具備豐富、Sensei支援、健全、高效能、跨平台的Dynamic Media影像功能。
影像元件支援可縮放的向量圖形(SVG)。
基於安全考量,影像編輯器絕對不會直接呼叫原始SVG。 會透過呼叫 <img src=“path-to-component”>
. 這可防止瀏覽器執行SVG檔案中內嵌的任何指令碼。
若要體驗影像元件並檢視其設定選項範例以及HTML和JSON輸出,請造訪 元件資料庫.
有關影像元件的最新技術檔案 可在GitHub上找到.
有關開發核心元件的進一步詳細資訊,請參閱 核心元件開發人員檔案.
影像元件支援 schema.org microdata.
除了標準 編輯對話方塊 和 設計對話方塊,影像元件會提供「設定」對話方塊,其中會定義影像本身及其說明和基本屬性。
&
,無論哪一個 預設集型別 「 」已選取。dc:description
dam中的中繼資料。dc:title
dam中的中繼資料。智慧型裁切 和 影像預設集 是互斥選項。 如果作者需要使用影像預設集以及智慧型裁切轉譯,該作者必須使用 影像修飾元 以手動新增預設集。
內容作者可以使用「編輯」對話方塊裁切、修改啟動地圖及縮放影像。
裁切、旋轉和縮放功能不適用於Dynamic Media資產。 如果 Dynamic Media功能 已啟用,對Dynamic Media資產的任何這類編輯都應該透過 設定對話方塊。
開始裁切
選取此選項會開啟預先定義裁切比例的下拉式清單。
選取裁切選項後,請使用藍色控點來調整影像上的裁切大小。
向右旋轉
使用此選項可將影像向右(順時針)旋轉90°。
水準翻轉
使用此選項可水準翻轉影像或沿y軸將影像旋轉180°。
垂直翻轉
使用此選項可垂直翻轉影像或沿x軸將影像旋轉180°。
重設縮放
如果影像已經縮放,請使用此選項來重設縮放等級。
開啟縮放滑桿
使用此選項可顯示控制影像縮放等級的滑桿。
就地編輯器也可用來修改影像。 由於空間限制,僅基本選項內嵌提供。 如需完整編輯選項,請使用全熒幕模式。
GIF影像不支援影像編輯操作(裁切、翻轉、旋轉)。 在編輯模式下對GIF所做的任何此類變更都不會持續存在。
「設計」對話方塊可讓範本作者定義內容作者在使用此元件時的裁切、上傳、輪換和上傳選項。
於 主要 索引標籤您可以定義影像的寬度(以畫素為單位),元件會根據瀏覽器大小自動載入最適合的寬度。 這是 回應式功能 影像元件的。
此外,您可以定義在作者將元件新增至頁面時,會自動或停用哪些一般元件選項。
檢視檔案 最適化影像Servlet 提供透過仔細定義寬度來最佳化轉譯選擇的秘訣。
於 功能 索引標籤您可以定義在使用元件時內容作者可用的選項,包括上傳選項、方向和裁切選項。
來源
選取選項 允許從檔案系統上傳資產 允許內容作者從其本機電腦上傳影像。 若要強制內容作者僅從AEM中選取資產,請取消選取此選項。
方向
旋轉
使用此選項可允許內容作者使用
向右旋轉 選項。
翻轉
使用此選項可允許內容作者使用
水準翻轉 和 垂直翻轉 選項。
此 翻轉 選項預設為停用。 啟用時將會顯示 垂直翻轉 和 水準翻轉 按鈕,但AEM目前不支援此功能,且不會保留使用這些選項所做的任何變更。
裁切
選取選項 允許裁切 讓內容作者在「編輯」對話方塊中裁切元件中的影像。
請注意,在AEM中,裁切比例定義為 高度/寬度. 這與傳統的寬度/高度定義不同,這樣做是出於舊版相容性的原因。 只要您提供明確的比率名稱,內容作者就不會察覺到任何差異,因為該名稱顯示在UI中,而不是比率本身。
影像元件支援AEM 樣式系統.
影像元件支援 Adobe使用者端資料層。