Responsive Image module for SilverStripe implementing the bottom-padding technique

• SilverStripe 3.1.0+

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

2. Any pages that are using the ResponsiveImage DataObject will need to include the following JS CSS on your site -

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

3. Instead of using the Image Object types on your page, use ResponsiveImage. ex.

    private static $has_one = array(
        'HeroImage' => 'ResponsiveImage'
    );
   

4. Inside your Templates, to render the proper output you would then call -

    $HeroImage.Responsive
   

This Module was written and inspired from the padding-bottom hack that is documented at -

http://www.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/