Gallery dla TYPO3

Dlaczego sf_filecollection_gallery prawidłowo rozwiązuje galerie obrazów w TYPO3

Galerie obrazów należą do najczęstszych wymagań na stronach firmowych - zdjęcia produktowe, zdjęcia zespołu, dokumentacja eventów, projekty referencyjne. TYPO3 sam nie posiada natywnego elementu galerii. Standardowy element treści “Obrazy” wyświetla obrazy pod sobą lub w kolumnach, ale bez lightbox, bez filtrowania i bez elastycznych opcji layoutu. sf_filecollection_gallery zamyka tę lukę, wykorzystując TYPO3 File Collections jako źródło danych dla galerii, dostarczając jednocześnie integrację lightbox, różne layouty i lazy loading.

Decydująca zaleta wobec innych rozszerzeń galerii: redaktorzy pracują z systemem FAL, który już znają. Obrazy są organizowane w File Collections, a galeria automatycznie wyświetla wszystkie obrazy przypisanej kolekcji.

Typowe scenariusze zastosowań

Projekty referencyjne i portfolio. Agencja architektoniczna wyświetla na każdej stronie projektu od 15 do 40 obrazów w galerii. Redaktor zarządza jedną File Collection per projekt. sf_filecollection_gallery renderuje galerię jako grid z lightbox. Przy kliknięciu na obraz otwiera się widok pełnoekranowy z nawigacją do następnego i poprzedniego obrazu.

Dokumentacja eventów i fotografia prasowa. Organizator targów dokumentuje każdy event 50 do 200 zdjęciami. Obrazy są przesyłane masowo do File Collection. sf_filecollection_gallery automatycznie generuje miniatury, optymalizuje czas ładowania przez lazy loading i wyświetla galerię w layoutzie Masonry.

Katalogi produktowe z prezentacją wizualną. Producent mebli wyświetla per kategoria produktu galerię ze zdjęciami aranżacyjnymi. Przez wiele File Collections i plugin frontendowy z filtrem kategorii odwiedzający mogą przełączać się między galeriami bez przeładowania strony.

Architektura techniczna

sf_filecollection_gallery to rozszerzenie Extbase wbudowywane jako plugin TYPO3 w elementy treści. Źródłem danych są TYPO3 File Collections z File Abstraction Layer (FAL). Rozszerzenie dostarcza szablony dla layoutu Grid, layoutu Masonry i prostych list. Wszystkie szablony są nadpisywalne przez standardowe mechanizmy TYPO3.

Integracja lightbox wspiera kilka bibliotek: Fancybox, PhotoSwipe i Lightcase. Gosign zaleca PhotoSwipe ze względu na lepsze wsparcie dotykowe i brak zależności od jQuery. Lazy Loading jest natywnie zintegrowane przez atrybut loading="lazy".

Częste problemy i rozwiązania

Galeria nie wyświetla obrazów, choć File Collection jest wypełniona. Przyczyną jest często błędna konfiguracja Storage. File Collection odwołuje się do Storage, do którego frontend nie ma dostępu. Rozwiązanie: sprawdzenie w backendzie TYPO3, czy obrazy leżą we właściwym Storage i czy Storage jest skonfigurowany jako “public”.

Lightbox nie działa, obrazy otwierają się jako nowa strona. Biblioteka JavaScript lightbox nie jest ładowana. Rozwiązanie: sprawdzenie w narzędziach deweloperskich przeglądarki, czy plik JS lightbox jest ładowany i czy w konsoli pojawiają się błędy JavaScript.

Czas ładowania za długi przy dużych galeriach. Galeria z ponad 100 obrazami w wysokiej rozdzielczości może ładować się wolno mimo lazy loading, bo miniatury nie są wystarczająco skompresowane. Rozwiązanie: konfiguracja TYPO3 Image Processing do generowania miniatur w stałym rozmiarze i aktywacja formatu WebP.

Migracja i kompatybilność wersji

sf_filecollection_gallery jest aktywnie utrzymywane i dostępne dla TYPO3 v11 i v12 LTS. Rozszerzenie ma stabilne API i prawie żadnych zmian łamiących między wersjami.

Kto migruje ze starszego rozszerzenia galerii, musi jedynie zmienić źródło danych: zorganizować obrazy w File Collections i umieścić plugin sf_filecollection_gallery na stronach. Same obrazy pozostają w FAL i nie muszą być przenoszone.

Przy aktualizacji TYPO3 z v10 na v12 powinna być sprawdzona konfiguracja lightbox. Fancybox 2 nie jest już kompatybilne z aktualnymi wersjami jQuery. Gosign zaleca przejście na PhotoSwipe, które działa bez jQuery i dostarcza lepszą wydajność na urządzeniach mobilnych. Migracja z Fancybox na PhotoSwipe wymaga typowo 4 do 8 godzin.