Code heavily inspired by https://github.com/heyday/silverstripe-responsive-images
All-in-one solution for:
Respimages is only loaded if the browser does not support native syntax.
This modules has already pre built plugins into a consolidated js file.
Plugins available by default are:
You can also define your own path to the libraries by adjusting the following path
If you simply want to lazy load your image, you can use any of three default
methods which specify no additional sizes.
$Image.Lazy(720x250) $Image.LazyCrop(720x250) $Image.LazyCropFocus(720x250)
You can define your own responsive sets. You can see the bundled configuration
for the ResponsiveDefault set which set 4 breakpoints.
You can define your own sets, change sizes, method and default size to be used.
All sets use lazysizes data-sizes="auto" by default, meaning that the width
of the parent is used to determine which size needs to be loaded.
Retina is also supported.
LazySizesImageExtension: ResponsiveDefault: sizes: [320x213 320w,640x426 640w,960x639 960w,1280x852 1280w] ResponsiveDefaultSquare: sizes: [320x320 320w,640x640 640w,960x960 960w,1280x1280 1280w] ResponsiveDefaultRetina: sizes: [400x300 1x, 800x600 2x]
Usage example in template:
The controller extension provides a helper method to easily create placeholders
using PlaceholdIt. You can define a base size and a src set.
Sometimes, you just need to output a list of srcset paths (for instance, to define
a bgset). The last element of the set is never resized (always using the original image at maximum size).
You can prevent this from happening by setting the second argument to false.
<body id="$ClassName" class="typography lazyload" data-bgset="$SiteConfig.RandomBackgroundImage.SrcSet('480,800')">
Tested with 3.1
composer require lekoala/silverstripe-lazysizes
LeKoala - [email protected]
Module rating system helping users find modules that are well supported. For more on how the rating system works visit Module standards
Score not correct? Let us know there is a problem