Responsive Images
Examples for implementing responsive images with srcset and automatic generation.
Table of Contents
Automatic srcset Generation
Objective: Generate responsive images with srcset
TypoScript Setup
EXT:my_site/Configuration/TypoScript/setup.typoscript
lib.parseFunc_RTE {
tags.img = TEXT
tags.img {
current = 1
preUserFunc = MyVendor\MySite\UserFunc\ResponsiveImageRenderer->render
}
}
Copied!
PHP Implementation
EXT:my_site/Classes/UserFunc/ResponsiveImageRenderer.php
namespace MyVendor\MySite\UserFunc;
use TYPO3\CMS\Core\Resource\FileRepository;
use TYPO3\CMS\Core\Resource\ProcessedFile;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
class ResponsiveImageRenderer
{
public function render(
string $content,
array $conf,
ContentObjectRenderer $cObj
): string {
// Parse img tag
if (!preg_match('/<img([^>]*)>/i', $content, $imgMatch)) {
return $content;
}
// Extract data-htmlarea-file-uid
if (!preg_match('/data-htmlarea-file-uid="(\d+)"/', $imgMatch[1], $uidMatch)) {
return $content;
}
$fileUid = (int)$uidMatch[1];
// Get FAL file
$fileRepository = GeneralUtility::makeInstance(FileRepository::class);
try {
$file = $fileRepository->findByUid($fileUid);
} catch (\Exception $e) {
return $content;
}
// Generate responsive variants
$breakpoints = [
'xs' => 480,
'sm' => 768,
'md' => 992,
'lg' => 1200,
'xl' => 1920
];
$srcsetParts = [];
foreach ($breakpoints as $name => $width) {
$processedFile = $file->process(
ProcessedFile::CONTEXT_IMAGECROPSCALEMASK,
['width' => $width]
);
$srcsetParts[] = $processedFile->getPublicUrl() . ' ' . $width . 'w';
}
$srcset = implode(', ', $srcsetParts);
$sizes = '(max-width: 768px) 100vw, (max-width: 992px) 50vw, 33vw';
// Replace img tag with srcset version
$newImg = str_replace(
'<img',
'<img srcset="' . htmlspecialchars($srcset) . '" sizes="' . $sizes . '"',
$imgMatch[0]
);
return str_replace($imgMatch[0], $newImg, $content);
}
}
Copied!
Result HTML
<img
src="/fileadmin/image.jpg"
srcset="/fileadmin/_processed_/image_480.jpg 480w,
/fileadmin/_processed_/image_768.jpg 768w,
/fileadmin/_processed_/image_992.jpg 992w,
/fileadmin/_processed_/image_1200.jpg 1200w,
/fileadmin/_processed_/image_1920.jpg 1920w"
sizes="(max-width: 768px) 100vw, (max-width: 992px) 50vw, 33vw"
alt="Image description"
/>
Copied!
Result: Automatic responsive images ✅