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
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%;
}
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.