TYPO3: CropVariants nutzen um Bildausschnitte auszugeben

Die Image-Crop-Funktion lässt sich einfach über Ihr eigenes Sitepackage anpassen. In vielen Fällen sind bereits vier vordefinierte Auflösungen vorhanden, die an verschiedene Viewports angepasst sind.

Wenn dies nicht der Fall ist, müssen Sie die Auflösungen für das Bild-Cropping selbst definieren, etwa indem Sie das TCA in Ihrer tt_content.php anpassen:

$GLOBALS['TCA']['tt_content']['types']['textmedia']['columnsOverrides']['assets']['config']['overrideChildTca']['columns']['crop']['config'] = [
    'cropVariants' => [
       'default' => [
           'disabled' => true,
       ],
       'mobile' => [
           'title' => 'LLL:EXT:meineExt/Resources/Private/Language/locallang.xlf:imageManipulation.default',
           'cropArea' => [
               'x' => 0.1,
               'y' => 0.1,
               'width' => 0.8,
               'height' => 0.8,
           ],
           'allowedAspectRatios' => [
               '4:3' => [
                   'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.4_3',
                   'value' => 4 / 3
               ],
               'NaN' => [
                   'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                   'value' => 0.0
               ],
           ],
       ],
    ],
];

Die Ausgabe des mobilen Viewports muss ebenfalls angepasst werden. Dies erfolgt im entsprechenden Fluid-Template mit folgendem Code:

<f:image fileExtension="webp" alt="<ALT>" cropVariant="default" class="single" image="{item.image}" width="600c" height="429c" treatIdAsReference="1" />

Man könnte auch verschiedene Varianten implementieren um in verschiedenen Viewports auch verschiedene Bildausschnitte auszugeben. Dazu kann man einfach weitere CropVariants hinzufügen und dann im Fluid per SourceSet implementieren.