PHPackages                             thornberrypie/silverstripe-responsive-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. thornberrypie/silverstripe-responsive-images

ActiveSilverstripe-module[Image & Media](/categories/media)

thornberrypie/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.

2.0.0(8y ago)023MITJavaScript

Since Jan 5Pushed 8y ago1 watchersCompare

[ Source](https://github.com/thornberrypie/silverstripe-responsive-images)[ Packagist](https://packagist.org/packages/thornberrypie/silverstripe-responsive-images)[ RSS](/packages/thornberrypie-silverstripe-responsive-images/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (1)Versions (8)Used By (0)

Responsive Images for SilverStripe
==================================

[](#responsive-images-for-silverstripe)

Introduction
------------

[](#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.

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](https://github.com/scottjehl/picturefill) for the client-side magic.

Requirements
------------

[](#requirements)

SilverStripe 4.0 or higher

For a SS 3.x compatible-version, please see branch 1.0

Installation
------------

[](#installation)

```
composer require heyday/silverstripe-responsive-images

```

How to use
----------

[](#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:

```
---
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:
      method: CroppedImage
      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: PaddedImage
      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.

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

```

```

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.

### Other options

[](#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.

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

You can also pass arguments for the default image at the template level.

```
$MyImage.MyResponsiveSet(900, 600)

```

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

```
Heyday\ResponsiveImages\ResponsiveImageExtension:
  default_method: CroppedImage
```

It can also be passed into your template function.

```
$MyImage.MyResponsiveSet('CroppedImage', 800, 600)

```

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~279 days

Total

6

Last Release

3114d ago

Major Versions

0.2.0 → 1.0.02016-05-08

1.0.0 → 2.0.02017-08-14

### Community

Maintainers

![](https://www.gravatar.com/avatar/34294a6cd5af1e786feb4d51c140e0c445b314eb8d6b795e12e04246d77507b1?d=identicon)[thornberrypie](/maintainers/thornberrypie)

---

Top Contributors

[![stecman](https://avatars.githubusercontent.com/u/2230769?v=4)](https://github.com/stecman "stecman (14 commits)")[![lozcalver](https://avatars.githubusercontent.com/u/1655548?v=4)](https://github.com/lozcalver "lozcalver (3 commits)")[![howardgrigg](https://avatars.githubusercontent.com/u/188229?v=4)](https://github.com/howardgrigg "howardgrigg (1 commits)")[![ivoba](https://avatars.githubusercontent.com/u/471254?v=4)](https://github.com/ivoba "ivoba (1 commits)")[![lucasfrey](https://avatars.githubusercontent.com/u/7697132?v=4)](https://github.com/lucasfrey "lucasfrey (1 commits)")[![Xarinor](https://avatars.githubusercontent.com/u/1364383?v=4)](https://github.com/Xarinor "Xarinor (1 commits)")

---

Tags

imagesilverstriperesponsivepicturefill

### Embed Badge

![Health badge](/badges/thornberrypie-silverstripe-responsive-images/health.svg)

```
[![Health](https://phpackages.com/badges/thornberrypie-silverstripe-responsive-images/health.svg)](https://phpackages.com/packages/thornberrypie-silverstripe-responsive-images)
```

###  Alternatives

[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.

5387.7k6](/packages/heyday-silverstripe-responsive-images)[unclecheese/silverstripe-image-optionset

Provides a list of selectable items that use images as the primary label instead of text.

139.1k2](/packages/unclecheese-silverstripe-image-optionset)[chrometoaster/silverstripe-image-quality

Adds Quality function to images

1013.0k1](/packages/chrometoaster-silverstripe-image-quality)[dnadesign/silverstripe-lazyloaded-image

Implements the LQIP (Low Quality Image Placeholder) pattern powered by lazysizes

1011.4k4](/packages/dnadesign-silverstripe-lazyloaded-image)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)