0 Votes

Masonry

Last modified by Ryan C on 2025/05/30 00:35

The Masonry macro integrates the JavaScript Masonry library into XWiki for easing the creationg of responsive images walls. It also uses the jQuery plugin waitForImages. The code used is inspired from a codepen by Christopher Crostello. Other options could be considered to create such walls such as:

Usage

Parameter name	Description	Mandatory	Default
padding	Padding between images	No	5px

The macro can be used either without content - in that case the images attached to the current page are used - or with content, and with or without links. The image titles can be set using instances of ResourceMetadaClass attached to each target page.

{{masonry/}}

{{masonry}}
[[image:gallica-btv1b10052637j_5.jpg>>Sandbox.WebHome]]
[[image:gallica-btv1b10052637j_4.jpg>>Main.WebHome]]
[[image:gallica-btv1b10052637j_9.jpg>>XWiki.WebHome]]
{{/masonry}}

{{masonry}}
[[image:wiki.gargantua-francois-rabelais@gallica_bpt6k1040342n_23.jpg]]
[[image:wiki.heimatlosigkeit-et-chamanisme-pascal-quignard@nmoyart-2019-emstrang-2-02_3966-1.jpg]]
[[image:wiki.bestiaire-d-amour-jean-rostand@s-l1600.jpg]]
[[image:wiki.la-pataphysique-alfred-jarry@faustroll.jpg]]
[[image:wiki.testament-de-heiligenstadt-beethoven@Beethoven_Heiligenstaedter_Testament-1.jpg]]
[[image:wiki.lost-ego-francois-de-smet@1538617206_9782130788966_v100.jpg]]
{{/masonry}}

Example

The images displayed below come from Bibliothèque nationale de France - Gallica.