使用回應式影像庫

若要將回應式影像程式庫新增至網頁,並使用程式庫管理現有影像,請完成下列步驟。

使用回應式影像庫的方式

  1. 在Dynamic Media Classic中,建立影像預設集,以備您打算搭配預設使用回應式影像資料庫時使用。

    定義與回應式影像資料庫搭配使用的影像預設集時,請勿使用任何影響影像大小的設定,例如wid=hei=scl=。 請勿在「影像預設集」中指定任何大小欄位。 請改為保留為空白值。

  2. 將程式庫JavaScript檔案新增至您的網頁。

    請務必加入responsive_image.js,才能使用程式庫API。 此JavaScript檔案位於標準IS-Viewers部署的libs/子資料夾中:

    <s7viewers_root>/libs/responsive_image.js

  3. 設定現有影像。

    程式庫會從其使用的影像例項中讀取特定設定屬性。 在為此影像呼叫s7responsiveImage API函式之前定義屬性。

    建議您將現有影像URL放入data-src屬性中。 然後,設定現有的src屬性,使其具有編碼為資料URI的1x1 GIF影像。 這麼做可減少網頁在載入時傳送的HTTP要求數量。 不過請注意,如果需要SEO(搜尋引擎最佳化),最好在影像例項上設定title屬性。

    以下是定義影像的data-breakpoints屬性並使用1x1 GIF編碼為資料URI的示例:

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">
    
  4. 呼叫程式庫所管理之每個影像例項的s7responsiveImage API函式。

    呼叫程式庫所管理之每個影像例項的s7responsiveImage API函式。 在這類呼叫後,程式庫會根據網頁版面中IMG元素的執行階段大小和裝置畫面密度,以從「影像伺服」下載的影像取代原始影像。

    以下程式碼是在影像上呼叫s7responsiveImage API函式的範例,假設responsiveImage為該影像的ID:

    <script type="text/javascript"> 
     s7responsiveImage(document.getElementById("responsiveImage")); 
    </script>
    

範例

程式庫支援同時處理網頁上的許多影像例項。 因此,請針對您希望程式庫管理的每個影像,重複上述步驟1和2。

網頁有責任為影像元素設定樣式,以使其在大小上有彈性。 回應式影像庫本身不會區分固定大小和「流暢」的影像。 如果套用至固定大小的影像,則只會載入新影像一次。

下列程式碼是簡單網頁的完整範例,該網頁具有由回應式影像程式庫管理的單一流體影像。 此範例包含額外的CSS樣式,讓影像對網頁瀏覽器視窗大小「回應」:

<!DOCTYPE html> 
<html> 
 <head> 
  <style type="text/css"> 
  .container { 
   width: 50%; 
  } 
  .fluidimage { 
   max-width: 100%; 
  } 
  </style> 
 </head> 
 <body> 
  <div class="container"> 
   <img id="responsiveImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="200,400,600,800" class="fluidimage"> 
  </div> 
  <script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/libs/responsive_image.js"></script> 
  <script type="text/javascript"> 
   s7responsiveImage(document.getElementById("responsiveImage")); 
  </script> 
 </body> 
</html>

使用智慧型裁切

AEM 6.4和Dynamic Media Viewers 5.9提供兩種智慧型裁切模式:

  • 手動 — 在影像元素的屬性內定義用戶定義的斷點和相應的影像服務命令。
  • 智慧型裁切 — 計算的智慧型裁切轉譯會自動從傳送伺服器擷取。使用影像元素的運行時大小選擇最佳格式副本。

要使用智慧裁切模式,請將data-mode屬性設定為smart crop。 例如:

<img 
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset" 
data-mode="smartcrop">

當斷點更改時,關聯的映像元素在運行時分派s7responsiveViewer事件。

         responsiveImage.addEventListener("s7responsiveViewer", function (event) { 
           var s7event = event.s7responsiveViewerEvent; 
           if(s7event.type == "breakpointchanged") { 
              console.log("New width: " + s7event.width); 
              console.log("Old width: " + s7event.oldWidth); 
           } 
        });

本頁內容