影像元件(v1) image-component-v
核心元件影像元件是自我調整影像元件，具備就地編輯的功能。
使用情況 usage
影像元件可讓您輕鬆放置影像資產，並就地編輯。 它具有帶有延遲載入的自我調整影像選擇，以及內容作者的裁切。
範本作者可以在設計對話方塊中定義允許的影像寬度以及裁切和其他設定。 內容編輯者可以在設定對話方塊上傳或選取資產，並在編輯對話方塊裁切影像。 為了增加便利性，您也可以簡單地就地修改影像。
版本和相容性 version-and-compatibility
本檔案說明影像元件v1，其最初隨附於AEM 6.3的核心元件1.0.0版引入。
下表列出影像元件v1的相容性。
範例元件輸出 sample-component-output
以下是從We.Retail中取得的範例。
螢幕擷圖 screenshot
HTML html
<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
<noscript data-cmp-image="{"smartImages":[],"smartSizes":[],"lazyEnabled":true}">
<img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
</noscript>
</div>
JSON json
"image": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"smartSizes": [],
"smartImages": [],
"lazyEnabled": true,
"src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
":type": "weretail/components/content/image"
}
設定對話方塊 configure-dialog
除了標準編輯對話方塊和設計對話方塊之外，影像元件還提供設定對話方塊，其中影像本身與其描述和基本屬性一起定義。
-
影像資產
- 從資產瀏覽器拖放資產，或點選 瀏覽 選項，以從本機檔案系統上傳。
- 點選或按一下 清除 以取消選取目前選取的影像。
- 點選或按一下 編輯 以在資產編輯器中管理資產的轉譯。
-
影像為裝飾性 — 檢查輔助技術是否應忽略影像，因此不需要替代文字。 這僅適用於裝飾性影像。
-
替代文字 — 影像含義或功能的替代文字，適用於視障讀者。
-
連結
- 將影像連結至其他資源。
- 使用選取對話方塊可連結至其他AEM資源。
- 如果未連結至AEM資源，請輸入絕對URL。 非絕對URL將會解譯為相對於AEM。
-
標題 — 影像的其他相關資訊，預設會顯示於影像下方。
-
以快顯視窗顯示註解 - 檢查完畢後，註解不會顯示在影像下方，但如在某些瀏覽器中將滑鼠懸停在影像上，註解會以快顯模式顯示。
編輯對話方塊 edit-dialog
此編輯對話方塊可讓內容作者裁切、修改啟動地圖及縮放影像。
-
開始裁切
選取此選項會開啟預先定義裁切比例的下拉式清單。
- 選擇選項 手繪 來定義您自己的裁切。
- 選擇選項 移除裁切 以顯示原始資產。
選取裁切選項後，請使用藍色控點來調整影像上的裁切大小。
-
向右旋轉
使用此選項可將影像向右（順時針）旋轉90°。
-
啟動地圖
使用此選項將啟動地圖套用至影像。 選取此選項會開啟一個新視窗，讓使用者選取地圖的形狀：
-
新增矩形地圖
-
新增圓形地圖
-
新增多邊形地圖
- 依預設，會新增三角形地圖。 連按兩下圖案的線條，在新的一側加入新的藍色調整大小控點。
選取地圖形狀後，它就會疊加在影像上，允許調整大小。 拖放藍色調整大小控點以調整形狀。
調整啟動地圖的大小後，按一下它可開啟浮動工具列以定義連結的路徑。
-
路徑
-
使用路徑選擇器選項可在AEM中選取路徑
-
如果路徑不在AEM中，請使用絕對URL。 非絕對路徑將解譯為相對於AEM。
-
替代文字
路徑目的地的替代說明 -
目標
- 相同標籤
- 新索引標籤
- 父框架
- 上框架
-
點選或按一下藍色核取記號即可儲存，點選或按一下黑色x可取消，點選或按一下紅色垃圾桶可刪除地圖。
-
-
重設縮放
如果影像已經縮放，請使用此選項來重設縮放等級。
-
開啟縮放滑桿
使用此選項可顯示控制影像縮放等級的滑桿。
就地編輯器也可用於修改影像。 由於空間限制，僅基本選項內嵌。 如需完整的編輯選項，請使用全熒幕模式。
設計對話方塊 design-dialog
「設計」對話方塊可讓範本作者在使用此元件時，定義內容作者的裁切、上傳和輪換上傳。
主要 main
在 主要 標籤上，您可以定義允許的寬度（以畫素為單位）清單，讓影像從清單中自動載入最適當的寬度。
點選或按一下「新增」按鈕以新增其他大小。
- 使用抓取操作框來重新排列大小。
- 使用刪除圖示可移除寬度。
依預設，影像載入會延遲到影像可見為止。 選取選項 停用延遲載入 以在頁面載入時載入影像。
-
啟用Web最佳化影像 — 勾選後，Web最佳化影像傳送服務將以WebP格式傳送影像，平均將影像大小減少25%。
- 此選項僅在AEMaaCS中可用。
- 取消勾選或Web最佳化的影像傳遞服務無法使用時，會使用最適化影像Servlet。
功能 features
在 功能 標籤上，您可以定義在使用元件時內容作者可用的選項，包括上傳選項、方向以及裁切選項。
-
啟用Web最佳化影像 — 選取後，Web最佳化影像傳送服務會傳送WebP格式的影像，平均將影像大小減少25%。
- 此選項僅在AEMaaCS中可用。
- 取消勾選或Web最佳化的影像傳遞服務無法使用時，會使用最適化影像Servlet。
-
來源
選取選項 允許從檔案系統上傳資產，以允許內容作者從其本機電腦上傳影像。 若要強制內容作者僅從AEM中選取資產，請取消選取此選項。
-
方向
- 旋轉 — 使用此選項可允許內容作者使用 向右旋轉 選項。
- 翻轉
使用此選項可允許內容作者使用 水準翻轉 和 垂直翻轉 選項。
note caution CAUTION Flip 選項預設為停用。 啟用此選項會在影像元件的編輯對話方塊中顯示 垂直翻轉 和 水準翻轉 按鈕，但AEM目前不支援此功能，且不會保留使用這些選項所做的任何變更。 -
裁切
選取選項 允許裁切，以允許內容作者在編輯對話方塊中裁切元件中的影像。
- 按一下「新增 」以新增預先定義的裁切外觀比例。
- 輸入描述性名稱，此名稱將顯示在 開始裁切 下拉式清單中。
- 輸入外觀的數字比例。
- 使用拖曳操作框來重新排列長寬比
- 使用垃圾桶圖示可刪除外觀比例。
note caution CAUTION 請注意，在AEM中，裁切外觀比例定義為 高度/寬度。 這和寬度/高度比的傳統定義不同，並且是由於舊有相容性的原因完成的。只要您提供明確的比率名稱，內容作者就不會察覺任何差異，因為該名稱會顯示在UI中，而非比率本身。
技術細節 technical-details
在GitHub🔗上可找到有關影像元件的最新技術檔案。
您可以從GitHub下載整個核心元件專案。
在核心元件開發人員檔案中可找到有關開發核心元件的進一步詳細資料。