focuspoint für TYPO3: Intelligentes Bild-Cropping

focuspoint verhindert, dass Bilder beim responsiven Zuschneiden wichtige Motivbereiche verlieren - die Extension setzt einen Fokuspunkt, an dem das Crop bei jedem Seitenverhältnis ausgerichtet bleibt

Wer Bilder auf einer responsiven Website verwendet, kennt das Problem: Ein Hochformat-Portrait, das im Teaser nur 200 Pixel hoch dargestellt wird, zeigt plötzlich nur den Hals oder die Stirn. Ein Landschaftsfoto, das im Hero-Bereich als schmaler Streifen erscheint, zeigt den Himmel statt der Berge. Pauschales Zentrieren führt dazu, dass Hauptmotive abgeschnitten werden, weil das mathematische Zentrum selten mit dem tatsächlichen Motiv-Zentrum übereinstimmt. focuspoint löst das, indem Redakteure im Backend einen Punkt auf dem Bild setzen, der bei jedem Crop in Sichtbereich bleiben muss. Die Ausgabe passt sich an alle Seitenverhältnisse an, ohne dass für jedes Format eine eigene Bildvariante erzeugt werden muss.

Der Unterschied zu einer klassischen Bildbearbeitungs-Pipeline mit festen Crops ist groß. Statt für Desktop, Tablet und Mobile je eine separat zugeschnittene Version zu pflegen, gibt es ein Originalbild mit einem Fokuspunkt und beliebig viele Ausgabeformate, die das System automatisch errechnet. Für Redaktionen mit vielen Bildern reduziert das die Pflegezeit dramatisch - und für das Marketing öffnet es die Möglichkeit, neue Bild-Seitenverhältnisse ohne Nacharbeit einzuführen.

Typische Einsatzszenarien

Der erste klassische Fall sind Personen- und Teamseiten. Eine Unternehmens-Website zeigt Mitarbeiter-Portraits in verschiedenen Layouts - als rundes Avatar im Header, als quadratische Kachel in der Teamliste, als breites Format auf der Detailseite. Ohne Fokuspunkt muss der Fotograf exakt zentriert fotografieren oder die Redaktion legt für jedes Layout eine eigene Variante an. Mit focuspoint setzt die Redaktion einmal einen Punkt auf das Gesicht und das Bild funktioniert in allen Kontexten.

Der zweite Fall sind Produkt- und Raumfotos. Immobilienmakler, Hoteliers und Möbelhändler arbeiten mit Fotos, bei denen das eigentliche Motiv - ein Sofa, ein Zimmerblick, ein Produktdetail - nicht im Bildmittelpunkt liegt. focuspoint erlaubt, genau dieses Motiv auszuwählen und sorgt dafür, dass es auch auf Mobilgeräten nicht verloren geht.

Dritter Einsatz: Magazin- und Artikel-Teaser. Redaktionelle Artikelbilder haben oft einen klaren Blickfang, etwa einen Sprecher auf einer Bühne oder ein Produkt in einer Szene. Bei Teaser-Listen mit Hochkant-Thumbnails wäre dieser Blickfang ohne Fokuspunkt häufig außerhalb des Bildausschnitts.

Technische Architektur

focuspoint ergänzt das TYPO3-FAL-System um zwei zusätzliche Metadatenfelder: focus_point_x und focus_point_y. Beide werden im Backend über ein Formularelement gepflegt, das das Originalbild als Auswahlfläche anzeigt. Der Redakteur klickt auf den relevanten Punkt, die relative Position wird gespeichert. Technisch sind das zwei Fließkommawerte zwischen null und eins, die den Anteil der Bildbreite beziehungsweise -höhe beschreiben.

Beim Rendern im Frontend wird der Fokuspunkt vom Fluid-ViewHelper ausgewertet. Statt des üblichen “f:image”-ViewHelpers nutzt die Extension einen eigenen ViewHelper, der die Crop-Berechnung unter Berücksichtigung des Fokuspunkts durchführt und das Bild über die TYPO3-GIFBUILDER-Pipeline in der gewünschten Zielgröße erzeugt. Das Ergebnis wird gecached und erneut nur bei Änderungen neu erzeugt.

Die Extension spielt mit allen gängigen Bildformaten zusammen - JPEG, PNG, WebP, AVIF - und nutzt für die eigentliche Bildverarbeitung ImageMagick oder GraphicsMagick, also denselben Stack, auf den TYPO3 ohnehin aufbaut. Für Lazy Loading und srcset-Integration gibt es keine Konflikte: Der ViewHelper kann in Picture-Elementen mit mehreren Sources verschachtelt werden und liefert für jeden Breakpoint den passenden Ausschnitt.

Häufige Probleme und Lösungen

Das erste Problem ist die Reihenfolge der ViewHelper. Wer focuspoint in bestehende Templates einbaut, die bereits mit “f:image” und manuellen Crop-Argumenten arbeiten, muss den focuspoint-ViewHelper an die Stelle des Standards setzen, nicht darum herum. Sonst werden beide Logiken gegeneinander laufen und das Ergebnis ignoriert den Fokuspunkt. Die Lösung ist eine saubere Migration aller Bildreferenzen im Sitepackage auf den neuen ViewHelper.

Zweites Problem: Cache-Invalidierung. Wenn Redakteure den Fokuspunkt ändern, muss der Bildcache verworfen werden, sonst sehen sie immer noch den alten Ausschnitt. TYPO3 leert den Bildcache normalerweise bei Änderungen am Originalbild, nicht bei Metadaten-Änderungen. Die Lösung ist ein EventListener, der bei Änderungen an den Fokuspunkt-Feldern gezielt die betroffenen Processed-Files löscht.

Drittes Problem: Inkonsistente Ergebnisse zwischen Backend-Vorschau und Frontend. Die Vorschau im Backend nutzt einen anderen Renderpfad als das Frontend, was zu kleinen Abweichungen führen kann. Pragmatische Lösung: Im Backend nur eine ungefähre Vorschau zeigen und Redakteure auf das Frontend als verbindliche Referenz verweisen.

Migration und Versions-Kompatibilität

TYPO3 bringt seit Version 9 einen nativen Crop-Editor im Backend mit, der einzelne Varianten pro Bild erlaubt. Für einfache Anwendungsfälle reicht das aus. focuspoint unterscheidet sich dadurch, dass der Fokuspunkt einmal gesetzt wird und automatisch in alle Crop-Varianten einfließt, statt jede Variante einzeln zu bearbeiten. Wer viele Bilder hat und wenig Redaktionszeit, fährt mit focuspoint langfristig besser.

Die Extension ist mit TYPO3 v11, v12 und v13 kompatibel. Beim Upgrade von älteren Versionen sollte die FAL-Metadatenstruktur und die verwendeten ViewHelper auf die aktuelle Syntax gebracht werden.

Eine neue Klasse von Alternativen sind KI-gestützte Saliency-Erkennungen, die den Fokuspunkt automatisch aus dem Bildinhalt ableiten. Diese Ansätze reduzieren die redaktionelle Arbeit zusätzlich, weil Redakteure den Punkt nicht mehr selbst setzen müssen, sondern nur in Ausnahmefällen korrigieren. Für TYPO3 gibt es erste Integrationen dieser Technik, sie sind aber noch nicht Standard und sollten projektbezogen bewertet werden.

Gosign konfiguriert focuspoint und integriert es in Fluid-Template-Architekturen. KI-gestützte Analyse der Design-Layouts schlägt optimale Crop-Presets für alle Breakpoints vor, sodass Redakteure bei der Bildpflege nicht jedes Format einzeln durchprobieren müssen.