lingo / silverstripe_srcset

Responsive images (via img.srcset) for SilverStripe templates

SilverStripe Responsive Images

Easily use responsive images in SilverStripe templates, via the HTML5 img tag's srcset attribute.

Browser compatibility for this attribute can be seen here caniuse, but in any case a polyfill is provided (use npm install) for older browsers.

See also the full documentation

Installation

Via composer

composer require lingo/silverstripe_respimage

Usage

Simply call the Responsive method on your image. You should provide a media query as an argument. See here for explanation of this attribute.

<% if $FeaturedImage %>
	$FeaturedImage.Responsive("(max-width: 800px) 93vw, 45vw")
<% end_if %>

CSS

You'll probably want to have a bit of CSS also set up to make images scale nicely, something like this:

img {
	width:  auto;
	height: 100%;
}

More information

You can also use the .BackgroundAttr method if you need to add an inline style attribute to an element, in order to use a responsive background image.