PHPackages mhe/silverstripe-responsiveimages - 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. mhe/silverstripe-responsiveimages ActiveSilverstripe-vendormodule[Image & Media](/categories/media) mhe/silverstripe-responsiveimages ================================= Silverstripe module to handle responsive images, auto-generating meaningful resolutions v2.0.0(7mo ago)138BSD-3-ClausePHPPHP ^8.3CI passing Since Jul 29Pushed 7mo ago1 watchersCompare [ Source](https://github.com/martinheise/silverstripe-responsiveimages)[ Packagist](https://packagist.org/packages/mhe/silverstripe-responsiveimages)[ RSS](/packages/mhe-silverstripe-responsiveimages/feed)WikiDiscussions main Synced 3w ago READMEChangelog (3)Dependencies (4)Versions (8)Used By (0) SilverStripe Responsive Images ============================== [](#silverstripe-responsive-images) An module for SilverStripe that enhances the output of images with multiple resolutions as `srcset` attribute. It tries to calculate the most appropriate resolutions for the given image and configuration. During setup of the frontend output you will configure the basic rules about which output sizes an image will have (matching the layout setup done in CSS), the particular resolutions to generate will be handled by the module. Calculation is based on the module [mhe/imagetools](https://github.com/martinheise/imagetools) – see there for more information. ### Background [](#background) “Humans shouldn’t be doing this” – some inspiring thoughts on deciding which image resolutions make sense in responsive output can be found in this article by Jason Grigsby: [Image Breakpoints](https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/), especially [Setting image breakpoints based on a performance budget](https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/#setting-image-breakpoints-based-on-a-performance-budget) Requirements ------------ [](#requirements) Requires Silverstripe 6.x – for a version compatible with Silverstripe 5 see respective branch `5` Installation and setup ---------------------- [](#installation-and-setup) Install with composer: ``` composer require mhe/silverstripe-responsiveimages ``` Perform `?flush` Usage overview -------------- [](#usage-overview) The module activates an extension on `Image` objects and also provides an enhanced Shortcode provider. This means the result can be used in templates, programmatically on image output, and also on images placed into page content via the HTML editor. There can be different configurations for different usages of images, like different layout context and desired visual sizes. The main parameter which configuration is used for an image is the CSS class. - In the HTML editor this usually set by the standard “alignment” options for the image - In templates or programmatical use it is set directly as parameter The configuration *can* consider a width set by the user, but as default the desired width is set solely by configuration to assure a consistant layout. Configuration ------------- [](#configuration) General note: Image processing can be quite heavy on system performance, especially on memory usage. Once the desired images are generated they are cached by Silverstripe, but adding multiple new images, changing the configuration etc. can lead to problems, especially when first loading the appropriate page (Images are resized by Silverstripe on request, which usually means viewing a page). In case of problems see the general advice below, and try to adjust the configuration options. ### Output configurations [](#output-configurations) The setup is done in the Silverstripe YAML [configuration API](https://docs.silverstripe.org/en/5/developer_guides/configuration/configuration/). The configuration property `Mhe\SmartImages\Extensions\ImageExtension.rendering_classes` can contain multiple entries with the name of a CSS class as key. The special entry `default` is used as a fallback for images without matching configuration – and also its properties are used as fallback for undefined properties of the other entries. ``` Mhe\SmartImages\Extensions\ImageExtension: rendering_classes: default: sizes: "(max-width: 1000px) 100vw, 1000px" sizediff: 50000 highres: 2 maxsteps: 5 fullWidth: sizes: "100vw" highres: 2 # takes sizediff and maxsteps from "default" smallThumbnail: sizes: "80px" maxsteps: 1 fixed: rendersizes: - 50 - 120 variableImage: sizes: "(max-width:$USERWIDTHpx) 100v, $USERWIDTHpx" ``` #### Properties [](#properties) Also see the information in [Imagetools documentation](https://github.com/martinheise/imagetools) - `sizes`: Definition of responsive image sizes, possibly with media conditions. This is output directly as `sizes` attribute on the output `img` tag. I addition the extension uses this information to calculate which actual output sizes can occur and which image resolutions are appropriate. - `sizediff`: desired difference in filesize (bytes) between two resolutions. This is not an exact values, but a rough goal. Lower values mean possibly more different files generated and better adjustment to the responsive output, higher values reduce load on image generation. `maxsteps` parameter has priority, so the resolutions might be roughly distributed evenly with a bigger file size difference. - A special string "$USERWIDTH" can be used inside the value – in shortcode use it will be replaced with the source’s width attribute as set by the user, to enable images with variabel, user defined size. - `maxsteps`: Limit the number of resolutions to create. If `highres` is > 2, this value is practically multiplied. - `highres`: (1, 2 or 3) Create additional levels of output resolution, etc. a 2x resolution of 2400px if the maximal layout size is 1200px - `retinalevel`: deprecated legacy parameter – use `highres` instead - `rendersizes`: Set the desired resolutions manually, ignoring the other parameters ### Recommended general Silverstripe configuration [](#recommended-general-silverstripe-configuration) Don’t flush resized images, usually not necessary: ``` SilverStripe\Assets\InterventionBackend: flush_enabled: true ``` Using imagick backend is often much more performant and avoids memory issues – starting from Silverstripe 6 this is the default anyway if the imagick PHP extension is installed. For details see the [Silverstripe documentation](https://docs.silverstripe.org/en/6/developer_guides/files/images/#intervention-image-driver). ### Use in content [](#use-in-content) The image shortcodes created by the Silverstripe TinyMCE editor are handled by default. With a default setup you would setup configuration entries as described above, with the keys "left", "right", "center", "leftAlone", "rightAlone". ### Use in templates [](#use-in-templates) Output an image based on a specific configuration: ``` $Image.Rendering('cssclass=hero-img') ``` Rendering is done with a custom `DBFile_image.ss` template, which can be adjusted in a theme or application in the usual way. ### Use in code [](#use-in-code) The same way can be used in PHP code to get an enhanced copy of an image object: ``` /** @var \SilverStripe\Assets\Image $image */ $variant = $image->Rendering(['cssclass' => 'maxsteps_90vw']); $variant->Srcset(); ``` ### Health Score 38 — LowBetter than 83% of packages Maintenance64 Regular maintenance activity Popularity10 Limited adoption so far Community7 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 100% 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 ~95 days Recently: every ~119 days Total 6 Last Release 218d ago Major Versions v1.0.0 → 4.x-dev2024-07-29 4.x-dev → 5.x-dev2025-03-19 v1.0.1 → v2.0.02025-11-11 v2.0.0 → 6.x-dev2025-11-17 PHP version history (2 changes)v1.0.0PHP ^8.0 v2.0.0PHP ^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/bdc925a420ee741e57764c199a926d0edb8dbcfe1f4528b2f0519c465461720e?d=identicon)[martinheise](/maintainers/martinheise) --- Top Contributors [![martinheise](https://avatars.githubusercontent.com/u/16256376?v=4)](https://github.com/martinheise "martinheise (16 commits)") --- Tags imagesilverstripecms ### Code Quality TestsPHPUnit Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/mhe-silverstripe-responsiveimages/health.svg) ``` [![Health](https://phpackages.com/badges/mhe-silverstripe-responsiveimages/health.svg)](https://phpackages.com/packages/mhe-silverstripe-responsiveimages) ``` ### 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. 5389.1k6](/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.3k2](/packages/unclecheese-silverstripe-image-optionset)[dnadesign/silverstripe-lazyloaded-image Implements the LQIP (Low Quality Image Placeholder) pattern powered by lazysizes 1011.7k4](/packages/dnadesign-silverstripe-lazyloaded-image) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)