SilverStripe-Responsive-Image

Responsive Image module for SilverStripe implementing the bottom-padding technique, _(*1)

Requirements

SilverStripe 3.1.0+

Installation & Documentation

Clone Repository or use Composer to pull this module down to your silverstripe project

Any pages that are using the ResponsiveImage DataObject will need to include the following JS CSS on your site -, _(*2)

Requirements::javascript('SilverStripe/Responsive-Image/javascript/responsive-img.js');
Requirements::css('SilverStripe/Responsive-Image/css/responsive-img.css');

Instead of using the Image Object types on your page, use ResponsiveImage. ex., _(*3)
```
private static $has_one = array(
    'HeroImage' => 'ResponsiveImage'
);
```
Inside your Templates, to render the proper output you would then call -, _(*4)
```
$HeroImage.Responsive
```

Notes:

This Module was written and inspired from the padding-bottom hack that is documented at -, _(*5)

http://www.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/, _(*6)

19/01 2016

dev-master

9999999-dev

Responsive Image module for SilverStripe.

Sources Download

MIT

The Requires

by Joe Madde

by Mitch Viner

responsive image silverstripe

silverstripe-module silverstripe-responsive-image