Command reference - Configuration attributes command-reference-configuration-attributes

De attributen van de configuratie worden bepaald als attributen direct op een element IMG dat de Responsieve bibliotheek van het Beeld beheert. Elke afbeelding kan een eigen set kenmerken hebben.

data-src section-f52ff0f139604447a870abe6e1c03444

Optioneel.

URL naar de afbeelding die wordt weergegeven in de afbeeldingsserver. Als de URL niet aanwezig is, gebruikt de bibliotheek de waarde die in het kenmerk src is ingesteld als fallback. Dit kenmerk dient voor de eerste afbeelding en de dynamische afbeelding die in de bibliotheek met responsieve afbeeldingen vanaf verschillende locaties wordt beheerd.

Voorbeeld

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

src section-5dbc1f9a3c274705adb9702e4c7af0b1

Als data-src is ingesteld, is src optioneel en kan het elke URL bevatten die u wilt toevoegen. Het kan bijvoorbeeld een URL bevatten naar dezelfde afbeelding die op afbeeldingsserver is gebaseerd en die door de bibliotheek wordt gebruikt. Of het bestand kan een tijdelijke aanduiding voor GIF of zelfs een gegevens-URI bevatten om een extra serverretourvlucht bij het opstarten te voorkomen.

Als data-src niet is ingesteld, is src verplicht en moet het een URL bevatten naar de afbeelding die de afbeeldingsserver bevat.

Voorbeeld

Gegevens-URI gebruiken voor het kenmerk src en URL voor afbeeldingsserver voor het kenmerk 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">

data-breakpoints section-3bf62a89ff3e40569848c1fe3ac7886c

Een door komma's gescheiden lijst met onderbrekingspunten die optioneel wordt gevolgd door een dubbele punt ( : ) en opdrachten voor Beeldserver of Voorinstellingen afbeelding. Elk onderbrekingspunt is een waarde van de beeldbreedte die in logische CSS pixel wordt bepaald. De bibliotheek laadt de afbeelding met de dichtstbijzijnde grotere waarde uit de lijst en verkleint deze op de client, zodat deze overeenkomt met de breedte van de CSS-afbeelding bij uitvoering. (Als u op een scherm met hoge dichtheid werkt, vertegenwoordigen afbeeldingsuitvoeringen die vanaf de server worden geladen, onderbrekingspuntwaarden vermenigvuldigd met de pixelverhouding van het apparaat).

Voor elk onderbrekingspunt in de lijst kunt u een of meer opdrachten of namen van voorinstellingen voor afbeeldingen definiëren. Dergelijke extra parameters worden alleen toegepast op de afbeelding als dit specifieke onderbrekingspunt momenteel actief is.

U kunt elke ondersteunde opdracht Beeldverwerking gebruiken, behalve de weergaveopdrachten die de grootte van de responsafbeelding beïnvloeden, zoals wid= , hei= of scl= . Dezelfde beperking geldt voor voorinstellingen afbeelding: een voorinstelling voor afbeeldingen die wordt gebruikt met de bibliotheek met responsieve afbeeldingen mag dergelijke opdrachten niet bevatten.

Opdrachten Meerdere opdrachten voor het leveren van afbeeldingen of namen van voorinstellingen voor afbeeldingen worden gescheiden door het teken " &". Als de waarde van een opdracht Beeldbewerking komma's bevat, wordt deze opdracht vervangen door %2C . Namen van voorinstellingen voor afbeeldingen worden omsloten in dollartekens ( $ ).

Voorbeelden

Gebruikend slechts breekpunten

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

Gebruikend Beeld die bevelen dienen

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

Gebruikend Beeld stelt vooraf in

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

Gebruikend Beeld vooraf instelt & Beeld dat bevelen dienen

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

gegevensmodus section-97caf43cf5ab4ca8b1b866d8f394a9a4

De volgende twee modi voor slim uitsnijden zijn beschikbaar in AEM 6.4 en hoger en in Dynamic Media Viewers 5.9 en hoger:

Als u de modus Slim uitsnijden wilt gebruiken, stelt u het kenmerk data-mode in op smart crop .

Voorbeeld

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

Het gekoppelde afbeeldingselement verzendt de gebeurtenis s7responsiveViewer tijdens runtime wanneer het onderbrekingspunt verandert.

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