lingo / silverstripe_respimage

2.5.0 2017-11-14 06:24 UTC

Requires

• php: ^5.3.3 || ^7.0
• silverstripe/cms: ^3.0
• silverstripe/framework: ^3.0

MIT

• Luke Hudson

Published on Packagist.org on 2017-11-14 06:26 UTC

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.