Download the PHP package heyday/silverstripe-responsive-images without Composer
On this page you can find all versions of the php package heyday/silverstripe-responsive-images. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download heyday/silverstripe-responsive-images
More information about heyday/silverstripe-responsive-images
Files in heyday/silverstripe-responsive-images
Package silverstripe-responsive-images
Short Description Configure and send a series of image size options to the client without loading any resources until a media query can be executed.
License MIT
Informations about the package silverstripe-responsive-images
Responsive Images for Silverstripe
Introduction
This highly configurable module wraps an image in a picture element with a set of sources for different media queries. This enables the browser to load the matching image size for the current viewport.
This is particularly useful in responsive design and page load optimisation. Different viewports can receive an image optimised for their size rather than one size fits all.
Requirements
Silverstripe CMS 6.0 or higher
For a CMS 5.x compatible-version, please see branch 3.0 For a CMS 4.x compatible-version, please see branch 2.0 For a CMS 3.x compatible-version, please see branch 1.0
Installation
composer require heyday/silverstripe-responsive-images
How to use
Once you have this module installed, you’ll need to configure named sets of image sizes in your site’s yaml config (eg. mysite/_config/config.yml).
Note that there are no default image sets, but you can copy the config below to get started:
Now, add ?flush=1 to the URL to refresh the config manifest. You can then use the new Image class methods in your template like so:
The output of the first method (ResponsiveSet1) will look something like this. Remember that the browser will render the first matching source.
As the window is resized, new images are loaded into the DOM.
Other options
Each set should have a "default_arguments" property set in case the browser does not support media queries. By default, the "default_arguments" property results in an 800x600 image, but this can be overridden in the config.
You can also pass arguments for the default image at the template level.
The default resampling method is SetWidth, but this can be overridden in your config.
It can also be passed into your template function.