Documentazione API di server e rendering immagini Dynamic Medie

Utilizzo della libreria Immagine reattiva

Ultimo aggiornamento: 5 maggio 2025

Argomenti:

Creato per:

Sviluppatore
Utente

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= o scl=. 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 sottocartella libs/ 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 s7responsiveImage per tale immagine.

Si consiglia inoltre di inserire l'URL dell'immagine esistente nell'attributo data-src. Quindi, impostare l'attributo src esistente 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 attributo title sull'istanza dell'immagine.

Di seguito è riportato un esempio di definizione dell'attributo data-breakpoints per l'immagine e utilizzo di un GIF 1x1 codificato come URI dati:
<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 s7responsiveImage per ogni istanza di immagine gestita dalla libreria.

Chiamare la funzione API s7responsiveImage per 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'elemento IMG nel layout della pagina Web e alla densità dello schermo del dispositivo.

Il codice seguente è un esempio di chiamata della funzione API s7responsiveImage su un'immagine, supponendo che responsiveImage sia un ID dell'immagine:
<script type="text/javascript"> s7responsiveImage(document.getElementById("responsiveImage")); </script>

Esempio

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);
           }
        });

recommendation-more-help