Using Responsive Images
The Widget Framework has the ability to switch image representations to suit the available space on different devices and in different browser window sizes.
This functionality is provided by:
-
A tag in the Widget Framework Core Tag Library,
wf-core:image
that generates the required HTML markup. -
Javascript code for determining which image representation image is required. Two different methods are available:
adaptive
-
This is the default method. It calculates which image representation to load based on the
img
elementwidth
. picturefill
-
This is a slightly simpler method based on a Javascript library called
picturefill.js
(see https://github.com/scottjehl/picturefill). Inspired by the proposed HTMLpicture
element (see Responsive Images Community Group), this library uses a set of viewport breakpoints to select an appropriately sized image for the current device/browser window size. Thepicturefill.js
library shipped with the Widget Framework is modified slightly to provide better support for thewf-core:image
tag.