PHPackages madj2k/t3-media-utils - 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. [Utility & Helpers](/categories/utility) 4. / 5. madj2k/t3-media-utils ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) madj2k/t3-media-utils ===================== TYPO3 extension providing fully configurable responsive images, media ViewHelpers and reusable partials, with support for picture tags, srcset/sizes and lazy loading. v13.4.10-stable(2mo ago)0978[1 issues](https://github.com/skroggel/t3-media-utils/issues)1GPL-2.0+PHPPHP >=7.4 Since Apr 7Pushed 1mo ago2 watchersCompare [ Source](https://github.com/skroggel/t3-media-utils)[ Packagist](https://packagist.org/packages/madj2k/t3-media-utils)[ Docs](https://www.steffenkroggel.de)[ RSS](/packages/madj2k-t3-media-utils/feed)WikiDiscussions development Synced 3w ago READMEChangelogDependencies (4)Versions (36)Used By (1) media\_utils ============ [](#media_utils) This extension provides - fully configurable responsive images for TYPO3 - some helpful ViewHelpers and includable partials for the usage with media-files. Features -------- [](#features) - Supports ``, `srcset`, and `sizes` - Configurable breakpoints - Native and JavaScript lazy loading - Backend configuration via `settings.definitions.yaml` - Usage of processingInstructionsBatch in TYPO3 v14 (thanks to Ayke Halder for the improvement hint) - Includes a media-partial for usage in own extensions - Includes a configuration for responsive images with Bootstrap (picture-tag only) - Some helpful ViewHelpers for usage with media-files - Configuration is backwards-compatible with EXT:sms\_responsive\_images - Fixes performance issue with upsizing of images of EXT:sms\_responsive\_images Installation ------------ [](#installation) Just install the extension and include the desired configuration (e.g. with or without Bootstrap) set to your site-config. ``` name: your/site-package label: 'Site Package (Default)' dependencies: - madj2k/media-utils-bootstrap ``` Ensure that you add "webp" as allowed image extension in your `settings.php` ``` $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg,webp'; ``` How to use ---------- [](#how-to-use) ### Usage with EXT:content-blocks (friendsoftypo3/content-blocks) [](#usage-with-extcontent-blocks-friendsoftypo3content-blocks) The extension automatically includes the configuration for responsive images to EXT:content-blocks. This way all your custom content elements have the according settings automaticllay available. If you configure default-settings for your custom content elements, you can also include default-settings for your media files. Just follow this structure for your TypoScript-configuration: ``` tt_content.VENDOR_your_element { settings { [...] media { image { dimensions { maxWidth = 650 } } video { dimensions { width = 1370 height= 771 } additionalConfig { playsinline = 1 // needed for Safari on Mobile autoplay = 1 mute = 1 loop = 0 modestbranding = 1 } } } } } ``` Here you also have the ability to override the default settings, e.g. if you want to use different cropVariants for each breakpoint or no native lazy-loading: ``` tt_content.VENDOR_your_element { settings { [...] txMediaUtils.responsiveImages { loading = eager breakpoints { 0 { cropVariant = default } 1 { cropVariant = tablet } 2 { cropVariant = mobile } } } [...] } } ``` Then call the media-partial in your content-element like this: ``` ``` If you e.g. set a explicit maxWidth this value will be used, otherwise the default value from your TypoScript-configuration will be used. The defined configuration for responsive images is applied automatically. There may be the case that you have multiple styles of one custom content element which require different default-settings for your media. This can be handeled by extending your TypoScript-configuration by an additional sub-key to switch between the settings. Example: ``` tt_content.VENDOR_your_element { settings { [...] media { small { image { dimensions { maxWidth = 650 } } video { dimensions { width = 1370 height= 771 } additionalConfig { autoplay = 1 mute = 1 loop = 0 modestbranding = 1 } } } big { image { dimensions { maxWidth = 650 } } video { dimensions { width = 1370 height= 771 } additionalConfig { autoplay = 1 mute = 1 loop = 0 modestbranding = 1 } } } } } } ``` Now you can call the media-partial in your content-element with the according key for the desired setting. The following call would load the default-settings for the sub-key "small": ``` ``` ### Usage with EXT:mask (deprecated) [](#usage-with-extmask-deprecated) The extension automatically includes the configuration for responsive images to EXT:mask. This way all your custom content elements have the according settings automaticllay available. **This actually works exactly as described above for EXT:content-blocks (friendsoftypo3/content-blocks).** ### Usage in TypoScript-based FluidTemplates [](#usage-in-typoscript-based-fluidtemplates) The usage does not differ much from the usage with EXT:content-blocks (friendsoftypo3/content-blocks). You simply have to include the corresponding settings and the partial-path into your TypoScript. Here you also have the ability to override the default settings, e.g. if you want to use different cropVariants for each breakpoint. ``` lib.siteDefault { fluidTemplates { stage = FLUIDTEMPLATE stage { file = EXT:site_default/Resources/Private/FluidTemplates/Templates/Stage.html partialRootPaths.0 = EXT:site_default/Resources/Private/FluidTemplates/Partials/Stage/ partialRootPaths.1 = EXT:site_default/Resources/Private/Mask/Frontend/Partials/ partialRootPaths.1712245685 = {$plugin.tx_mediautils.view.partialRootPath} dataProcessing { 10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 10 { references { table = pages data = levelfield: -1, media, slide } as = media } } variables { pageTitle = TEXT pageTitle.data = page:title } settings.txMediaUtils.responsiveImages < lib.txMediaUtils.responsiveImages settings.txMediaUtils.responsiveImages { loading = eager breakpoints { 0 { cropVariant = default } 1 { cropVariant = tablet } 2 { cropVariant = mobile } } } } } } ``` ### Usage for images in your own extension [](#usage-for-images-in-your-own-extension) There are basically two ways: #### Use the partial of this extension and override only the values you need to override (recommended) [](#use-the-partial-of-this-extension-and-override-only-the-values-you-need-to-override-recommended) 1. Extend the partialPaths accordingly: ``` tx_myextension { view { partialRootPaths { 1712245685 = {$plugin.tx_mediautils.view.partialRootPath} } } } ``` 2. Merge the global settings into your extension settings: ``` tx_myextension.settings.txMediaUtils.responsiveImages < lib.txMediaUtils.responsiveImages ``` 3. Use the partial accordingly and add additional settings if you want (see above) ``` ``` #### Use the normal ViewHelper and insert the values of the TypoScript-lib into each parameters (not really convenient - but works) [](#use-the-normal-viewhelper-and-insert-the-values-of-the-typoscript-lib-into-each-parameters-not-really-convenient---but-works) ``` ``` Testing ======= [](#testing) - Single Method ``` ddev exec vendor/bin/phpunit -c vendor/madj2k/t3-media-utils/phpunit.xml \ vendor/madj2k/t3-media-utils/Tests/Unit/Whatever/Whatever.php \ --filter MethodName ``` ``` ddev exec vendor/bin/phpunit -c vendor/madj2k/t3-media-utils/phpunit.functional.xml \ vendor/madj2k/t3-media-utils/Tests/Functional/Whatever/Whatever.php \ --filter MethodName ``` - Single File ``` ddev exec vendor/bin/phpunit -c vendor/madj2k/t3-media-utils/phpunit.xml \ vendor/madj2k/t3-media-utils/Tests/Unit/Whatever/Whatever.php ``` ``` ddev exec vendor/bin/phpunit -c vendor/madj2k/t3-media-utils/phpunit.functional.xml \ vendor/madj2k/t3-media-utils/Tests/Functional/Whatever/Whatever.php ``` - All files ``` ddev exec vendor/bin/phpunit -c vendor/madj2k/t3-media-utils/phpunit.xml ``` ``` ddev exec vendor/bin/phpunit -c vendor/madj2k/t3-media-utils/phpunit.functional.xml ``` ### Health Score 45 — FairBetter than 91% of packages Maintenance89 Actively maintained with recent releases Popularity16 Limited adoption so far Community12 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 93.2% 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 ~25 days Recently: every ~59 days Total 32 Last Release 30d ago Major Versions v12.4.18-stable → v13.4.1-stable2025-03-24 v13.4.10-stable → v14.4.0-alpha2026-05-07 PHP version history (2 changes)v12.4.0-stablePHP >=7.4 v14.4.0-alphaPHP >=8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/ca11ace9490b8fe0b145e7d32464fba5c8eddaa88d700b95d32241a226623e76?d=identicon)[SteffenKroggel](/maintainers/SteffenKroggel) --- Top Contributors [![skroggel](https://avatars.githubusercontent.com/u/8121847?v=4)](https://github.com/skroggel "skroggel (41 commits)")[![addorange](https://avatars.githubusercontent.com/u/1980618?v=4)](https://github.com/addorange "addorange (3 commits)") --- Tags TYPO3 CMSResponsvie Images ### Embed Badge ![Health badge](/badges/madj2k-t3-media-utils/health.svg) ``` [![Health](https://phpackages.com/badges/madj2k-t3-media-utils/health.svg)](https://phpackages.com/packages/madj2k-t3-media-utils) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 101466.4k45](/packages/friendsoftypo3-content-blocks)[derhansen/sf_event_mgt Event management and registration - Configurable event management and registration extension based on ExtBase and Fluid 65329.4k9](/packages/derhansen-sf-event-mgt)[wazum/sluggi TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects 41515.2k](/packages/wazum-sluggi)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 34628.4k14](/packages/brotkrueml-schema)[yoast-seo-for-typo3/yoast_seo Yoast SEO for TYPO3 511.7M9](/packages/yoast-seo-for-typo3-yoast-seo)[lochmueller/calendarize Create a structure for timely controlled tables (e.g. events) and one plugin for the different output of calendar views (list, detail, month, year, day, week...). The extension is shipped with one default event table, but you can also 'calendarize' your own table/model. It is completely independent and configurable! Use your own models as event items in this calender. Development on https://github.com/lochmueller/calendarize 76161.6k13](/packages/lochmueller-calendarize) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)