使用自適應影像庫

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

使用互動式影像庫

  1. 在Dynamic Media經典影像中，建立影像預設集，以備您打算使用含預設集的自適應影像庫時使用。

    當您定義與自適應影像庫搭配使用的影像預設集時，請勿使用影響影像大小的任何設定，例如wid=、hei=或scl=。 請勿在「影像預設集」中指定任何大小欄位。 請改為將其保留為空白值。

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

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

    <s7viewers_root>/libs/responsive_image.js

  3. 設定現有影像。

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

    建議您將現有的影像URL放入data-src屬性中。 然後，將現有的src屬性設為1x1 GIF影像編碼為「資料URI」。 這麼做會減少網頁在載入時傳送的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>

使用智慧型裁切

6.4和Dynamic Media檢視器5.9提供AEM兩種智慧型裁切模式：

  • 手動 -用戶定義的斷點和相應的「影像服務」命令在影像元素的屬性中定義。
  • 智慧型裁切 -計算的智慧型裁切轉譯會自動從傳送伺服器擷取。使用影像元素的執行時期大小來選取最佳轉譯。

要使用智慧裁切模式，請將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); 
           } 
        });

本頁內容