README

TYPO3 v12–v14 content element that displays PDFs from FAL as a responsive grid and opens each one as a page-turning flipbook in an accessible modal viewer.

PDF rendering with PDF.js, page-turn effect with StPageFlip, both bundled locally
No Extbase, no jQuery, no CDN
Viewer code and libraries are loaded only when a visitor opens a flipbook
Covers: custom image per PDF, server-side PDF thumbnail, or placeholder

Installation

composer require anubit/pageflipper
vendor/bin/typo3 extension:setup

Include the TypoScript:

TYPO3 v13/v14: add the site set PageFlipper (anubit/pageflipper) to your site (Site Management > Sites). It depends on typo3/fluid-styled-content.
TYPO3 v12: include the static TypoScript PageFlipper in your site template.

Use either the site set or the static include, not both. The content element is available in the new content element wizard under "Typical page content".

Configuration

Content element

Option	Default
PDF files (sortable; title/description from file metadata, overridable per file)	–
Cover image per PDF (optional)	–
View: book covers / square tiles / cards	book covers
Columns: 1–4 (fewer automatically when the element is narrow: phones, sidebars, narrow layout columns)	3
Maximum width: full width / large / medium / small	full width
Show file titles	on
Page mode: single / double	double
Show navigation	on
Enable fullscreen	on
Enable zoom	on
Allow PDF download	on

Site settings / TypoScript constants

With the site set, these values are editable as site settings (Site Management > Settings, category "PageFlipper"). With the static include, set them as TypoScript constants:

plugin.tx_pageflipper {
    view {
        templateRootPath =
        partialRootPath =
        layoutRootPath =
    }
    settings {
        # Include the default CSS (set 0 to style it yourself)
        includeCss = 1
        cssFile = EXT:pageflipper/Resources/Public/Css/pageflipper.css
        # Cover image width in px
        coverWidth = 480
        # Generate cover thumbnails from the first PDF page
        # (needs GraphicsMagick/ImageMagick with Ghostscript and "pdf" in GFX.imagefile_ext)
        pdfThumbnails = 1
    }
}

Width and columns

The grid adapts to the width of the element itself (CSS container queries), not to the viewport, so it also works in sidebars and narrow layout columns: 2 columns from 480px, 3 from 720px, 4 from 960px element width (each only if configured).

"Full width" uses whatever width the page layout gives the content element. The other presets cap the grid; change their values in your site CSS if needed:

.pageflipper {
  --pageflipper-width-large: 1200px;
  --pageflipper-width-medium: 900px;
  --pageflipper-width-small: 600px;
  --pageflipper-spacing-after: 3rem; /* space below the element */
  --pageflipper-page-background: #fff; /* behind generated PDF covers (transparent PDF areas) */
}

Templates and styling

Override Templates/PageFlipper.html or the partials in Partials/PageFlipper/ via the view paths above. The default CSS only uses .pageflipper* classes and exposes custom properties such as --pageflipper-gap, --pageflipper-spacing-after (space below the element, default 3rem), --pageflipper-title-size and --pageflipper-viewer-background.

Third-party libraries

Bundled in Resources/Public/JavaScript/Contrib/. Each ships with its license file.

Library	Version	Author	License	Used for
PDF.js (`pdfjs-dist`, legacy build)	6.3.289	Mozilla	Apache-2.0	Rendering the PDF pages
StPageFlip (`page-flip`)	2.0.7	Nodlik	MIT	Page-turn effect

PDF.js also brings its standard fonts (Foxit, Liberation) and WebAssembly image/colour decoders (OpenJPEG, JBIG2, QCMS) under their own licenses; see Contrib/pdfjs/standard_fonts/ and Contrib/pdfjs/wasm/.

Development

Architecture, workarounds, library updates and upgrade notes: Documentation/Developer.md.

anubit / pageflipper

Package info

Security

Statistics