Gallery für TYPO3

Warum sf_filecollection_gallery Bildergalerien in TYPO3 richtig löst

Bildergalerien gehören zu den häufigsten Anforderungen auf Unternehmenswebsites - Produktfotos, Team-Bilder, Eventdokumentation, Referenzprojekte. TYPO3 selbst bringt kein natives Galerie-Element mit. Das Standard-Content-Element “Bilder” zeigt Bilder untereinander oder in Spalten, aber ohne Lightbox, ohne Filterung und ohne flexible Layout-Optionen. sf_filecollection_gallery schliesst diese Lücke, indem es TYPO3 File Collections als Datenquelle für Galerien nutzt und dabei Lightbox-Integration, verschiedene Layouts und Lazy Loading mitliefert.

Der entscheidende Vorteil gegenüber anderen Galerie-Extensions: Redakteure arbeiten mit dem FAL-System, das sie bereits kennen. Bilder werden in File Collections organisiert, und die Galerie zeigt automatisch alle Bilder der zugewiesenen Collection. Neue Bilder hinzufügen bedeutet: Bild in die Collection ziehen, fertig.

Typische Einsatzszenarien

Referenzprojekte und Portfolios. Eine Architektur-Agentur zeigt auf jeder Projektseite 15 bis 40 Bilder in einer Galerie. Der Redakteur pflegt eine File Collection pro Projekt. sf_filecollection_gallery rendert die Galerie als Grid mit Lightbox. Beim Klick auf ein Bild öffnet sich die Vollansicht mit Navigation zum nächsten und vorherigen Bild. Die Bildbeschreibungen aus den FAL-Metadaten (Titel, Alternative, Description) werden automatisch als Bildunterschriften angezeigt.

Event-Dokumentation und Pressefotografie. Ein Messeveranstalter dokumentiert jedes Event mit 50 bis 200 Fotos. Die Bilder werden batch-weise in eine File Collection hochgeladen. sf_filecollection_gallery erzeugt automatisch Thumbnails, optimiert die Ladezeit durch Lazy Loading und zeigt die Galerie im Masonry-Layout, das unterschiedliche Seitenverhältnisse elegant verarbeitet.

Produktkataloge mit visueller Darstellung. Ein Möbelhersteller zeigt pro Produktkategorie eine Galerie mit Ambiente-Aufnahmen. Über mehrere File Collections (eine pro Kategorie) und ein Frontend-Plugin mit Kategorie-Filter können Besucher zwischen den Galerien wechseln, ohne die Seite neu zu laden.

Technische Architektur

sf_filecollection_gallery ist eine Extbase-Extension, die als TYPO3-Plugin in Content-Elemente eingebunden wird. Die Datenquelle sind TYPO3 File Collections aus dem File Abstraction Layer (FAL).

Die Architektur gliedert sich in drei Schichten:

• Datenquelle: Die Extension liest File Collections über die TYPO3 FAL API. Unterstützt werden statische Collections (manuell zugewiesene Dateien), Folder-basierte Collections (alle Dateien eines Ordners) und Kategorie-basierte Collections.
• Rendering-Engine: Fluid-Templates steuern die Ausgabe. Die Extension liefert Templates für Grid-Layout, Masonry-Layout und einfache Listen mit. Alle Templates sind überschreibbar - über die Standard-TYPO3-Mechanismen (TypoScript Template-Pfade) können eigene Fluid-Templates eingebunden werden.
• Lightbox-Integration: sf_filecollection_gallery unterstützt mehrere Lightbox-Bibliotheken: Fancybox, PhotoSwipe und Lightcase. Die Wahl wird über TypoScript-Konfiguration gesteuert. Gosign empfiehlt PhotoSwipe wegen der besseren Touch-Unterstützung und der fehlenden jQuery-Abhängigkeit.

Lazy Loading ist nativ integriert: Bilder unterhalb des sichtbaren Bereichs werden erst geladen, wenn der Nutzer scrollt. Das verwendet das native loading="lazy"-Attribut und optional Intersection Observer für ältere Browser.

