Silverstripe Lazysizes module
Integrate https://github.com/aFarkas/lazysizes and https://github.com/aFarkas/respimage
to Silverstripe., (*1)
Code heavily inspired by https://github.com/heyday/silverstripe-responsive-images, (*2)
All-in-one solution for:
- Lazy loading images
- Responsive images
- Placeholder images (using placehold.it), (*3)
Respimages is only loaded if the browser does not support native syntax., (*4)
Plugins
This modules has already pre built plugins into a consolidated js file., (*5)
Plugins available by default are:, (*6)
Lasysizes:
- unveilhooks
- print
- bgset
- include, (*7)
Respimages:
- oldie
- intrinsic
- mutation, (*8)
You can also define your own path to the libraries by adjusting the following path, (*9)
LazySizesImageExtension:
js_path: 'lazysizes/javascript'
LazyLoading
If you simply want to lazy load your image, you can use any of three default
methods which specify no additional sizes., (*10)
Example:, (*11)
$Image.Lazy(720x250)
$Image.LazyCrop(720x250)
$Image.LazyCropFocus(720x250)
Responsive sets
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., (*12)
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., (*13)
Retina is also supported., (*14)
Config example:, (*15)
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:, (*16)
$Image.ResponsiveDefault
Using placeholders
The controller extension provides a helper method to easily create placeholders
using PlaceholdIt. You can define a base size and a src set., (*17)
Example:, (*18)
$PlaceholdIt(175x75,'200x100,500x300,800x400')
SrcSet
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., (*19)
Example:, (*20)
<body id="$ClassName" class="typography lazyload" data-bgset="$SiteConfig.RandomBackgroundImage.SrcSet('480,800')">
Compatibility
Tested with 3.1, (*21)
Installation
composer require lekoala/silverstripe-lazysizes, (*22)
Maintainer
LeKoala - thomas@lekoala.be, (*23)
Wallogit.com
lekoala