PHPackages schnitzler/fluid-styled-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. schnitzler/fluid-styled-responsive-images ActiveTypo3-cms-extension[Image & Media](/categories/media) schnitzler/fluid-styled-responsive-images ========================================= Enables creation of responsive images for fluid styled content elements. 11.0.0(5y ago)279.8k16[8 issues](https://github.com/alexanderschnitzler/fluid-styled-responsive-images/issues)[4 PRs](https://github.com/alexanderschnitzler/fluid-styled-responsive-images/pulls)1GPL-2.0-or-laterPHPPHP ^7.4 Since Oct 26Pushed 3y ago8 watchersCompare [ Source](https://github.com/alexanderschnitzler/fluid-styled-responsive-images)[ Packagist](https://packagist.org/packages/schnitzler/fluid-styled-responsive-images)[ Docs](https://github.com/alexanderschnitzler/fluid-styled-responsive-images)[ RSS](/packages/schnitzler-fluid-styled-responsive-images/feed)WikiDiscussions master Synced today READMEChangelogDependencies (14)Versions (21)Used By (1) TYPO3 CMS Extension "fluid\_styled\_responsive\_images" ======================================================= [](#typo3-cms-extension-fluid_styled_responsive_images) [![Build Status](https://github.com/alexanderschnitzler/fluid-styled-responsive-images/workflows/CI/badge.svg?branch=master)](https://github.com/alexanderschnitzler/fluid-styled-responsive-images/workflows/CI/badge.svg?branch=master)[![Codecov](https://camo.githubusercontent.com/fbf6f5c8e938ef19ddbd0b7954547a4e03a407ede2be25566cad53e571d284a2/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f616c6578616e6465727363686e69747a6c65722f666c7569642d7374796c65642d726573706f6e736976652d696d61676573)](https://codecov.io/gh/alexanderschnitzler/fluid-styled-responsive-images) [![Total Downloads](https://camo.githubusercontent.com/4e42ed03fdfba93ba2c37bf41fe120461857130bed9f67d6a1cee86669fbf086/68747470733a2f2f706f7365722e707567782e6f72672f7363686e69747a6c65722f666c7569642d7374796c65642d726573706f6e736976652d696d616765732f646f776e6c6f616473)](https://packagist.org/packages/schnitzler/fluid-styled-responsive-images)[![Latest Stable Version](https://camo.githubusercontent.com/005d678e7a94c07b885885ab06b45dcaae5acaf6ecb856c3b4c382e865424be2/68747470733a2f2f706f7365722e707567782e6f72672f7363686e69747a6c65722f666c7569642d7374796c65642d726573706f6e736976652d696d616765732f762f737461626c65)](https://packagist.org/packages/schnitzler/fluid-styled-responsive-images)[![Latest Unstable Version](https://camo.githubusercontent.com/92679102fa2a92afcf53d3a50f739cd2a1d283c00d92b19b0c11fa9dc9bf2348/68747470733a2f2f706f7365722e707567782e6f72672f7363686e69747a6c65722f666c7569642d7374796c65642d726573706f6e736976652d696d616765732f762f756e737461626c65)](https://packagist.org/packages/schnitzler/fluid-styled-responsive-images)[![License](https://camo.githubusercontent.com/8564220f0f21189f4af1cb6b8be62b9a6cdd1b2c364f7d43299fdbc4a9278d79/68747470733a2f2f706f7365722e707567782e6f72672f7363686e69747a6c65722f666c7569642d7374796c65642d726573706f6e736976652d696d616765732f6c6963656e7365)](https://packagist.org/packages/schnitzler/fluid-styled-responsive-images) This project aims to provide an image-rendering process that will render responsive images with fluid, where the assumption is made, that TYPO3 CMS doesn't provide a mechanism out of the box for *fluid templates* while one is able to do it with TypoScript. - [Installation](#installation) - [Configuration](#configuration) - [Mode `srcset`](#mode--srcset-) - [Configuration Example](#configuration-example) - [Usage](#usage) - [Inner workings](#inner-workings) - [Extending `fluid_styled_responsive_images`](#extending--fluid-styled-responsive-images-) - [License](#license) Installation ------------ [](#installation) - Install via composer using the current stable release and track new stable releases: `composer require schnitzler/fluid-styled-responsive-images:"^10.2"` and enable the extension through the extension manager / your preferred mechanism - Use the current development version by running `composer require schnitzler/fluid-styled-responsive-images:"dev-master"` in your `composer.json` file, run `composer update` - Clone the current development version to your `typo3conf/ext` directory (ex. `cd typo3conf/ext && rm -Rf fluid_styled_responsive_images && git clone https://github.com/alexanderschnitzler/fluid-styled-responsive-images.git fluid_styled_responsive_images`) Configuration ------------- [](#configuration) The extension is configured through TypoScript, like most parts of your site are. Include the static TypoScript of the extension and then begin with the Configuration through your own TypoScript setup. The ImageRenderer currently supports the \[`srcset`\](srcset specification) and rendering as `data`-attributes, which is to make custom rendering with javascript easier. Minimal, empty configuration: ``` tt_content.textmedia.settings.responsive_image_rendering { layoutKey = srcset sourceCollection { # Please write your own sourceCollection configuration } } ``` ### Mode `srcset` [](#mode-srcset) A `sourceCollection` entry is a TypoScript hash. It can contain the following indices: keydescriptionexamplewidthThe target size of the generated image. Supports modifications like `m` & `c`1200c (crops the image to 1200px)srcseta string describing the condition under which the image is displayed`1200w` (1200px viewports)dataKeya name for the generated data-attribute`desktop`sizes \[optional\]a media query with custom styles to be applied`(min-width: 1200px) 1170px`For more precise descriptions, please check out the [html `img` element specification on srcset](http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset). #### Configuration Example [](#configuration-example) ``` tt_content.textmedia { settings { responsive_image_rendering { layoutKey = srcset sourceCollection { 10 { dataKey = desktop width = 1260m srcset = 1260w } 20 { dataKey = table width = 960m srcset = 960w } 30 { dataKey = tablet-small width = 720m srcset = 720w } 40 { dataKey = medium width = 640m srcset = 640w } 50 { dataKey = medium-phone width = 360m srcset = 360w } 60 { dataKey = small width = 320m srcset = 320w } } } } } ``` Usage ----- [](#usage) After installation and configuration, the output of the `` viewhelper uses the logic this extension supplies for images and renders the image. Inner workings -------------- [](#inner-workings) 1. a custom image renderer is registered 2. when the `RendererRegistry` is asked for a renderer suitable for the current mimetype, the renderer proposes itself if one of the known image mimetypes is matched 3. the renderer reads the current TypoScript and merges it with global extension configuration like the `enableSmallDefaultImage` setting 4. the renderer then calculates the needed sizes and returns a ready-made `img`-tag Extending `fluid_styled_responsive_images` ------------------------------------------ [](#extending-fluid_styled_responsive_images) Since fluid\_styled\_content is used, much of the output in TYPO3 CMS can be adjusted. Example of registering custom templates and adjusting images in collaboration with the `GalleryProcessor` in fluid\_styled\_content to provide precise rendering with Bootstrap 3 based templates: [websightgmbh/ws-texmedia-bootstrap](https://github.com/websightgmbh/typo3-ws_textmedia_bootstrap). License ------- [](#license) GPL-2.0+ ### Health Score 39 — LowBetter than 84% of packages Maintenance14 Infrequent updates — may be unmaintained Popularity34 Limited adoption so far Community22 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 88.9% 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 ~135 days Recently: every ~87 days Total 15 Last Release 2012d ago Major Versions 1.2.0 → 7.6.02017-08-06 7.6.0 → 8.7.02017-08-06 8.7.2 → 9.5.02020-01-17 9.5.0 → 10.2.02020-01-20 10.4.1 → 11.0.02020-12-30 PHP version history (6 changes)1.0.0PHP >=5.5.0 7.6.0PHP ^5.5 || ^7.0 8.7.0PHP ~7.0 || ~7.1 8.7.2PHP ^7.0 <7.4 9.5.0PHP ^7.2 11.0.0PHP ^7.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/2ac8297e12671d91305ec01ab56add8cb141fa82d678ba96f0012eeb7f88ea0c?d=identicon)[cedricziel](/maintainers/cedricziel) ![](https://www.gravatar.com/avatar/fd83531162fa868781394299eb6c38d4ffa2224056426ff908cba42bfb5147e0?d=identicon)[schnitzler](/maintainers/schnitzler) --- Top Contributors [![alexanderschnitzler](https://avatars.githubusercontent.com/u/711459?v=4)](https://github.com/alexanderschnitzler "alexanderschnitzler (96 commits)")[![cedricziel](https://avatars.githubusercontent.com/u/418970?v=4)](https://github.com/cedricziel "cedricziel (10 commits)")[![fazzyx](https://avatars.githubusercontent.com/u/6721027?v=4)](https://github.com/fazzyx "fazzyx (1 commits)")[![whiteroom](https://avatars.githubusercontent.com/u/310483?v=4)](https://github.com/whiteroom "whiteroom (1 commits)") --- Tags fluidresponsive-imagestypo3typo3-cmstypo3-cms-extensionimagesresponsivetypo3fluid ### Code Quality Static AnalysisPHPStan, Rector Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/schnitzler-fluid-styled-responsive-images/health.svg) ``` [![Health](https://phpackages.com/badges/schnitzler-fluid-styled-responsive-images/health.svg)](https://phpackages.com/packages/schnitzler-fluid-styled-responsive-images) ``` ### Alternatives [pagemachine/typo3-formlog Form log for TYPO3 23238.6k8](/packages/pagemachine-typo3-formlog)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.1M8](/packages/netresearch-rte-ckeditor-image)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[pagemachine/searchable TYPO3 extension to index and search content with Elasticsearch 1039.9k](/packages/pagemachine-searchable)[typo3/cms-fluid TYPO3 CMS Fluid Integration - Integration of the Fluid templating engine into TYPO3. 1912.9M648](/packages/typo3-cms-fluid)[typo3/cms-seo TYPO3 CMS SEO - SEO features including specific fields for SEO purposes, rendering of HTML meta tags and sitemaps. 168.9M155](/packages/typo3-cms-seo) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)