README

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.