Presentation modules

Use form o_figure_shifty anywhere, or use form override in an article.

The complexity of shifty grids increases with container with (try resizing your window).

<txp::o_figure_shifty class="a_ratio--2x1" />

<txp::o_figure_shifty mode="panels" category="lounge" class="a_ratio--16x9" style="--o-tiles-every: 3s" />

<txp::o_figure_shifty mode="spiral" class="a_ratio--gm" limit="20" />

Use form o_figure_pan anywhere, or use form override in an article.

o_figure_pan — Ken Burns slideshow: the article's images crossfade, each slowly zooming.

Styles and knobs: scss/4-organisms/_o_pan.scss. Script: js/o_pan.js (loaded once).

<txp::o_figure_pan class="a_ratio--2x1" />

<txp::o_figure_pan class="a_ratio--16x9" style="--o-pan-slide: 10s" zoom="in" drift="center top" limit="8" />

class

extra classes: set a ratio, or the images decide the height

style

knobs: --o-pan-slide, --o-pan-fade, --o-pan-zoom

id

image ids (default: the article image field)

limit

how many (default 5), picked at random

zoom

in, out, alternate or random (default)

drift

which points it zooms towards, e.g. "center top-left bottom-right" (default: all)

order

random: shuffle as it goes (they already arrive in random order)

Use Carousel by specifying its shortcode:

View the site using multiple viewports for quick responsive testing.

<txp::o_together />
or
<txp::o_together url="/" />