Documentatie Dynamic Media Image Serving and Rendering API

De bibliotheek met responsieve afbeeldingen gebruiken using-responsive-image-library

Last update: Fri Oct 03 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:

Gemaakt voor:

Ontwikkelaar
Gebruiker

Voer de volgende stappen uit om een bibliotheek met responsieve afbeeldingen aan een webpagina toe te voegen en bestaande afbeeldingen met de bibliotheek te beheren.

om de Responsieve bibliotheek van het Beeld te gebruiken

In Dynamic Media Classic, creeer een Beeld vooraf instelt in het geval u van plan bent om de Responsieve bibliotheek van het Beeld met vooraf instelt te gebruiken.

Wanneer u voorinstellingen voor afbeeldingen definieert die worden gebruikt in de bibliotheek met responsieve afbeeldingen, moet u geen instellingen gebruiken die de afbeeldingsgrootte beïnvloeden, zoals wid= , hei= of scl= . Geef geen velden voor de grootte op in de voorinstelling Afbeelding. Laat ze in plaats daarvan leeg.
Voeg het JavaScript-bibliotheekbestand toe aan uw webpagina.

Zorg ervoor dat u responsive_image.js opneemt voordat u de bibliotheek-API kunt gebruiken. Dit JavaScript-bestand bevindt zich in de submap libs/ van uw standaard IS-Viewers-implementatie:

<s7viewers_root>/libs/responsive_image.js

Bestaande afbeeldingen instellen.

De bibliotheek leest bepaalde configuratiekenmerken van een afbeeldingsinstantie waarmee het werkt. Definieer kenmerken voordat de API-functie s7responsiveImage voor een dergelijke afbeelding wordt aangeroepen.

U wordt ook aangeraden de bestaande afbeeldings-URL in het data-src -kenmerk te plaatsen. Stel vervolgens het bestaande kenmerk src zo in dat een GIF-afbeelding van 1 x 1 wordt gecodeerd als Data URI. Hiermee vermindert u het aantal HTTP-aanvragen dat door de webpagina tijdens het laden wordt verzonden. Als SEO (zoekmachine optimaliseren) nodig is, is het echter beter om een title -kenmerk in te stellen voor de afbeeldingsinstantie.

Hieronder ziet u een voorbeeld van het definiëren van het attribuut data-breakpoints voor de afbeelding en het gebruik van een GIF van 1 x 1 die als Data URI is gecodeerd:

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

Roep de API-functie s7responsiveImage aan voor elke afbeeldingsinstantie die in de bibliotheek wordt beheerd.

Roep de API-functie s7responsiveImage aan voor elke afbeeldingsinstantie die in de bibliotheek wordt beheerd. Na een dergelijke aanroep vervangt de bibliotheek de oorspronkelijke afbeelding door de afbeelding die is gedownload van Image Serving, afhankelijk van de runtimegrootte van het IMG -element in de webpaginalay-out en de schermdichtheid van het apparaat.

De volgende code is een voorbeeld van het aanroepen van de API-functie s7responsiveImage voor een afbeelding, ervan uitgaande dat responsiveImage een id is van die afbeelding:

code language-none
`<script type="text/javascript"> s7responsiveImage(document.getElementById("responsiveImage")); </script>`

Voorbeeld example-0509a0dd2a8e4fd58b5d39a0df47bd87

De bibliotheek ondersteunt het werken met veel afbeeldingsinstanties op de webpagina tegelijk. Herhaal daarom stap 1 en 2 hierboven voor elke afbeelding die u in de bibliotheek wilt beheren.

Het is de verantwoordelijkheid van de webpagina om het afbeeldingselement zodanig op te maken dat het flexibel van formaat is. In de bibliotheek met responsieve afbeeldingen zelf wordt geen onderscheid gemaakt tussen vaste en dynamische afbeeldingen. Als de afbeelding op een vaste grootte wordt toegepast, wordt de nieuwe afbeelding slechts eenmaal geladen.

De volgende code is een volledig voorbeeld van een triviale webpagina met één dynamische afbeelding die wordt beheerd door de bibliotheek Responsieve afbeelding. Het voorbeeld bevat extra CSS-stijlen om de afbeelding "responsief" te maken voor de venstergrootte van de webbrowser:

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

Gebruikend Slimme Uitsnijden

Er zijn twee modi voor Slim uitsnijden beschikbaar in AEM 6.4 en in Dynamische mediaviewers 5.9:

Hand - user-defined breekpunten en de overeenkomstige bevelen van de Dienst van het Beeld worden bepaald binnen een attribuut in het beeldelement.
het Slimme Gewas - gegevens verwerkte slimme gewassenvertoningen worden automatisch teruggewonnen van de leveringsserver. De beste vertoning wordt geselecteerd gebruikend de runtime grootte van het beeldelement.

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

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

recommendation-more-help

a26166cd-f2f4-45ce-996d-96a0f0d6cf49