moosylvania / silverstripe-responsive-image

Responsive Image module for SilverStripe.

Maintainers

Details

github.com/Moosylvania/SilverStripe-Responsive-Image

Type:silverstripe-module

dev-master 2016-01-19 20:22 UTC

Requires

silverstripe/cms: ~3.1
silverstripe/framework: ~3.1

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT eb54c9315bf8fb4a9b954bc81cd2bb1776ddef5a

Joe Madde <joe.madden.woop@moosylvania.com>
Mitch Viner <mitch.viner.woop@moosylvania.com>

image responsive silverstripe

dev-master

This package is auto-updated.

Last update: 2024-04-15 03:47:38 UTC

README

Responsive Image module for SilverStripe implementing the bottom-padding technique

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 -

 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
```

Notes:

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/