Abhängigkeiten: TYPO3 Core (v10+), FAL. Lightbox-Libraries werden als Frontend-Assets mitgeliefert oder können über die eigene Asset-Pipeline eingebunden werden. Ein Vorteil der File-Collection-Architektur: Bilder können in mehreren Galerien gleichzeitig erscheinen, ohne dupliziert zu werden. Eine Referenz auf dasselbe FAL-Objekt in verschiedenen Collections reicht aus. Das spart Speicherplatz und stellt sicher, dass Metadaten (Alt-Text, Titel, Copyright) zentral gepflegt werden.

Häufige Probleme und Lösungen

Problem: Galerie zeigt keine Bilder, obwohl die File Collection gefüllt ist. Ursache ist häufig eine falsche Storage-Konfiguration. Die File Collection referenziert einen Storage, auf den das Frontend keinen Zugriff hat (z.B. ein nicht-öffentlicher Storage oder ein Storage mit falscher Base-URL). Die Lösung: Im TYPO3 Backend unter Dateiliste prüfen, ob die Bilder im richtigen Storage liegen und ob der Storage als “public” konfiguriert ist. Zusätzlich muss das Plugin-Content-Element den korrekten Startpunkt (Sys-Folder oder Seite) konfiguriert haben, in dem die File Collection angelegt ist.

Problem: Lightbox funktioniert nicht, Bilder öffnen als neue Seite. Die Lightbox-JavaScript-Bibliothek wird nicht geladen. Häufig liegt das an einem TypoScript-Include, das fehlt, oder an einem Konflikt mit einer anderen JavaScript-Bibliothek auf der Seite. Die Lösung: Im Browser-Dev-Tool prüfen, ob die Lightbox-JS-Datei geladen wird und ob JavaScript-Fehler in der Konsole erscheinen. Bei jQuery-basierten Lightboxen (Fancybox) kann ein jQuery-Versionskonflikt die Ursache sein.

Problem: Ladezeit zu hoch bei grossen Galerien. Eine Galerie mit 100+ Bildern in hoher Auflösung kann trotz Lazy Loading langsam laden, weil die Thumbnails nicht ausreichend komprimiert sind. Die Lösung: TYPO3 Image Processing konfigurieren, um Thumbnails in fester Grösse (z.B. 400x300px) und optimierter Qualität (75-80%) zu generieren. Zusätzlich WebP-Format über die TYPO3 Image-Processing-Konfiguration aktivieren.

Migration und Versions-Kompatibilität

sf_filecollection_gallery wird aktiv gepflegt und ist für TYPO3 v11 und v12 LTS verfügbar. Die Extension hat eine stabile API und kaum Breaking Changes zwischen Versionen. Für TYPO3 v13 ist die Kompatibilität typischerweise zeitnah nach dem LTS-Release gegeben.

Wer von einer älteren Galerie-Extension migriert (z.B. tt_products_gallery, ws_flexslider als Galerie-Ersatz oder eigenentwickelte Galerie-Plugins), muss lediglich die Datenquelle umstellen: Bilder in File Collections organisieren und das sf_filecollection_gallery-Plugin auf den Seiten platzieren. Die Bilder selbst bleiben im FAL und müssen nicht verschoben werden.

Beim TYPO3-Upgrade von v10 auf v12 sollte die Lightbox-Konfiguration geprüft werden. Fancybox 2 ist nicht mehr kompatibel mit aktuellen jQuery-Versionen. Gosign empfiehlt den Wechsel auf PhotoSwipe, das ohne jQuery auskommt und bessere Performance auf mobilen Geräten liefert. PhotoSwipe unterstützt zudem Touch-Gesten (Pinch-to-Zoom, Swipe), die auf Smartphone-Bildschirmen die Nutzererwartung erfüllen. Die Migration von Fancybox auf PhotoSwipe erfordert typischerweise 4 bis 8 Stunden: neue JavaScript-Initialisierung, angepasstes Lightbox-Template und CSS-Feintuning für die Übergangsanimationen.