Masonry Macro

Version 15.1 by Admin on 2021/03/17 20:31

cogCreates a wall of images using the JavaScript Masonry grid layout library, a bit like a mason placing stones in a wall.
TypeXAR
CategoryMacro
Developed by

slauriere

Active Installs11
Rating
1 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

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

Usage

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 ResourceMetadataClass 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-[email protected]]]
[[image:wiki.testament-de-heiligenstadt-beethoven@Beethoven_Heiligenstaedter_Testament-1.jpg]]
[[image:wiki.lost-ego-francois-de-smet@1538617206_9782130788966_v100.jpg]]
{{/masonry}}

Parameters

Parameter nameDescriptionMandatoryDefault
padding

Padding between images

No5px

Other approaches

Other options could be considered to create such walls such as:

Layout on large screen

xwiki-masonry-1.jpg

Layout on small screen

xwiki-masonry-2.jpg

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Dependencies

Dependencies for this extension (org.xwiki.contrib:xwiki-masonry 1.1):

Tags:
    

Get Connected