Presentation modules
o_figure_shifty
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" />
o_figure_pan
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)
o_carousel
Use Carousel by specifying its shortcode:
<txp::o_carousel id='<txp:variable name="images" />' class="a_ratio--gm" />
o_together
View the site using multiple viewports for quick responsive testing.
<txp::o_together />
or
<txp::o_together url="/" />