影像元件(v1)

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

使用狀況

影像元件可輕鬆放置影像資產，並提供就地編輯功能。它具備可自適應選擇影像的功能，包括延遲載入以及為內容作者裁切。

範本作者可在設計對話方塊中定義允許的影像寬度以及裁切和其他設定。內容編輯器可以在configure dialog中上傳或選擇資產，並在編輯對話框中裁切影像。為方便起見，酒店還提供簡單的就地修改影像。

版本和相容性

本檔案說明第1版影像元件，最初是隨第1.0.0版核心元件及第AEM6.3版一起推出。

下表列出了映像元件v1的相容性。

版AEM本	影像元件v1
6.3	相容
6.4	相容

注意

本檔案說明影像元件的v1。

如需影像元件目前版本的詳細資訊，請參閱影像元件檔案。

元件輸出示例

以下範例取自We.Retail。

螢幕擷圖

HTML

<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
 
        <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}">
            <img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg?lang=zh-Hant" alt="Surfboard"/>
        </noscript>

</div>

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"
            }

注意

從核心元件匯出JSON需要1.1.0版的核心元件。如需詳細資訊，請參閱核心元件v1](/docs/experience-manager-core-components/versions.html?lang=zh-Hant)的[相容性資訊。

配置對話框

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

影像資產
- 從資產瀏覽器拖放資產，或點選browse選項，從本機檔案系統上傳。
- 點選或按一下Clear以取消選取目前選取的影像。
- 點選或按一下「編輯」，在資產編輯器中管理資產](https://helpx.adobe.com/tw/experience-manager/6-3/assets/using/managing-assets-touch-ui.html#main-pars_title_19)的轉譯。[
影像是裝飾性 -檢查協助技術是否應忽略影像，因此不需要替代文字。這僅適用於裝飾性影像。
替代文字 -視障讀者，影像意義或功能的文字替代文字。
連結
- 將影像連結至其他資源。
- 使用選擇對話框連結到另一AEM個資源。
- 如果未連結至AEM資源，請輸入絕對URL。非溶質的URL將被解釋為相對AEM。
標題 -影像下方顯示的其他相關資訊為預設值。
以快顯方式顯示標題 -勾選後，標題不會顯示在影像下方，但是當將滑鼠暫留在影像上時，某些瀏覽器會顯示為快顯。

編輯對話框

編輯對話方塊可讓內容作者裁切、修改啟動地圖，以及縮放影像。

開始裁切

選取此選項會開啟預先定義的裁切比例的下拉式清單。
- 選擇「Free Hand」（自由手）選項以定義您自己的裁切。
- 選擇「移除裁切」選項以顯示原始資產。
選取裁切選項後，使用藍色控點來調整影像上的裁切大小。
向右旋轉

使用此選項可將影像向右（順時針）旋轉90度。
啟動地圖

使用此選項可將啟動映射套用至影像。選取此選項會開啟新視窗，讓使用者可選取地圖的形狀：
- 新增矩形地圖
- 新增圓形圖
- 新增多邊形地圖
  - 依預設會新增三角形地圖。連按兩下形狀的一行，在新側面加入新的藍色調整大小控制點。
一旦選擇了地圖形狀，該形狀被疊加在影像上以允許調整大小。拖放藍色的調整大小控制點，以調整形狀。

調整啟動地圖大小後，按一下它以開啟浮動工具列，以定義連結的路徑。
- 路徑
  - 使用「路徑選擇器」選項，在
  - 如果路徑未在AEM中，請使用絕對URL。非絕對路徑將相對於進行解AEM釋。
  - 替代
    文本路徑目標的替代說明
  - 目標
    - 相同標籤
    - 新標籤
    - 父框架
    - 上框架
點選或按一下要儲存的藍色核取標籤、要取消的黑色x，以及紅色垃圾桶來刪除地圖。
重設縮放

如果影像已經縮放，請使用此選項來重設縮放等級。
開啟縮放滑桿

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

就地編輯器也可用於修改影像。由於空間限制，只有基本選項串聯可用。如需完整編輯選項，請使用全螢幕模式。

注意

GIF影像不支援影像編輯作業（裁切、翻轉、旋轉）。在編輯模式下對GIF所做的任何此類更改都不會持續存在。

設計對話框

設計對話方塊可讓範本作者定義內容作者使用此元件時的裁切、上傳和旋轉上傳。

主要

在Main標籤上，您可以定義允許寬度的清單（以像素為單位），以便自動從清單中載入最合適的寬度。

點選或按一下「新增」按鈕以新增其他大小。

使用抓握手柄重新排列尺寸順序。
使用刪除表徵圖可移除寬度。

依預設，影像載入會延遲至可見為止。選取「停用延遲載入」選項，以在頁面載入時載入影像。

功能

在功能標籤上，您可以定義當使用元件時，內容作者可使用哪些選項，包括上傳選項、方向和裁切選項。

來源

選取「允許資產從檔案系統上傳」選項，允許內容作者從本機電腦上傳影像。若要強制內容作者僅從中選取資產，請AEM取消選取此選項。
方向
- 旋轉 -使用此選項可讓內容作者使用「旋轉右鍵」。
- 反向(
  Flip)使用此選項可讓內容作者使用
  「水準 翻轉」和「垂直翻轉」選項。
注意

預設情況下，Flip選項被禁用。啟用它將在影像元件的編輯對話方塊中顯示垂直翻轉和水準翻轉按鈕，但是目前不支援此功能，而且使用這些選項所做的任何變更都不會持續存在AEM。
裁切

選擇「允許裁切」選項，允許內容作者在編輯對話框的元件中裁切影像。
- 按一下添加添加預定義的裁切外觀比例。
- 輸入描述性名稱，該名稱將顯示在開始裁切下拉式清單中。
- 輸入長寬的數值比。
- 使用拖動控制滑塊重新排列長寬比順序
- 使用垃圾桶圖示來刪除外觀比例。
注意

請注意，AEM在中，裁切長寬比定義為height/width。這與傳統的寬度／高度定義不同，而且是基於舊有相容性的原因。只要您提供清楚的比率名稱，內容作者就不會察覺到任何差異，因為該名稱會顯示在UI中，而非比率本身。