PHPackages visol/viresponsiveimages - 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. visol/viresponsiveimages ActiveTypo3-cms-extension visol/viresponsiveimages ======================== Responsive images for fluid\_styled\_content 4.0.2(8mo ago)14.5k↓47.2%1[1 PRs](https://github.com/visol/ext-viresponsiveimages/pulls)GPL-2.0-or-laterJavaScript Since Jun 14Pushed 8mo ago5 watchersCompare [ Source](https://github.com/visol/ext-viresponsiveimages)[ Packagist](https://packagist.org/packages/visol/viresponsiveimages)[ Docs](https://github.com/visol/ext-viresponsiveimages)[ RSS](/packages/visol-viresponsiveimages/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (1)Versions (30)Used By (0) Responsive Images for TYPO3 CMS =============================== [](#responsive-images-for-typo3-cms) This extensions provides a `ResponsiveImageViewHelper` and a `SrcSetViewHelper` to provide responsive images based on the srcset approach. It supports crop variants, but also defining an own ratio. While srcset is [supported in most current browsers](https://caniuse.com/srcset), for background images a similar approach with a custom `data-bgset` attributes can be used. Compatibility and Maintenance ----------------------------- [](#compatibility-and-maintenance) This package is currently maintained for the following versions: TYPO3 VersionPackage VersionBranchMaintainedTYPO3 13.4.x4.xmasterYesTYPO3 12.4.x3.x-NoTYPO3 11.5.x2.x-NoTYPO3 10.4.x1.x-NoTYPO3 9.5.x0.9.x-No### Usage in Fluid [](#usage-in-fluid) #### Usage Example [](#usage-example) This example ist showing the setup for a header image, added in the page properties in a desktop and mobile version. Sidenote: title="" to suppress the optional title attribute in the image tag. Add `{namespace viresp=Visol\Viresponsiveimages\ViewHelpers}`to your Fluid template ``` mobile image: if set in editor 'teaserImageMobile' cropping is applied. if not, the image is cropped in the given ratio from the center no image cropping as ben seleted in the editor: the image weill be cropped in the given ratio relative to the center for desktop the full range of sizes will be generated no image cropping as ben seleted in the editor: the image weill be cropped in the given ratio relative to the center for mobile only the given sizes (comma separated) will be generated ``` The corresponding image editor setup in `YourSitePackage/Configuration/TCA/Overrides/pages.php` would look like this: ``` $GLOBALS['TCA']['pages']['types'][(string)\TYPO3\CMS\Frontend\Page\PageRepository::DOKTYPE_DEFAULT]['columnsOverrides']['media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [ 'headerImageDesktop' => [ 'title' => 'Header Image Desktop', 'allowedAspectRatios' => [ '1170:200' => [ 'title' => 'Letterbox Slot 1170:200', 'value' => 1170 / 200, ] ], 'coverAreas' => [ [ 'x' => 0.02, 'y' => 0.66, 'width' => 0.96, 'height' => 0.34, ] ] ], 'headerImageMobile' => [ 'title' => 'Header Image Mobile', 'allowedAspectRatios' => [ '4:2' => [ 'title' => 'Square 4:2', 'value' => 4 / 2, ] ], 'coverAreas' => [ [ 'x' => 0.02, 'y' => 0.66, 'width' => 0.96, 'height' => 0.34, ] ] ] ]; ``` ### JavaScripts [](#javascripts) If you want to support older browsers (e.g. IE) and/or use the bgset feature to create responsive background images, you need to use the lazysizes library. #### JavaScript bundled with this extension [](#javascript-bundled-with-this-extension) The extension uses lazysizes.js along with the plugins respimg/ls.respimg.min.js, ls.parent-fit.min.js and ls.bgset.min.js which are all included in `Resources/Private` and included by ``` page.includeJSFooterlibs { lazysizes1respimg = EXT:viresponsiveimages/Resources/Public/Javascripts/lazysizes/plugins/respimg/ls.respimg.min.js lazysizes2parentfit = EXT:viresponsiveimages/Resources/Public/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.min.js lazysizes3bgset = EXT:viresponsiveimages/Resources/Public/Javascripts/lazysizes/plugins/bgset/ls.bgset.min.js lazysizes4core = EXT:viresponsiveimages/Resources/Public/Javascripts/lazysizes/lazysizes.min.js } ``` #### Install using npm [](#install-using-npm) The preferred way to include those libraries would be to disable the includes in your setup through the following TypoScript configuration ``` page.includeJSFooterlibs { lazysizes1respimg > lazysizes2parentfit > lazysizes3bgset > lazysizes9core > } ``` and install lazysizes through npm/yarn in your project ``` npm install --save lazysizes ``` or add lazysizes to the dependencies section of your package.json ``` "dependencies": { ... "lazysizes": "^5.1.1", ... } ``` Then choose your favourite way to build/include the sources from there. With **webpack** you would import the libraries in your main.js like: ``` import 'lazysizes/plugins/respimg/ls.respimg'; import 'lazysizes/plugins/parent-fit/ls.parent-fit'; import 'lazysizes/plugins/bgset/ls.bgset'; import 'lazysizes/lazysizes'; ``` ### Credits [](#credits) visol digitale Dienstleistungen GmbH, [www.visol.ch](http://www.visol.ch) ### Health Score 46 — FairBetter than 93% of packages Maintenance61 Regular maintenance activity Popularity23 Limited adoption so far Community16 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 54.5% 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 ~104 days Recently: every ~42 days Total 23 Last Release 245d ago Major Versions 0.9.15 → 1.0.02021-04-06 1.0.0 → 2.0.02022-12-14 2.0.0 → v11.x-dev2022-12-14 3.0.1 → v12.x-dev2025-04-01 ### Community Maintainers ![](https://www.gravatar.com/avatar/d6e1686bc798a88033f481f209a4f060235147ac7dca4c3391f2d171e30fdd4a?d=identicon)[visol](/maintainers/visol) --- Top Contributors [![mindpilot](https://avatars.githubusercontent.com/u/3437392?v=4)](https://github.com/mindpilot "mindpilot (36 commits)")[![lorenzulrich](https://avatars.githubusercontent.com/u/1816023?v=4)](https://github.com/lorenzulrich "lorenzulrich (21 commits)")[![dhuf](https://avatars.githubusercontent.com/u/1814195?v=4)](https://github.com/dhuf "dhuf (4 commits)")[![fabarea](https://avatars.githubusercontent.com/u/620730?v=4)](https://github.com/fabarea "fabarea (3 commits)")[![MaLoertscher](https://avatars.githubusercontent.com/u/141229339?v=4)](https://github.com/MaLoertscher "MaLoertscher (1 commits)")[![SomeBdyElse](https://avatars.githubusercontent.com/u/243504?v=4)](https://github.com/SomeBdyElse "SomeBdyElse (1 commits)") ### Embed Badge ![Health badge](/badges/visol-viresponsiveimages/health.svg) ``` [![Health](https://phpackages.com/badges/visol-viresponsiveimages/health.svg)](https://phpackages.com/packages/visol-viresponsiveimages) ``` ### Alternatives [fluidtypo3/vhs This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine. 1954.1M49](/packages/fluidtypo3-vhs)[in2code/powermail Powermail is a well-known, editor-friendly, powerful and easy to use mailform extension for TYPO3 with a lots of features 982.5M38](/packages/in2code-powermail)[typo3/testing-framework The TYPO3 testing framework provides base classes for unit, functional and acceptance testing. 675.0M775](/packages/typo3-testing-framework)[fluidtypo3/flux The flux package from FluidTYPO3 152982.2k20](/packages/fluidtypo3-flux)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 63991.3k4](/packages/netresearch-rte-ckeditor-image)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 96374.6k23](/packages/friendsoftypo3-content-blocks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)