PhotoSwipe dla TYPO3

Galerie obrazów na urządzeniach mobilnych działają tylko ze zoptymalizowanymi pod kątem dotyku Lightboxami

Większość witryn TYPO3 wykorzystuje Lightboxy zaprojektowane dla przeglądarek desktopowych: Fancybox, Colorbox, Magnific Popup. Na smartfonach i tabletach takie rozwiązania sprawiają wrażenie obcych, ponieważ zoom i nawigacja nie reagują na gesty dotykowe, lecz na kliknięcia myszy. PhotoSwipe to biblioteka JavaScript zbudowana od podstaw z myślą o dotyku. Rozszerzenie TYPO3 integruje PhotoSwipe jako galerię obrazów z funkcjami pinch-to-zoom, nawigacji gestem swipe i responsywnego układu. Przy rozmiarze poniżej 30 KB (minified + gzip) PhotoSwipe jest zarazem jednym z najlżejszych rozwiązań Lightbox na rynku.

Dla witryn z dużym udziałem ruchu mobilnego, czyli praktycznie wszystkich dzisiejszych serwisów, nie jest to opcjonalne usprawnienie, lecz funkcjonalny wymóg. Odwiedzający oczekują tych samych gestów, które znają z natywnej aplikacji Zdjęcia w swoim smartfonie.

Typowe scenariusze zastosowania obejmują galerie portfolio, zdjęcia produktów i archiwa medialne

Najczęstszym scenariuszem są galerie portfolio na stronach agencji, biur architektonicznych i fotografów. Fotograf prezentuje od 20 do 40 zdjęć na projekt. Odwiedzający klikają miniaturę, widzą obraz w pełnej rozdzielczości, powiększają go gestem pinch i przesuwają się do kolejnego. Deep-linking oznacza, że każdy obraz ma własny adres, który można udostępnić lub podlinkować; od PhotoSwipe v5 trzeba go jednak zbudować samodzielnie, bo wbudowany moduł hash zniknął. Dla SEO te adresy się nie liczą, ponieważ fragmentów po znaku # Google nie traktuje jako osobnych URL; w wyszukiwarce grafiki liczą się elementy <img> z sensownym tekstem alternatywnym i opisowe nazwy plików.

Drugim scenariuszem są strony szczegółów produktów w instalacjach TYPO3 zbliżonych do e-commerce. Producent mebli pokazuje pięć perspektyw na produkt. PhotoSwipe renderuje je jako galerię z zoomem o wysokiej rozdzielczości, aktywowanym kółkiem myszy na desktopie i podwójnym kliknięciem na ekranach dotykowych. Jakość zoomu zależy bezpośrednio od rozdzielczości pliku źródłowego. Zalecamy minimum 2000 pikseli szerokości dla zdjęć produktowych przeznaczonych do oglądania w powiększeniu.

Trzeci scenariusz: archiwa medialne i sekcje prasowe. Uczelnia udostępnia 500 zdjęć z wydarzeń. PhotoSwipe renderuje galerię wydajnie, ponieważ obrazy ładowane są dopiero podczas przeglądania (lazy loading). Widok miniatur prezentuje 50 zdjęć na stronę bez zauważalnego czasu ładowania.

Architektura techniczna łączy PhotoSwipe z natywnym powiększaniem obrazów w TYPO3

Rozszerzenie nie wprowadza własnego elementu treści, lecz włącza PhotoSwipe dla natywnego powiększania obrazów w TYPO3. Redaktorzy jak zwykle dodają obrazy z mediateki FAL w elementach treści z obrazami, włączają powiększanie po kliknięciu i ustawiają opcjonalne podpisy. Podczas renderowania rozszerzenie dołącza do linku szerokość i wysokość każdego obrazu jako atrybuty data; na tej podstawie biblioteka JavaScript PhotoSwipe buduje galerię.

Sam PhotoSwipe nie ma zależności, nie wymaga jQuery ani frameworka. Biblioteka składa się z jednego pliku CSS i jednego pliku JS. Rozszerzenie TYPO3 rejestruje oba przez API PHP AssetCollectora w swoim ext_localconf.php, czyli na każdej stronie, niezależnie od tego, czy zawiera galerię. Kto chce uniknąć zbędnych żądań, dołącza pliki zamiast tego ViewHelperami Fluid f:asset.css i f:asset.script w szablonie galerii; wtedy trafiają tylko na strony z galerią.

Dla obrazów responsywnych rozszerzenie obsługuje atrybut srcset: przeglądarka pobiera odpowiedni rozmiar obrazu w zależności od viewportu. Image-Processing TYPO3 generuje warianty automatycznie. W połączeniu z konwersją WebP (zob. rozszerzenie webp) galerie PhotoSwipe osiągają optymalne czasy ładowania.

Częste problemy dotyczą konfliktów z innymi rozszerzeniami Lightbox i brakujących wymiarów obrazów

Najczęstszym problemem jest konflikt z już zainstalowanym rozszerzeniem Lightbox. Gdy Fancybox i PhotoSwipe są aktywne jednocześnie, oba reagują na kliknięcia obrazów i tworzą podwójne nakładki. Rozwiązanie: dezaktywować stare rozszerzenie Lightbox i usunąć jego wpisy CSS/JS z konfiguracji TypoScript. Komenda grep po słowach “fancybox” lub “colorbox” w plikach TypoScript pokazuje, czy pozostałości starej biblioteki są nadal ładowane.

Drugi problem: brakujące wymiary obrazów. PhotoSwipe potrzebuje rzeczywistych wymiarów w pikselach do prawidłowego działania zoomu. Jeśli rozszerzenie nie może ich odczytać z metadanych FAL, zoom nie działa lub przeskakuje na nieprawidłowy rozmiar. Rozwiązanie: sprawdzić metadane FAL wszystkich obrazów w galerii. TYPO3 odczytuje width i height automatycznie podczas wgrywania, ale obrazy importowane lub dodane przez CLI mają niekiedy puste metadane.

PhotoSwipe v5 działa pod TYPO3 v12 i v13 bez aktualizacji szablonów

Aktualna biblioteka PhotoSwipe ma wersję 5. Rozszerzenie TYPO3 było dostosowywane do różnych wersji TYPO3 i działa stabilnie pod v12. Dla TYPO3 v13 aktualizacja szablonów nie jest potrzebna, ponieważ wersja 2.0.10 rozszerzenia obsługuje w równym stopniu v12.4 i v13. Gosign aktualizuje przy upgrade’ach TYPO3 wszystkie rozszerzenia frontendu wraz z Lightbox i sprawdza, czy gesty dotykowe poprawnie działają na aktualnych wersjach iOS i Android.