Verwenden der Bibliothek "Responsives Bild"

Führen Sie die folgenden Schritte aus, um eine Bibliothek für responsives Bild zu einer Webseite hinzuzufügen und vorhandene Bilder mit der Bibliothek zu verwalten.

So verwenden Sie die Bibliothek "Responsives Bild"

  1. Erstellen Sie in Dynamic Media Classic eine Bildvorgabe für den Fall, dass Sie die Bibliothek "Responsives Bild"mit Vorgaben verwenden möchten.

    Verwenden Sie beim Definieren von Bildvorgaben, die mit der responsiven Bildbibliothek verwendet werden, keine Einstellungen, die sich auf die Bildgröße auswirken, z. B. wid=, hei= oder scl=. Geben Sie in der Bildvorgabe keine Größenfelder an. Lassen Sie sie stattdessen als leere Werte.

  2. Fügen Sie die JavaScript-Bibliotheksdatei zu Ihrer Webseite hinzu.

    Bevor Sie die Bibliotheks-API verwenden können, stellen Sie sicher, dass Sie responsive_image.js angeben. Diese JavaScript-Datei befindet sich im Unterordner libs/ Ihrer standardmäßigen IS-Viewer-Bereitstellung:

    <s7viewers_root>/libs/responsive_image.js

  3. Richten Sie vorhandene Bilder ein.

    Die Bibliothek liest bestimmte Konfigurationsattribute aus einer Bildinstanz, mit der sie arbeitet. Definieren Sie Attribute, bevor die API-Funktion s7responsiveImage für ein solches Bild aufgerufen wird.

    Es wird außerdem empfohlen, die vorhandene Bild-URL in das Attribut data-src einzutragen. Richten Sie dann das vorhandene Attribut src ein, damit ein 1x1-GIF-Bild als Daten-URI kodiert wird. Dadurch wird die Anzahl der HTTP-Anfragen reduziert, die von der Webseite beim Laden gesendet werden. Beachten Sie jedoch, dass es besser ist, ein title -Attribut in der Bildinstanz einzurichten, wenn SEO (Suchmaschinenoptimierung) benötigt wird.

    Im Folgenden finden Sie ein Beispiel für die Definition des Attributs data-breakpoints für das Bild und die Verwendung eines 1x1-GIF, das als Daten-URI kodiert ist:

    <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. Rufen Sie die API-Funktion s7responsiveImage für jede Bildinstanz auf, die von der Bibliothek verwaltet wird.

    Rufen Sie die API-Funktion s7responsiveImage für jede Bildinstanz auf, die von der Bibliothek verwaltet wird. Nach einem solchen Aufruf ersetzt die Bibliothek das Originalbild durch das Bild, das vom Image Serving heruntergeladen wird, entsprechend der Laufzeitgröße des Elements IMG im Webseitenlayout und der Dichte des Gerätebildschirms.

    Der folgende Code ist ein Beispiel für den Aufruf der API-Funktion s7responsiveImage für ein Bild, vorausgesetzt responsiveImage ist eine ID dieses Bildes:

    <script type="text/javascript"> 
 s7responsiveImage(document.getElementById("responsiveImage")); 
</script>

Beispiel

Die Bibliothek unterstützt das gleichzeitige Arbeiten mit vielen Bildinstanzen auf der Web-Seite. Wiederholen Sie daher die obigen Schritte 1 und 2 für jedes Bild, das von der Bibliothek verwaltet werden soll.

Es liegt in der Verantwortung der Webseite, das Bildelement so zu gestalten, dass es flexibel in der Größe ist. Die Bibliothek für responsives Bild selbst unterscheidet nicht zwischen Bildern mit fester Größe und Bildern mit "fließendem Inhalt". Wenn es auf ein Bild mit fester Größe angewendet wird, wird das neue Bild nur einmal geladen.

Der folgende Code ist ein vollständiges Beispiel für eine triviale Web-Seite mit einem einzelnen fließenden Bild, das von der Bibliothek für responsives Bild verwaltet wird. Das Beispiel enthält zusätzliche CSS-Stile, um das Bild entsprechend der Fenstergröße des Webbrowsers "responsiv"zu machen:

<!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>

Verwenden von smartem Zuschneiden

In AEM 6.4 und Dynamic Media Viewers 5.9 sind zwei Modi für smartes Zuschneiden verfügbar:

  • Manuell : Benutzerdefinierte Haltepunkte und entsprechende Image Service-Befehle werden innerhalb eines Attributs im Bildelement definiert.
  • Smartes Zuschneiden : Berechnete Ausgabedarstellungen für smartes Zuschneiden werden automatisch vom Versandserver abgerufen. Die beste Ausgabedarstellung wird mithilfe der Laufzeitgröße des Bildelements ausgewählt.

Um den Modus Smartes Zuschneiden zu verwenden, legen Sie das Attribut data-mode auf smart crop fest. Beispiel:

<img 
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset" 
data-mode="smartcrop">

Das verknüpfte Bildelement sendet während der Laufzeit ein s7responsiveViewer -Ereignis, wenn sich der Breakpoint ändert.

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

Auf dieser Seite