使用Responsive影像資料庫 using-responsive-image-library

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員
使用者

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

使用回應式影像庫

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

定義與回應式影像資料庫搭配使用的影像預設集時，請勿使用任何會影響影像大小的設定，例如wid=、hei=或scl=。請勿在影像預設集中指定任何大小欄位。請改為保留為空白值。
將資料庫JavaScript檔案新增至您的網頁。

在可以使用資料庫API之前，請確定您已包含responsive_image.js。此JavaScript檔案位於標準IS-Viewers部署的libs/子資料夾中：

<s7viewers_root>/libs/responsive_image.js

設定現有影像。

程式庫會從正在使用的影像例項讀取某些組態屬性。在為此類影像呼叫s7responsiveImage API函式之前定義屬性。

也建議您將現有的影像URL放入data-src屬性中。然後，設定現有的src屬性，將1x1GIF影像編碼為資料URI。如此一來，可減少網頁在載入時傳送的HTTP要求數目。但是請注意，如果需要SEO （搜尋引擎最佳化），最好在影像執行個體上設定title屬性。

以下範例說明如何定義影像的data-breakpoints屬性，並使用編碼為資料URI的1x1GIF：

code language-none
`<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">`

呼叫資料庫所管理之每個影像執行個體的s7responsiveImage API函式。

呼叫資料庫所管理之每個影像執行個體的s7responsiveImage API函式。進行這類呼叫後，資料庫會根據網頁版面中IMG元素的執行階段大小和裝置熒幕的密度，將原始影像取代為從「影像伺服」下載的影像。

下列程式碼是在影像上呼叫s7responsiveImage API函式的範例，假設responsiveImage是該影像的ID：

code language-none
`<script type="text/javascript"> s7responsiveImage(document.getElementById("responsiveImage")); </script>`

範例 example-0509a0dd2a8e4fd58b5d39a0df47bd87

資料庫支援同時使用網頁上的許多影像執行個體。因此，請針對您想要程式庫管理的每個影像，重複上述步驟1和2。

網頁應負責設定影像元素的樣式，使其大小可彈性調整。 Responsive影像資料庫本身不會區別固定大小和「流動」影像。如果套用至固定大小的影像，則只會載入新影像一次。

下列程式碼為簡單網頁的完整範例，此網頁具有由Responsive Image資料庫管理的單一Fluid影像。此範例包含額外的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);
           }
        });

recommendation-more-help

a26166cd-f2f4-45ce-996d-96a0f0d6cf49