Allows for easy use of responsive images (img.srcset) in SilverStripe

Installs: 76

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 2

Forks: 1

Open Issues: 0


2.5.0 2017-11-14 06:24 UTC


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


Via composer

composer require lingo/silverstripe_respimage


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 %>


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.