Responsive Image module for SilverStripe implementing the bottom-padding technique
- SilverStripe 3.1.0+
-
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 -
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.
private static $has_one = array( 'HeroImage' => 'ResponsiveImage' );
-
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/