Masonry - XWiki

The Masonry macro integrates the [[JavaScript Masonry library>>https://masonry.desandro.com/]] into XWiki for easing the creationg of responsive images walls. It also uses the jQuery plugin [[waitForImages>>https://github.com/alexanderdickson/waitForImages]]. The code used is inspired from [[a codepen by Christopher Crostello>>https://codepen.io/christophercostello/pen/LyOPab]]. Other options could be considered to create such walls such as:

2

3

* https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

4

* https://tobiasahlin.com/blog/masonry-with-css/

5

* https://codepen.io/chasebank/pen/KbrWdv

== Usage

#set ($parameters = $doc.getObjects('XWiki.WikiMacroParameterClass'))

11

#set ($tableHeaders = '|=Parameter name|=Description|=Mandatory|=Default')

12

#set ($tableBody = '')

13

#foreach ($parameter in $parameters)

14

#set ($isMandatory = ${parameter.getProperty('mandatory').value})

15

#if ($isMandatory == 1) #set ($isMandatory = "Yes") #else #set ($isMandatory = "No") #end

16

#set ($tableBody = "$tableBody|${parameter.getProperty('name').value}|(((${parameter.getProperty('description').value})))|$isMandatory|$parameter.getProperty('defaultValue').value")

17

#end

18

## This option is handy for generating the code to be pasted to the online extension.xwiki.org page for documenting the parameters statically.

#if ($request.debug)

$tableHeaders

$tableBody

#end

$tableHeaders

$tableBody

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.

[[image:gallica-btv1b10052637j_5.jpg>>Sandbox.WebHome]]

37

[[image:gallica-btv1b10052637j_4.jpg>>Main.WebHome]]

38

[[image:gallica-btv1b10052637j_9.jpg>>XWiki.WebHome]]

[[image:wiki.gargantua-francois-rabelais@gallica_bpt6k1040342n_23.jpg]]

43

[[image:wiki.heimatlosigkeit-et-chamanisme-pascal-quignard@nmoyart-2019-emstrang-2-02_3966-1.jpg]]

44

[[image:wiki.bestiaire-d-amour-jean-rostand@s-l1600.jpg]]

45

[[image:wiki.la-pataphysique-alfred-jarry@faustroll.jpg]]

46

[[image:wiki.testament-de-heiligenstadt-beethoven@Beethoven_Heiligenstaedter_Testament-1.jpg]]

47

[[image:wiki.lost-ego-francois-de-smet@1538617206_9782130788966_v100.jpg]]

== Example

(% style="background-color: #f6f6f6; padding: 1em; margin-bottom: 1em; text-align: center;" %)(((

54

The images displayed below come from [[Bibliothèque nationale de France - Gallica>>https://gallica.bnf.fr/ark:/12148/btv1b10052637j/f1.item.r=fleurs]].

)))

[[image:gallica-btv1b10052637j_5.jpg>>Sandbox.WebHome]]

61

[[image:gallica-btv1b10052637j_4.jpg>>Main.WebHome]]

62

[[image:gallica-btv1b10052637j_9.jpg>>XWiki.WebHome]]