Utilizzo della libreria Immagine reattiva using-responsive-image-library
La procedura seguente illustra come aggiungere una libreria di immagini reattive a una pagina web e gestire le immagini esistenti con la libreria.
Per utilizzare la libreria Immagine reattiva
-
In Dynamic Media Classic, crea un predefinito immagine se intendi utilizzare la libreria Immagine reattiva con i predefiniti.
Quando definisci i predefiniti immagine da utilizzare con la Libreria immagini reattiva, non utilizzare impostazioni che influiscono sulla dimensione dell'immagine, ad esempio
wid=,hei=oscl=. Non specificare alcun campo di dimensione nel predefinito immagine. Lasciali invece vuoti. -
Aggiungi il file JavaScript della libreria alla pagina web.
Prima di poter utilizzare l'API della libreria, accertarsi di includere
responsive_image.js. Questo file JavaScript si trova nella sottocartellalibs/della distribuzione standard IS-Viewers:<s7viewers_root>/libs/responsive_image.js -
Configura le immagini esistenti.
La libreria legge alcuni attributi di configurazione da un’istanza di immagine con cui sta lavorando. Definire gli attributi prima che venga chiamata la funzione API
s7responsiveImageper tale immagine.Si consiglia inoltre di inserire l'URL dell'immagine esistente nell'attributo
data-src. Quindi, impostare l'attributosrcesistente in modo che un'immagine GIF 1x1 sia codificata come URI dati. In questo modo, riduce il numero di richieste HTTP inviate dalla pagina web al momento del caricamento. Tuttavia, se è necessario l'ottimizzazione SEO (Search Engine Optimization), è meglio impostare un attributotitlesull'istanza dell'immagine.Di seguito è riportato un esempio di definizione dell'attributo
data-breakpointsper l'immagine e utilizzo di un GIF 1x1 codificato come URI dati: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"> -
Chiamare la funzione API
s7responsiveImageper ogni istanza di immagine gestita dalla libreria.Chiamare la funzione API
s7responsiveImageper ogni istanza di immagine gestita dalla libreria. Dopo tale chiamata, la libreria sostituisce l'immagine originale con l'immagine scaricata da Image Server in base alle dimensioni di runtime dell'elementoIMGnel layout della pagina Web e alla densità dello schermo del dispositivo.Il codice seguente è un esempio di chiamata della funzione API
s7responsiveImagesu un'immagine, supponendo cheresponsiveImagesia un ID dell'immagine:code language-none <script type="text/javascript"> s7responsiveImage(document.getElementById("responsiveImage")); </script>
Esempio example-0509a0dd2a8e4fd58b5d39a0df47bd87
La libreria supporta l’utilizzo simultaneo di più istanze di immagini sulla pagina web. Ripeti quindi i passaggi 1 e 2 precedenti per ogni immagine che desideri gestire con la libreria.
È responsabilità della pagina web applicare uno stile all’elemento immagine per renderlo di dimensioni flessibili. La libreria Immagine reattiva di per sé non distingue tra immagini di dimensioni fisse e immagini "fluide". Se applicata a un’immagine a dimensione fissa, la nuova immagine viene caricata una sola volta.
Il codice seguente è un esempio completo di una pagina web banale con una singola immagine fluida gestita dalla libreria Immagine reattiva. L’esempio contiene uno stile CSS aggiuntivo per rendere l’immagine "reattiva" alle dimensioni della finestra del browser 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>
Utilizzo di ritaglio avanzato
In AEM 6.4 e Dynamic Medie Viewers 5.9 sono disponibili due modalità di ritaglio avanzato:
- Manuale: i punti di interruzione definiti dall'utente e i comandi del servizio immagini corrispondenti sono definiti all'interno di un attributo nell'elemento immagine.
- Ritaglio avanzato - le rappresentazioni di ritaglio avanzato calcolate vengono recuperate automaticamente dal server di consegna. La rappresentazione migliore viene selezionata utilizzando le dimensioni di runtime dell’elemento immagine.
Per utilizzare la modalità Ritaglio avanzato, impostare l'attributo data-mode su smart crop. Ad esempio:
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset"
data-mode="smartcrop">
L'elemento immagine associato invia un evento s7responsiveViewer durante il runtime quando cambia il punto di interruzione.
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);
}
});