Befehlsreferenz - Konfigurationsattribute

Konfigurationsattribute werden als Attribute direkt auf einem IMG-Element definiert, das von der Bibliothek "Responsives Bild"verwaltet wird. Jedes Bild kann über einen eigenen Satz von Attributen verfügen.

data-src

Optional.

URL zum Bild, das von Image Serving bereitgestellt wird. Wenn die URL nicht vorhanden ist, verwendet die Bibliothek den Wert, der im Attribut src festgelegt ist, als Fallback. Dieses Attribut stellt das Anfangsbild und das dynamische Bild bereit, das von der Bibliothek für responsives Bild von verschiedenen Orten aus verwaltet wird.

Beispiel

<img data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

src

Wenn data-src festgelegt ist, ist src optional und kann jede URL enthalten, die Sie hinzufügen möchten. Beispielsweise kann es eine URL zum selben Bild enthalten, das auf Image Serving basiert und von der Bibliothek verwendet wird. Oder sie kann einen GIF-Platzhalter oder sogar einen Daten-URI enthalten, um einen zusätzlichen Server-Round-Trip beim Start zu vermeiden.

Wenn data-src nicht festgelegt ist, ist src erforderlich und muss eine URL zum Bild enthalten, das von Image Serving bereitgestellt wird.

Beispiel

Verwenden des Daten-URI für das Attribut src und der Image Serving-URL für das Attribut data-src :

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

Datenhaltepunkte

Eine kommagetrennte Liste von Haltepunkten und optional mit einem Doppelpunkt ( :) sowie Image Serving-Befehlen oder Bildvorgaben. Jeder Breakpoint ist ein Bildbreitenwert, der in logischen CSS-Pixeln definiert ist. Die Bibliothek lädt das Bild mit dem nächstgrößeren Wert aus der Liste und lädt es auf den Client herunter, um es der CSS-Bildbreite der Laufzeitumgebung anzupassen. (Wenn Sie auf einem Bildschirm mit hoher Dichte arbeiten, stellen die vom Server geladenen Bildausgabeformate Breakpoint-Werte dar, multipliziert mit dem Pixelverhältnis des Geräts.)

Für jeden Haltepunkt aus der Liste ist es möglich, einen oder mehrere Image Serving-Befehle oder Bildvorgabennamen zu definieren. Solche zusätzlichen Parameter werden nur auf das Bild angewendet, wenn dieser bestimmte Breakpoint aktuell aktiv ist.

Sie können jeden unterstützten Image Serving-Befehl verwenden, mit Ausnahme der Ansichtsbefehle, die sich auf die Größe des Antwortbilds auswirken, z. B. wid=, hei= oder scl=. Dasselbe gilt für Bildvorgaben: Eine Bildvorgabe, die mit der responsiven Bildbibliothek verwendet wird, darf solche Befehle nicht enthalten.

Mehrere Image Serving-Befehle oder Bildvorgabennamen werden durch das Zeichen "&"getrennt. Wenn ein Image Serving-Befehl ein Komma in seinem Wert hat, wird dieses Komma durch %2C ersetzt. Bildvorgabennamen werden in Dollarzeichen ( $) eingeschlossen.

Beispiele

Nur Haltepunkte verwenden

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">

Verwenden von Image Serving-Befehlen

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:op_sharpen=1,720:resMode=sharp2&op_usm=0.9%2C1.0%2C8%2C0">

Verwenden von Bildvorgaben

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">

Verwenden von Bildvorgaben und Image Serving-Befehlen

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">

data-mode

Die folgenden beiden smarten Zuschneidemodi sind in AEM 6.4 und höher sowie in Dynamic Media Viewers 5.9 und höher 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