moosylvania / silverstripe-responsive-image
Responsive Image module for SilverStripe.
Installs: 20
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 5
Forks: 1
Open Issues: 3
Type:silverstripe-module
Requires
- silverstripe/cms: ~3.1
- silverstripe/framework: ~3.1
This package is auto-updated.
Last update: 2024-08-15 04:37:35 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/