Image Cropping in TYPO3 – der beste Bildausschnitt
Der Blick aufs Wesentliche
Mit der sogenannten Image Crop Funktion im Backend wird es Redakteuren ermöglicht, für hochgeladene Bilder verschiedene Auflösungen (Viewports) und einen anderen Bildausschnitt zu wählen. So kann der User bei einem Bild mit vielen kleinen Details bestimmen, welcher Ausschnitt wichtig für den Website-Besucher ist und ihm diesen anzeigen lassen.
Auf den Screenshots ist ganz gut zu sehen, dass auf der rechten Seite ein kleiner Ausschnitt für das Bild gewählt wurde. Das ist meiner Meinung nach auch wichtig, da sich so das Auge des Betrachters auf das Wesentliche beschränken kann.
Wo ihr diese Funktion genau findet? Direkt über den kleinen Vorschaubildern seht ihr unter dem Punkt „Bildbearbeitung“ den Button „Editor öffnen“. Klickt ihr darauf, erhaltet ihr die Möglichkeit, über einen orangenen Rahmen zu definieren, welchen Ausschnitt das Bild im entsprechenden Viewport haben soll.
Anpassen des Standard Viewports
In der „Basisausstattung“ von TYPO3 gibt es leider nur den Standard Viewport, der euch beim Anzeigen von responsiven Bildern auf verschiedenen Viewports nicht hilft.
Ihr könnt die Image Crop Funktion aber schnell über sein eigenes Sitepackage verändern. Ich nutze für die meisten Websites das boostrap_package als Unterbau. Das boostrap_package bringt bereits vier Auflösungen mit, welche perfekt auf die einzelnen Viewports angepasst sind.
Nutzt ihr das bootstrap_package nicht, müsst ihr die Auflösung zum Croppen der Bilder selbst definieren. Dafür müsst ihr im eigenen Sitepackage z. B. das TCA via tt_content.php erstellen.
$GLOBALS['TCA']['tt_content']['types']['textmedia']['columnsOverrides']['assets']['config']['overrideChildTca']['columns']['crop']['config'] = [
'cropVariants' => [
'default' => [
'disabled' => true,
],
'mobile' => [
'title' => 'LLL:EXT:ext_key/Resources/Private/Language/locallang.xlf:imageManipulation.mobile',
'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
],
],
],
],
];
Um die Ausgabe des mobilen Viewports müsst ihr euch demensprechendend auch noch kümmern.
Das würde man dann im entsprechenden Fluid Template mit diesem Code machen:
<f:image image="{data.image}" cropVariant="mobile" width="800" /> Fazit
Es gibt noch einige Funktionen mehr und auch sogenannte Focus und Cover Areas, die ihr über das TCA definieren könnt. Dafür gibt es einige Beispiele in der Dokumentation von TYPO3.
Wie schon eingangs erwähnt, ist das in meinen Augen eine wirklich unverzichtbare Funktion, die in jeder Website mit TYPO3 integriert werden sollte.
Da jeder Redakteur mit wenigen Klicks selbst den Ausschnitt definieren oder dieser auch vom System automatisch gewählt werden kann, ist der initiale Implementierungsaufwand nicht sehr hoch. Also durchaus lohnenswert, sich das Ganze mal anzuschauen!
Tipp!
Buche jetzt deine TYPO3-Projekte auf einem Agentur-Server und profitiere im Service von unserer Expertise aus über 150.000 bei Mittwald gehosteten TYPO3 Projekten. Wir unterstützen dich 24/7!
Kommentar hinzufügen