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 pełnoprawną galerię obrazów z funkcjami pinch-to-zoom, nawigacji gestem swipe, deep-linkingu 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 URL, który można udostępnić lub podlinkować. Ma to znaczenie dla SEO, ponieważ Google indeksuje zdjęcia za pośrednictwem tych adresó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 integruje PhotoSwipe jako element treści TYPO3

Rozszerzenie rejestruje własny element treści w backendzie TYPO3. Redaktorzy wybierają obrazy z mediateki FAL, definiują kolejność i ustawiają opcjonalne podpisy. Renderowanie odbywa się przez szablony Fluid, które inicjalizują bibliotekę JavaScript PhotoSwipe i przekazują adresy URL obrazów jako tablicę JSON.

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 ładuje oba przez TypoScript-AssetCollector, dzięki czemu są one dołączane wyłącznie na stronach faktycznie zawierających galerię. Pozwala to uniknąć zbędnych żądań na stronach bez galerii.

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, kompatybilność z v13 wymaga 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 konieczna jest aktualizacja szablonów Fluid i konfiguracji TypoScript, ponieważ v13 nieznacznie zmieniło przepływ pracy AssetCollector. 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.