PHPackages wakeworks/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. wakeworks/silverstripe-responsive-images ActiveSilverstripe-vendormodule[Image & Media](/categories/media) wakeworks/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. 015JavaScript Since May 16Pushed 2y agoCompare [ Source](https://github.com/wakeworks/silverstripe-responsive-images)[ Packagist](https://packagist.org/packages/wakeworks/silverstripe-responsive-images)[ RSS](/packages/wakeworks-silverstripe-responsive-images/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)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: 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. ``` $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: Fill ``` It can also be passed into your template function. ``` $MyImage.MyResponsiveSet('Fill', 800, 600) ``` ### Health Score 16 — LowBetter than 5% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community15 Small or concentrated contributor base Maturity22 Early-stage or recently created project 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. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/7694808?v=4)[Jan Metzger](/maintainers/Zazama)[@Zazama](https://github.com/Zazama) --- 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)")[![Zazama](https://avatars.githubusercontent.com/u/7694808?v=4)](https://github.com/Zazama "Zazama (2 commits)")[![ivoba](https://avatars.githubusercontent.com/u/471254?v=4)](https://github.com/ivoba "ivoba (1 commits)")[![howardgrigg](https://avatars.githubusercontent.com/u/188229?v=4)](https://github.com/howardgrigg "howardgrigg (1 commits)")[![DorsetDigital](https://avatars.githubusercontent.com/u/15108750?v=4)](https://github.com/DorsetDigital "DorsetDigital (1 commits)")[![MasseyIsaako](https://avatars.githubusercontent.com/u/26725710?v=4)](https://github.com/MasseyIsaako "MasseyIsaako (1 commits)")[![benmanu](https://avatars.githubusercontent.com/u/1373344?v=4)](https://github.com/benmanu "benmanu (1 commits)")[![tamelion](https://avatars.githubusercontent.com/u/1680944?v=4)](https://github.com/tamelion "tamelion (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)") ### Embed Badge ![Health badge](/badges/wakeworks-silverstripe-responsive-images/health.svg) ``` [![Health](https://phpackages.com/badges/wakeworks-silverstripe-responsive-images/health.svg)](https://phpackages.com/packages/wakeworks-silverstripe-responsive-images) ``` ### Alternatives [milon/barcode Barcode generator like Qr Code, PDF417, C39, C39+, C39E, C39E+, C93, S25, S25+, I25, I25+, C128, C128A, C128B, C128C, 2-Digits UPC-Based Extention, 5-Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI (Variation of Plessey code) 1.5k13.3M39](/packages/milon-barcode)[bkwld/croppa Image thumbnail creation through specially formatted URLs for Laravel 510496.0k23](/packages/bkwld-croppa)[char0n/ffmpeg-php PHP wrapper for FFmpeg application 495225.1k1](/packages/char0n-ffmpeg-php)[goat1000/svggraph Generates SVG graphs 132849.6k3](/packages/goat1000-svggraph)[cohensive/embed Media Embed (for Laravel or as a standalone). 120370.4k](/packages/cohensive-embed)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 63991.3k4](/packages/netresearch-rte-ckeditor-image) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)