影像元件(v1)

上次更新： 2023-05-26
  • 建立對象：
  • Developer
    Admin
    User

核心元件影像元件是最適化影像元件，具備就地編輯的功能。

使用狀況

影像元件可讓您輕鬆放置影像資產，並就地編輯。 此版本提供具延遲載入功能的自我調整影像選擇，以及為內容作者裁切。

範本作者可以在中定義允許的影像寬度以及裁切和其他設定。 設計對話方塊. 內容編輯者可以上傳或選取 設定對話方塊 並裁切影像 編輯對話方塊. 為了增加便利性，您也可以使用簡單的影像就地修改。

版本和相容性

本檔案說明影像元件v1，其最初隨附於AEM 6.3的核心元件1.0.0版引入。

下表列出影像元件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" 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的相容性資訊 以取得詳細資訊。

設定對話方塊

除了標準 編輯對話方塊 和 設計對話方塊，影像元件會提供「設定」對話方塊，其中會定義影像本身及其說明和基本屬性。

  • 影像資產

    • 從拖放資產 資產瀏覽器 或點選 瀏覽 從本機檔案系統上傳的選項。
    • 點選或按一下 清除 以取消選取目前選取的影像。
    • 點選或按一下 編輯 至 管理資產的轉譯 在資產編輯器中。

  • 裝飾性影像 — 檢查輔助技術是否應忽略影像，因此不需要替代文字。 這僅適用於裝飾性影像。

  • 替代文字 — 影像含義或功能的替代文字，適用於視障讀者。

  • 連結

    • 將影像連結至其他資源。
    • 使用選取對話方塊來連結至其他AEM資源。
    • 如果未連結至AEM資源，請輸入絕對URL。 非解決方案URL將解譯為相對於AEM。

  • 註解 — 影像的其他相關資訊，預設顯示在影像下方。

  • 以快顯視窗顯示註解 — 檢查完畢後，註解不會顯示在影像下方，但如在某些瀏覽器中將滑鼠懸停在影像上，註解會以快顯模式顯示。

編輯對話方塊

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

  • 開始裁切

    選取此選項會開啟預先定義裁切比例的下拉式清單。

    • 選擇選項 手繪 以定義您自己的裁切。
    • 選擇選項 移除裁切 以顯示原始資產。

    選取裁切選項後，請使用藍色控點來調整影像上的裁切大小。

  • 向右旋轉

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

  • 啟動地圖

    使用此選項可將啟動地圖套用至影像。 選取此選項會開啟一個新視窗，讓使用者選取地圖的形狀：

    • 新增矩形地圖

    • 新增圓形地圖

    • 新增多邊形地圖

      • 依預設，會新增三角形地圖。 連按兩下形狀的一條線可在新的一側新增新的藍色調整大小操作框。

    選取地圖形狀後，它就會疊加在影像上，允許調整大小。 拖放藍色調整大小控點以調整形狀。

    調整啟動地圖的大小後，按一下它可開啟浮動工具列以定義連結的路徑。

    • 路徑

      • 使用路徑選擇器選項可在AEM中選取路徑

      • 如果路徑不在AEM中，請使用絕對URL。 非絕對路徑將解釋為相對於AEM。

      • 替代文字
        路徑目的地的替代說明

      • 目標

        • 相同標籤
        • 新索引標籤
        • 父框架
        • 上框架

    點選或按一下藍色勾號可儲存，點選或按一下黑色x可取消，點選或按一下紅色垃圾桶可刪除地圖。

  • 重設縮放

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

  • 開啟縮放滑桿

    使用此選項可顯示控制影像縮放等級的滑桿。

就地編輯器也可用來修改影像。 由於空間限制，僅基本選項內嵌提供。 如需完整編輯選項，請使用全熒幕模式。

注意

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

設計對話方塊

使用「設計」對話方塊，範本作者可在使用此元件時定義內容作者的裁切、上傳和輪換上傳。

主要

於 主要 索引標籤您可以定義允許的寬度清單（以畫素為單位），以便影像從清單中自動載入最適合的寬度。

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

  • 使用抓取控點來重新排列大小。
  • 使用刪除圖示可移除寬度。

依預設，影像載入會延遲到它們變成可見為止。 選取選項 停用延遲載入 以在頁面載入時載入影像。

功能

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

  • 啟用Web最佳化的影像 — 檢查完畢後，網頁最佳化的影像傳送服務會傳送WebP格式的影像，平均將影像大小減少25%。

    • 此選項僅適用於AEMaaCS。
    • 取消勾選或Web最佳化的影像傳送服務無法使用時， 最適化影像Servlet 已使用。

  • 來源

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

  • 方向

    • 旋轉 — 使用此選項可允許內容作者使用 向右旋轉 選項。
    • 翻轉
      使用此選項可允許內容作者使用
      水準翻轉 和 垂直翻轉 選項。
    注意

    此 翻轉 選項預設為停用。 啟用時將會顯示 垂直翻轉 和 水準翻轉 按鈕，但AEM目前不支援此功能，且不會保留使用這些選項所做的任何變更。

  • 裁切

    選取選項 允許裁切 讓內容作者在「編輯」對話方塊中裁切元件中的影像。

    • 按一下 新增 以新增預先定義的裁切外觀比例。
    • 輸入描述性名稱，該名稱將顯示在 開始裁切 下拉式清單。
    • 輸入外觀的數字比例。
    • 使用拖曳操作框來重新排列長寬比
    • 使用垃圾桶圖示可刪除長寬比。
    注意

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

技術細節

有關影像元件的最新技術檔案 可在GitHub上找到.

您可以從GitHub下載整個核心元件專案。

有關開發核心元件的進一步詳細資訊，請參閱 核心元件開發人員檔案.

上一頁
Next page

此頁面上的