De bibliotheek met responsieve afbeeldingen gebruiken using-responsive-image-library
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.
De bibliotheek met responsieve afbeeldingen gebruiken
-
In Dynamic Media Classic: een voorinstelling voor afbeeldingen maken als u de bibliotheek met responsieve afbeeldingen wilt gebruiken met voorinstellingen.
Als u voorinstellingen voor afbeeldingen definieert die worden gebruikt in de bibliotheek met responsieve afbeeldingen, mag u geen instellingen gebruiken die van invloed zijn op de afbeeldingsgrootte, zoals
wid=,hei=, ofscl=. 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.
Voordat u de API van de bibliotheek kunt gebruiken, moet u ervoor zorgen dat u
responsive_image.js. Dit JavaScript-bestand bevindt zich in het dialoogvensterlibs/submap 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. Kenmerken definiëren voor de
s7responsiveImageAPI-functie wordt aangeroepen voor een dergelijke afbeelding.U kunt ook de bestaande afbeeldings-URL in het dialoogvenster
data-srckenmerk. Stel vervolgens de bestaandesrckenmerk voor het coderen van een afbeelding van een 1x1-GIF 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 eentitleop de afbeeldingsinstantie.Hieronder ziet u een voorbeeld van het definiëren van
data-breakpointsattribuut voor het beeld en het gebruiken van een 1x1 GIF dat als Gegevens URI wordt 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
s7responsiveImageAPI-functie voor elke afbeeldingsinstantie die in de bibliotheek wordt beheerd.Roep de
s7responsiveImageAPI-functie 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 deIMG-element in de webpaginalay-out en de schermdichtheid van het apparaat.De volgende code is een voorbeeld van het aanroepen van
s7responsiveImageAPI-functie op een afbeelding, ervan uitgaande datresponsiveImageis een id 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>
Slim uitsnijden gebruiken
Er zijn twee modi voor slim uitsnijden beschikbaar in AEM 6.4 en Dynamic Media Viewers 5.9:
- Handmatig - door de gebruiker gedefinieerde onderbrekingspunten en de bijbehorende opdrachten in Image Service worden gedefinieerd binnen een kenmerk in het afbeeldingselement.
- Slim uitsnijden - berekende slimme uitsnijdingen worden automatisch opgehaald 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 de optie data-mode kenmerk naar 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 een s7responsiveViewer gebeurtenis 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);
}
});