Flipbook dla TYPO3

Flipbooki wyglądały imponująco w 2012, dziś kosztują wydajność i dostępność

Efekt przewracania stron był jedną z najpopularniejszych form prezentacji katalogów, raportów rocznych i magazynów na stronach firmowych. PDF jest rozkładany na pojedyncze strony, wyświetlany w przeglądarce jako książka i przewracany kliknięciem myszy lub gestem przesunięcia. Technika pochodzi z ery Flash. Od zakończenia Flash (2020) rozwiązania flipbook opierają się na JavaScript i Canvas. Idea podstawowa się nie zmieniła: chodzi o wizualną symulację fizycznego dokumentu.

Problem: flipbooki to zabójcy wydajności. 40-stronicowy PDF jest konwertowany na 40 pojedynczych obrazów (po 200 do 500 KB każdy), plus biblioteka JavaScript (100 do 300 KB zminimalizowana). Wynik: od 10 do 20 MB payload dla jednego elementu treści. Na urządzeniach mobilnych flipbooki są praktycznie nieużywalne, czytniki ekranowe nie mogą odczytać treści, a Google nie indeksuje tekstu, bo jest ukryty w obrazach.

Typowe scenariusze zastosowań

Raporty korporacyjne i sprawozdania roczne. Zarządy chcą pokazać raport biznesowy “jak wydrukowany” na stronie. Agencja drukarska dostarcza PDF, zespół marketingowy chce go umieścić 1:1 online. Flipbook wydaje się najprostszym rozwiązaniem. Gosign zaleca tu alternatywę: przygotowanie raportu jako strony HTML (przeszukiwalnej, dostępnej, responsywnej) i umieszczenie PDF jako linku do pobrania obok.

Katalogi produktowe z wieloma stronami. Firmy przemysłowe z 200-stronicowymi katalogami używają flipbooków jako “katalogu do przeglądania” na stronie. Rzeczywistość: użytkownicy przewracają maksymalnie 5 do 10 stron, zanim rezygnują. Przeszukiwalny katalog HTML z filtrem i stronami szczegółowymi produktów konwertuje lepiej.

Ekspoze nieruchomości i broszury. Biura pośrednictwa pokazują ekspoze jako flipbook, by zainteresowani mieli wrażenie drukowanego dokumentu. Tu często wystarczy wbudowany PDF-Viewer (pdf.js) bez efektu przewracania, który działa na wszystkich urządzeniach i pozostawia tekst przeszukiwalnym.

Architektura techniczna

Rozszerzenie Flipbook dla TYPO3 (jak również rflipbook, popularna alternatywa) działa w trzech krokach. Najpierw PDF jest konwertowany po stronie serwera na pojedyncze obrazy (przez ImageMagick, Ghostscript lub zewnętrzną usługę). Potem obrazy są renderowane w bibliotece JavaScript opartej na Canvas (turn.js, StPageFlip lub rozwiązanie komercyjne). Efekt przewracania jest tworzony przez CSS3-Transform i animacje JavaScript.

Integracja z TYPO3 odbywa się jako element treści: redaktor przesyła PDF, wybiera opcje (zakres stron, rozmiar miniatury, prędkość efektu), frontend renderuje flipbook. Skonwertowane obrazy są zapisywane w fileadmin lub katalogu cache.

Zależności: ImageMagick lub Ghostscript muszą być zainstalowane na serwerze (do konwersji PDF). Biblioteka JavaScript jest dołączana jako zasób. Przy turn.js (najznaczniejszej bibliotece) trzeba załadować jQuery, co na nowoczesnych stronach stanowi dodatkowy problem wydajnościowy.

Częste problemy i rozwiązania

Obrazy nie są generowane. Konwersja PDF nie udaje się, gdy Ghostscript nie jest zainstalowany, działa w złej wersji lub brakuje uprawnień do katalogu wyjściowego. Rozwiązanie: sprawdzenie gs --version na serwerze (minimum 9.50), nadanie uprawnień do zapisu dla użytkownika serwera, przy shared hosting kontakt z dostawcą.

Czas ładowania powyżej 5 sekund. 80-stronicowy PDF generuje dziesiątki obrazów w wysokiej rozdzielczości. Rozwiązanie: zmniejszenie jakości obrazu (72 dpi zamiast 150 dpi dla prezentacji webowej), implementacja lazy loading dla stron poza widocznym obszarem, użycie WebP zamiast PNG/JPEG. Albo fundamentalne pytanie: czy flipbook naprawdę jest potrzebny?

Urządzenia mobilne wyświetlają błędy. Efekt przewracania działa na urządzeniach dotykowych tylko ograniczenie. Efekt 3D page-turn na małych ekranach jest ledwie widoczny, a gest przesunięcia koliduje ze scrollowaniem przeglądarki. Rozwiązanie: na urządzeniach mobilnych automatyczne przejście na prosty slider lub natywny PDF-Viewer.

Migracja i kompatybilność wersji

Rozszerzenie Flipbook ma ograniczone wsparcie dla aktualnych wersji TYPO3. Ostatnia stabilna wersja wspiera TYPO3 v10 i v11. Dla v12 i v13 nie ma oficjalnego wydania (stan kwiecień 2026). rflipbook, alternatywne rozszerzenie, jest w podobnej sytuacji.

Gosign zaleca przy aktualizacji TYPO3 zastąpienie flipbooka jedną z następujących alternatyw: PDF-Viewer na bazie pdf.js (open source, bez konwersji, tekst pozostaje przeszukiwalny), przygotowanie treści jako HTML (maksymalny efekt SEO, pełna dostępność) lub slider lightbox z wybranymi stronami jako obrazami (kompromis wizualny, dobra wydajność). Migracja jest z reguły zakończona w 1 do 2 dni.

Kolejnym aspektem jest dostępność. Flipbooki są dla użytkowników czytników ekranowych całkowicie niedostępne, ponieważ tekst jest ukryty w obrazach. Europejski Akt o Dostępności, który obowiązuje od czerwca 2025, dotyczy również publikacji cyfrowych na stronach firmowych. Przejście na prezentacje oparte na HTML lub pdf.js (który renderuje oryginalny tekst) to zatem nie tylko kwestia wydajności, ale również wymóg prawny.