PHPackages oliverthiele/ot-heroimage - 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. oliverthiele/ot-heroimage ActiveTypo3-cms-extension[Image & Media](/categories/media) oliverthiele/ot-heroimage ========================= Heroimage - This content element can output larger image widths than normal elements and is therefore suitable for outputting images across the entire screen width. v5.0.2(1mo ago)0162GPL-2.0-or-laterPHP >=8.3 Since Aug 19Compare [ Source](https://github.com/oliverthiele/ot-heroimage)[ Packagist](https://packagist.org/packages/oliverthiele/ot-heroimage)[ Docs](https://www.oliver-thiele.de/)[ RSS](/packages/oliverthiele-ot-heroimage/feed)WikiDiscussions Synced today READMEChangelogDependencies (8)Versions (17)Used By (0) OT Hero Image — TYPO3 Extension =============================== [](#ot-hero-image--typo3-extension) Full-width hero image content element for TYPO3 v13 and v14, optimised for Core Web Vitals. [![TYPO3](https://camo.githubusercontent.com/ff624ed071afbc7085dcd4f99f2358379f8284ba14ae6891eab075f69c55929f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332e342d6f72616e67652e737667)](https://typo3.org/)[![Packagist Version](https://camo.githubusercontent.com/127f72bf723aa6652b9bfb0ddbda498f1a3f7e715c9172eff7a7401d0857672c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6c69766572746869656c652f6f742d6865726f696d6167652e737667)](https://packagist.org/packages/oliverthiele/ot-heroimage)[![PHP](https://camo.githubusercontent.com/c31386444f91785cb8160f6849ad52634eac335c1b288fb0b782921b6171e7c7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f6f6c69766572746869656c652f6f742d6865726f696d6167652f7068702e737667)](https://php.net/)[![License](https://camo.githubusercontent.com/fdf8be90dc55e1561bf980ca999dffa1f361c29dbfe845e12ee41b3ace4babc1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f6c69766572746869656c652f6f742d6865726f696d6167652e737667)](LICENSE)[![Changelog](https://camo.githubusercontent.com/6bc02a7bc61afc1cb3faaa53420df6d904b9940d7f3e2e11a463e1fdbb3cd52d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4368616e67656c6f672d4348414e47454c4f472e6d642d626c75652e737667)](CHANGELOG.md) --- Features -------- [](#features) - **CLS optimisation** — `width`/`height` attributes prevent layout shifts during image load - **LCP optimisation** — `fetchpriority="high"` and `loading="eager"` for above-the-fold images - **Separate mobile and desktop images** — different crop variants and srcset breakpoints per device class - **Responsive srcset** — breakpoints filtered by original image size (no upscaling) - **SVG support** — SVGs are output as-is without srcset - **Text overlay** — optional heading/button overlay via `ot-ceheader` and `ot-irrebuttons` - **SiteKit integration** — dynamic template paths, `isLoaded` conditions --- Requirements ------------ [](#requirements) RequirementVersionTYPO3^13.4 | ^14.3PHP>=8.3oliverthiele/ot-irrebuttons^4.0--- Installation ------------ [](#installation) ``` composer require oliverthiele/ot-heroimage ``` Then run the TYPO3 setup: ``` vendor/bin/typo3 extension:setup -e ot_heroimage # or via DDEV: ddev typo3 extension:setup -e ot_heroimage ``` --- Configuration ------------- [](#configuration) ### 1. Include SiteSet [](#1-include-siteset) Include the SiteSet in your site configuration ( `config/sites/yoursite/config.yaml`): ``` dependencies: - oliverthiele/ot-heroimage ``` ### 2. Image dimensions (Extension Manager) [](#2-image-dimensions-extension-manager) Configure dimensions in **Admin Tools > Settings > Extension Configuration > ot\_heroimage**: SettingDefaultDescription`mobileWidth``768`Maximum width for mobile images`mobileHeight``576`Height for mobile images (CLS)`desktopWidth``2560`Maximum width for desktop images`desktopHeight``450`Height for desktop images (CLS)These values serve two purposes: the `width`/`height` HTML attributes (CLS prevention) and the maximum processing dimensions (no upscaling beyond original size). ### 3. Crop variants [](#3-crop-variants) The extension requires two crop variants in your TCA (typically configured in your site package): VariantUsed forSuggested aspect ratio`heroMobile`Mobile images (< 768px)4:3 (matches 768×576 default)`heroDesktop`Desktop images (≥ 768px)~5.7:1 (matches 2560×450 default)--- Image fields ------------ [](#image-fields) ### Desktop image (`assets`) — required [](#desktop-image-assets--required) Shown on screens ≥ 768px. Crop variant: `heroDesktop`. Srcset breakpoints: 1280w, 1920w, 2560w. ### Mobile image (`image`) — optional [](#mobile-image-image--optional) Shown on screens < 768px. Crop variant: `heroMobile`. Srcset breakpoints: 480w, 768w. If no mobile image is provided, the desktop image is used across all breakpoints (srcset: 480w, 768w, 1280w, 1920w, 2560w). --- Usage ----- [](#usage) 1. Create a content element of type **Hero Image** 2. Upload a desktop image (`assets`) — required 3. Optionally upload a mobile image (`image`) for optimised mobile display 4. Configure crop areas for `heroMobile` and `heroDesktop` 5. Set alt text for accessibility 6. Choose layout option for optional padding --- License ------- [](#license) GPL-2.0-or-later — see [LICENSE](LICENSE) Author ------ [](#author) Oliver Thiele — [oliver-thiele.de](https://www.oliver-thiele.de) ### Health Score 46 — FairBetter than 92% of packages Maintenance91 Actively maintained with recent releases Popularity14 Limited adoption so far Community2 Small or concentrated contributor base Maturity63 Established project with proven stability 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 ~45 days Recently: every ~19 days Total 15 Last Release 44d ago Major Versions v1.0.0 → v2.0.02025-01-28 v2.0.0 → v3.0.02025-02-28 v3.1.1 → v4.0.02025-11-27 v4.1.4 → v5.0.02026-04-25 PHP version history (2 changes)v4.0.1PHP ^8.2 v5.0.0PHP >=8.3 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/5030298?v=4)[Oliver Thiele](/maintainers/oliverthiele)[@oliverthiele](https://github.com/oliverthiele) --- Tags TYPO3 CMS ### Embed Badge ![Health badge](/badges/oliverthiele-ot-heroimage/health.svg) ``` [![Health](https://phpackages.com/badges/oliverthiele-ot-heroimage/health.svg)](https://phpackages.com/packages/oliverthiele-ot-heroimage) ``` ### Alternatives [netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.1M8](/packages/netresearch-rte-ckeditor-image)[plan2net/webp Drop-in WebP, AVIF, and JPEG XL delivery for TYPO3 images — automatic, no URL or template changes 681.5M5](/packages/plan2net-webp)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[derhansen/sf_event_mgt Event management and registration - Configurable event management and registration extension based on ExtBase and Fluid 66338.4k10](/packages/derhansen-sf-event-mgt)[brotkrueml/schema Embedding schema.org vocabulary - API and view helpers for schema.org markup 34653.7k16](/packages/brotkrueml-schema)[sitegeist/sms-responsive-images Provides ViewHelpers and configuration to render valid responsive images based on TYPO3's image cropping tool. 34516.3k3](/packages/sitegeist-sms-responsive-images) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)