oliverthiele/ot-heroimage
最新稳定版本：v5.0.1
Composer 安装命令：
composer require 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.
关键字：
README 文档
README
Full-width hero image content element for TYPO3 v13 and v14, optimised for Core Web Vitals.
Features
- CLS optimisation —
width/heightattributes prevent layout shifts during image load - LCP optimisation —
fetchpriority="high"andloading="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-ceheaderandot-irrebuttons - SiteKit integration — dynamic template paths,
isLoadedconditions
Requirements
| Requirement | Version |
|---|---|
| TYPO3 | ^13.4 | ^14.3 |
| PHP | >=8.3 |
| oliverthiele/ot-irrebuttons | ^4.0 |
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
1. Include SiteSet
Include the SiteSet in your site configuration (
config/sites/yoursite/config.yaml):
dependencies: - oliverthiele/ot-heroimage
2. Image dimensions (Extension Manager)
Configure dimensions in Admin Tools > Settings > Extension Configuration > ot_heroimage:
| Setting | Default | Description |
|---|---|---|
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
The extension requires two crop variants in your TCA (typically configured in your site package):
| Variant | Used for | Suggested 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
Desktop image (assets) — required
Shown on screens ≥ 768px. Crop variant: heroDesktop.
Srcset breakpoints: 1280w, 1920w, 2560w.
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
- Create a content element of type Hero Image
- Upload a desktop image (
assets) — required - Optionally upload a mobile image (
image) for optimised mobile display - Configure crop areas for
heroMobileandheroDesktop - Set alt text for accessibility
- Choose layout option for optional padding
License
GPL-2.0-or-later — see LICENSE
Author
Oliver Thiele — oliver-thiele.de
统计信息
- 总下载量： 80
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 0
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： GPL-2.0-or-later
- 更新时间： 2025-11-29