thumbspage Dynamic Layout Alternative

Update: as of 2.3, the live training-gallery client that this demo is based on now builds both fixed and dynamic alternatives for its index page. This reflects a 2.3 improvement in dynamic layout's horizontal spacing, which yields multiple columns in some mobile use cases, and renders this page partly moot; see the preceding links for the live client's 2.3 results.

This page's subfolders demo the dynamic index-page layout added in 2.1, with both narrow and wide filename labels. Horizontal and vertical cell padding can also be tailored with configs, but their presets are used for these demos. This layout is an experimental alternative to the fixed-column layout of prior releases. It arranges columns dynamically to match page size and rearranges them on resizes, but may be subpar on mobile devices which show a single long column.

To evaluate the new layout for yourself, click the subfolder links below on your target displays, and compare their pages to the fixed-layout equivalent online. You can also change thumbs padding and regenerate with your own images to gauge the effect (see this for automation pointers). The prior fixed-layout model is still available and the default in 2.1, but you may prefer the dynamic model for some use cases.

Please note: to save space, all but the first of the subfolder galleries' full-size images have been removed; the gallery index pages function normally and suffice to demo the new layout, but most viewer pages won't show images. You can find the complete version of this gallery at its fixed-layout equivalent, and can read more about this page itself in its build script, manual how-to, renamer script, and custom header (use your browser's view source).

For more info on this and other 2.1's changes, see 2.1's upgrades gallery, its release note, and its latest configs file. For more coverage of thumbspage, see the 2.0 gallery, the full examples folder, and the current set of live demos.

Subfolders here:

Page built by