2017 © Pedro Peláez
 

silverstripe-vendormodule silverstripe-responsive-images

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

image

heyday/silverstripe-responsive-images

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  • Tuesday, July 17, 2018
  • by heyday
  • Repository
  • 32 Watchers
  • 50 Stars
  • 12,052 Installations
  • JavaScript
  • 3 Dependents
  • 0 Suggesters
  • 22 Forks
  • 6 Open issues
  • 10 Versions
  • 11 % Grown

The README.md

Responsive Images for SilverStripe

Introduction

This module provides the ability to send a series of configured image sizes to the client without actually loading any resources until a media query can be executed., (*1)

This is particularly useful for sites that use responsive design, because it means that smaller viewports can receive images optimised for their size rather than pulling down a single image optimised for desktop. This module is highly configurable and relies on picturefill.js for the client-side magic., (*2)

Requirements

SilverStripe 4.0 or higher, (*3)

For a SS 3.x compatible-version, please see branch 1.0, (*4)

Installation

composer require heyday/silverstripe-responsive-images

How to use

Once you have this module installed, you’ll need to configure named sets of image sizes in your site’s yaml config (eg. mysite/_config/config.yml). Note that there are no default image sets, but you can copy the config below to get started:, (*5)

---
After: 'silverstripe-responsive-images/*'
---
Heyday\ResponsiveImages\ResponsiveImageExtension:
  sets:
    ResponsiveSet1:
      css_classes: classname
      arguments:
        '(min-width: 1200px)': [800]
        '(min-width: 800px)': [400]
        '(min-width: 200px)': [100]

    ResponsiveSet2:
      template: Includes/MyCustomImageTemplate
      method: Fill
      arguments:
        '(min-width: 1000px) and (min-device-pixel-ratio: 2.0)': [1800, 1800]
        '(min-width: 1000px)': [900, 900]
        '(min-width: 800px) and (min-device-pixel-ratio: 2.0)': [1400, 1400]
        '(min-width: 800px)': [700, 700]
        '(min-width: 400px) and (min-device-pixel-ratio: 2.0)': [600, 600]
        '(min-width: 400px)': [300, 300]
      default_arguments: [1200, 1200]

    ResponsiveSet3:
      method: Pad
      arguments:
        '(min-width: 800px)': [700, 700, '666666']
        '(min-width: 400px)': [300, 300, '666666']
      default_arguments: [1200, 1200, '666666']

Now, run ?flush=1 to refresh the config manifest, and you will have the new methods injected into your Image class that you can use in templates., (*6)

$MyImage.ResponsiveSet1
$MyImage.ResponsiveSet2
$MyImage.ResponsiveSet3

The output of the first method (ResponsiveSet1) will look something like this, remember that the first matching media-query will be taken:, (*7)

<picture>
        <source media="(min-width: 1200px)" srcset="/assets/Uploads/_resampled/SetWidth100-my-image.jpeg">

        <source media="(min-width: 800px)" srcset="/assets/Uploads/_resampled/SetWidth400-my-image.jpeg">

        <source media="(min-width: 200px)" srcset="/assets/Uploads/_resampled/SetWidth100-my-image.jpeg">

    <img src="/assets/Uploads/_resampled/SetWidth640480-my-image.jpeg" alt="my-image.jpeg">
</picture>

The final output to your browser will place the correct image URL into one of the span tags and only one image will render. As the window is resized, new images are loaded into the DOM., (*8)

Other options

Each set should have a "default_arguments" property set in case the browser does not support media queries. By default, the "default_arguments" property results in an 800x600 image, but this can be overridden in the config., (*9)

Heyday\ResponsiveImages\ResponsiveImageExtension:
  default_arguments: [1200, 768]

You can also pass arguments for the default image at the template level., (*10)

$MyImage.MyResponsiveSet(900, 600)

The default resampling method is SetWidth, but this can be overridden in your config., (*11)

Heyday\ResponsiveImages\ResponsiveImageExtension:
  default_method: Fill

It can also be passed into your template function., (*12)

$MyImage.MyResponsiveSet('Fill', 800, 600)

The Versions

17/07 2018

dev-master

9999999-dev

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

17/07 2018

2.0.1

2.0.1.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

17/04 2018

1.0.x-dev

1.0.9999999.9999999-dev

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

17/04 2018

1.0.1

1.0.1.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

15/08 2017

2.0.0

2.0.0.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

17/08 2016

dev-mimic-template-api

dev-mimic-template-api

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

08/05 2016

1.0.0

1.0.0.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

18/01 2016

0.2.0

0.2.0.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe picturefill

20/10 2014

0.1.1

0.1.1.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires

 

responsive image silverstripe

05/01 2014

0.1.0

0.1.0.0

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

  Sources   Download

MIT

The Requires