Masonry
Редактировал(а) HRlink 17.07.2024
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:
- https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
- https://tobiasahlin.com/blog/masonry-with-css/
- https://codepen.io/chasebank/pen/KbrWdv
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}}
{{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.
