PHPackages heyday/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. heyday/silverstripe-responsive-images ActiveSilverstripe-vendormodule[Image & Media](/categories/media) 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. 4.0.0(8mo ago)5387.7k↓25%30[1 issues](https://github.com/WPP-Public/akqa-nz-silverstripe-responsive-images/issues)6MITPHPPHP ^8.3 Since Jan 5Pushed 5mo ago33 watchersCompare [ Source](https://github.com/WPP-Public/akqa-nz-silverstripe-responsive-images)[ Packagist](https://packagist.org/packages/heyday/silverstripe-responsive-images)[ RSS](/packages/heyday-silverstripe-responsive-images/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (2)Versions (16)Used By (6) Responsive Images for Silverstripe ================================== [](#responsive-images-for-silverstripe) Introduction ------------ [](#introduction) This highly configurable module wraps an image in a picture element with a set of sources for different media queries. This enables the browser to load the matching image size for the current viewport. This is particularly useful in responsive design and page load optimisation. Different viewports can receive an image optimised for their size rather than one size fits all. Requirements ------------ [](#requirements) Silverstripe CMS 6.0 or higher For a CMS 5.x compatible-version, please see branch 3.0 For a CMS 4.x compatible-version, please see branch 2.0 For a CMS 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: 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, add `?flush=1` to the URL to refresh the config manifest. You can then use the new Image class methods in your template like so: ``` $MyImage.ResponsiveSet1 $MyImage.ResponsiveSet2 $MyImage.ResponsiveSet3 ``` The output of the first method (`ResponsiveSet1`) will look something like this. Remember that the browser will render the first matching source. ``` ``` 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.ResponsiveSet1(900, 600) ``` The default resampling method is SetWidth, but this can be overridden in your config. ``` Heyday\ResponsiveImages\ResponsiveImageExtension: default_method: Fill ``` It can also be passed into your template function. ``` $MyImage.ResponsiveSet1('Fill', 800, 600) ``` ### Health Score 61 — FairBetter than 99% of packages Maintenance66 Regular maintenance activity Popularity45 Moderate usage in the ecosystem Community35 Small or concentrated contributor base Maturity86 Battle-tested with a long release history Bus Factor2 2 contributors hold 50%+ of commits 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 ~305 days Recently: every ~635 days Total 15 Last Release 244d ago Major Versions 0.2.0 → 1.0.02016-05-08 1.0.0 → 2.0.02017-08-14 1.0.x-dev → 2.0.12018-07-16 2.0.5 → 3.0.02023-05-17 3.1.0 → 4.0.02025-09-17 ### Community Maintainers ![](https://www.gravatar.com/avatar/de4d8d61f202a03e88c3ed30cce3bfedbc6f56a16e3f3b25546c61aadc51bca2?d=identicon)[heyday](/maintainers/heyday) --- Top Contributors [![stecman](https://avatars.githubusercontent.com/u/2230769?v=4)](https://github.com/stecman "stecman (15 commits)")[![lozcalver](https://avatars.githubusercontent.com/u/1655548?v=4)](https://github.com/lozcalver "lozcalver (4 commits)")[![lucasfrey](https://avatars.githubusercontent.com/u/7697132?v=4)](https://github.com/lucasfrey "lucasfrey (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)")[![madmatt](https://avatars.githubusercontent.com/u/893117?v=4)](https://github.com/madmatt "madmatt (1 commits)")[![MasseyIsaako](https://avatars.githubusercontent.com/u/26725710?v=4)](https://github.com/MasseyIsaako "MasseyIsaako (1 commits)")[![mpeel-akqa](https://avatars.githubusercontent.com/u/130476500?v=4)](https://github.com/mpeel-akqa "mpeel-akqa (1 commits)")[![satrun77](https://avatars.githubusercontent.com/u/166450?v=4)](https://github.com/satrun77 "satrun77 (1 commits)")[![tamelion](https://avatars.githubusercontent.com/u/1680944?v=4)](https://github.com/tamelion "tamelion (1 commits)")[![thisisannie](https://avatars.githubusercontent.com/u/18449611?v=4)](https://github.com/thisisannie "thisisannie (1 commits)")[![wilr](https://avatars.githubusercontent.com/u/101629?v=4)](https://github.com/wilr "wilr (1 commits)")[![Xarinor](https://avatars.githubusercontent.com/u/1364383?v=4)](https://github.com/Xarinor "Xarinor (1 commits)")[![bendubuisson](https://avatars.githubusercontent.com/u/3079189?v=4)](https://github.com/bendubuisson "bendubuisson (1 commits)")[![xini](https://avatars.githubusercontent.com/u/1152403?v=4)](https://github.com/xini "xini (1 commits)")[![benmanu](https://avatars.githubusercontent.com/u/1373344?v=4)](https://github.com/benmanu "benmanu (1 commits)")[![DorsetDigital](https://avatars.githubusercontent.com/u/15108750?v=4)](https://github.com/DorsetDigital "DorsetDigital (1 commits)") --- Tags imagesilverstriperesponsivepicturefill ### Embed Badge ![Health badge](/badges/heyday-silverstripe-responsive-images/health.svg) ``` [![Health](https://phpackages.com/badges/heyday-silverstripe-responsive-images/health.svg)](https://phpackages.com/packages/heyday-silverstripe-responsive-images) ``` ### Alternatives [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)