要將響應映像庫添加到網頁並使用該庫管理現有映像,請完成以下步驟。
使用響應映像庫
在Dynamic Media Classic, 建立影像預設 以防您計畫使用帶預設的響應影像庫。
在定義與響應影像庫一起使用的影像預設時,不要使用任何影響影像大小的設定,如 wid=
。 hei=
或 scl=
。 不要在「影像預設」中指定任何大小欄位。 相反,將其保留為空值。
將庫JavaScript檔案添加到網頁。
在使用庫API之前,請確保包括 responsive_image.js
。 此JavaScript檔案位於 libs/
標準IS查看器部署的子資料夾:
<s7viewers_root>/libs/responsive_image.js
設定現有映像。
庫從它正在使用的映像實例中讀取某些配置屬性。 在 s7responsiveImage
調用API函式來獲取此映像。
還建議將現有影像URL放入 data-src
屬性。 然後,設定現有 src
屬性,將1x1GIF影像編碼為資料URI。 這樣,可減少網頁在載入時發送的HTTP請求數。 但請注意,如果需要SEO(搜索引擎優化),最好設定 title
屬性。
以下是定義 data-breakpoints
影像的屬性,並使用編碼為資料URI的1x1GIF:
<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:
<script type="text/javascript">
s7responsiveImage(document.getElementById("responsiveImage"));
</script>
該庫支援同時處理網頁上的許多影像實例。 因此,對希望庫管理的每個映像重複上述步驟1和2。
對影像元素進行造型是網頁的責任,使其尺寸靈活。 響應影像庫本身不區分固定大小和「流體」影像。 如果應用於固定大小的影像,則只載入一次新影像。
以下代碼是普通網頁的完整示例,該網頁具有由響應影像庫管理的單個流體影像。 該示例包含額外的CSS樣式,使影像「響應」Web瀏覽器窗口大小:
<!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);
}
});