Frontend behaviors

Pages built on the platform get their moving parts — image lightboxes, carousels, timelines, parallax banners — from one shared behavior core. You never write a line of JavaScript: the server marks an element with what it should do, and the core finds it and brings it to life. The same behaviors work identically on the public web, in the back office and in documentation pages.

Live examples are collected on the showcase site:

Where you meet them

Listing styles (Back office → Structure → Listings → a display's Style dialog):

Gallery — a tile grid; the Lightbox checkbox makes every image clickable into a full-screen, touch-friendly viewer with swipe and zoom.
Carousel — a sliding track with arrows, dots and optional autoplay. Loop makes it endless; Effect switches between sliding and cross-fading (a fade with autoplay is a classic slideshow).
Timeline — entries on a vertical line with date markers.
Banner — the Parallax checkbox makes the cover image glide at a different rate than the page while scrolling. Visitors who prefer reduced motion see a still image — that is by design, not a defect.
Bricks (masonry) — tiles now pack in reading order: the second tile sits beside the first, not under it, and gaps close upward as images finish loading. No switch — this is what the style means.
Grid, Gallery and Bricks — the Tilt on hover checkbox gives every tile a subtle 3D tilt following the pointer, with a soft glare. Touch devices and reduced-motion visitors get flat, fully working tiles; clicks and the lightbox keep working — behaviors compose.

Image fields (Back office → Structure → Content types → a type → Display): an image field's formatter can be:

image — each picture rendered on its own (the default),
gallery — all of the field's pictures as one lightbox grid,
carousel — all of the field's pictures as one sliding track.

Number fields (same Display screen): an integer or decimal field's formatter can be counter — the number counts up from zero the first time it scrolls into view, once, and lands exactly on the true value. The true value is always in the page itself: with scripts off, on a reader that prefers reduced motion, or if the library never loads, the plain formatted number simply stands there. WHY: a marketing number that exists only after JavaScript runs is invisible to search engines and to anyone the script fails for — so the animation decorates the number, it never replaces it.

The chosen image style and responsive variants keep applying — the behavior only changes how the pictures are arranged and what a click does, never which derivative is served.

Images in rich text open in the same lightbox automatically on record pages; an image that is itself a link keeps being a link.

What happens under the hood

The server renders plain markup and declares behavior with data-* attributes — data-lightbox, data-carousel, data-tabs, data-parallax, data-masonry, data-countup, data-tilt. The behavior core (fabrika-styles.js) scans the page, and for each declaration mounts the matching behavior. Options travel as JSON inside the attribute, so everything a behavior can do is settable from the admin forms — no page-specific scripts anywhere.

Four properties hold across every behavior:

Self-contained: the libraries behind richer behaviors (Splide for carousels, GLightbox for lightboxes, simpleParallax, Macy for masonry, CountUp, vanilla-tilt — all MIT-licensed) are served from the platform itself and load lazily, only on pages that declare the behavior. No CDN, no external requests, ever.
Graceful fallback: if a library fails to load, the element keeps a working plain form — the carousel remains a scrollable strip, a clicked image still opens in a simple overlay, the masonry wall falls back to column flow, the counter stays a plain number, the parallax banner keeps a simple scroll drift.
Motion respects the visitor: a reader whose device asks for reduced motion gets no parallax, no tilt and no counting — the content itself is never withheld. Tilt additionally requires a real hover pointer, so touch screens stay flat on purpose.
Channel-independent: the same declaration works on the public web, the documentation tree and the back office.

For back-office image editing (cropping a picture in the file manager), see Files.