Stacks4Stacks

In the past, the Masonry stack has been successfully used for the following tasks:

• A grid of thumbnail images with links that reveal larger photographs when clicked.
• Simple web stores combining images, written content and 'buy now' buttons created with PayPal or Mal's E-commerce or Stripe.
• A video gallery, by combining Masonry with popular video stacks like MultiPlayer, Player, VideoPlayer, VimStack and uTube.
• Tables of forthcoming calendar events, including maps and downloadable .ics files generated with AddEvent.
• Creation of a TOC (table of contents) providing section headings, summary text and links.
• Presentation of client testimonials and reviews from past customers.

Individual bricks can be set as links to other webpages or configured to launch lightbox stacks. Another bonus feature is the ability to make bricks time-sensitive and have them hidden or shown when a certain time has passed - particularly useful for building a calendar of events.

Novice RapidWeaver users should face no intimidation or difficulty constructing layouts with Masonry. We provide only the most essential settings to get the job done! A drag-and-drop user interface makes setup easy. Likewise expert RapidWeaver users will be thankful for the provision of many class selector names in the source code for Masonry; thereby permitting further extension of the stack styling with custom CSS code.

An alternative to Masonry is our ProGallery stack that merges both a masonry grid layout with an image or video gallery. ProGallery also allows you to customise the breakpoints used for mobile, tablet, laptop and desktop, if you require more control over these.

Examples

Here are two examples of the Masonry stack. Starting with the first example, here we are using the default settings (CSS column layout). This creates a simple and flexible masonry layout using pure HTML and CSS.

In this second example, we used the same collection of photographs as above, but this time presented as a Javascript layout. You can hopefully see how the Masonry Bricks are arranged slightly differently in this layout and it becomes feasible to set some Masonry Bricks wider than others.

The photographs featured in these two examples are © copyright of Adam Merrifield and Will Woodgate.

Setup

Follow these instructions for using Masonry in RapidWeaver...

1. Once installed into Stacks and RapidWeaver, open your Stacks Library on a stacks page.
2. Search for 'Masonry'. Drag and drop a copy of the stack into your webpage.
3. Press the blue button to add Masonry Bricks to your Masonry.
4. Within each Masonry Brick, add stacks of your choice (e.g. images, text, headings, video or HTML).
5. If you want to apply links to a Masonry Brick or make the Masonry Brick time sensitive, select it in edit mode and use the settings in the side panel.
6. To change the layout type used of styling (like spacing, borders or box shadow effects) select the main Masonry stack to change its settings.
7. Preview the webpage to see the Masonry layout generated. Export or publish your webpage when done.

As mentioned above, Masonry supports many different content and stack types. This layout grid is not restricted to only being able to do images! Our example above uses warehoused images by means of simple HTML image tags inside HTML stacks:

<img src="https://example.com/images/tree.jpg" alt="A description about the image goes here.">

You can follow the same technique for warehoused images or use existing Image stacks if you prefer using dragged-and-dropped images instead.

Differences between the CSS Columns and Javascript grid layouts

You may have noticed in the Masonry settings that two grid layouts are offered to you. Essentially Masonry gives you two stacks in one! Here are the most noteworthy differences between the two.
 

* If using the Javascript grid layout, selecting an individual Masonry Brick allows you to change its width between normal, double or triple. Double width means the Masonry Brick spans two columns and triple means the Masonry Brick spans three columns. This setup works best where you have lots of normal sized Masonry Bricks to fill the gaps.

Both grid layouts are about the same complexity to setup, so it is well worth experimenting with both to see which one works best for you. CSS columns are simpler and more reliable; however the trade-off with this layout is that the Masonry Bricks may not render in the desired direction and all Masonry Bricks will be the same width.

Applying links to Masonry Bricks

It is common to set Masonry Bricks as links to resources or other webpages. You can apply links to content or buttons you place within each Masonry Brick. Alternatively you can select the Masonry Brick in edit mode and provide a link in its settings. Using this latter method, the link will be stretched over the whole Masonry Brick; so in effect the entire Masonry Brick becomes clickable. In edit mode, the link URL is displayed above the content. Custom attributes can be applied to the links if you prefer, like class or data attributes.

Lightbox support

Lightboxing is now provided on a BYO (bring your own) basis. Older versions of Masonry used to use the Nivo Lightbox. Some people found this too limiting or too unreliable. Lots of really good lightbox stacks already exist for RapidWeaver. So we decided to forego adding any dedicated lightbox support in the latest version of Masonry. You can now use the Masonry stack with almost any free or paid lightbox stack. This brings the benefit of greatly reducing the amount of code in your webpages and ensures the lightbox you configure for Masonry is consistent in function and appearance to lightboxes you are using elsewhere in your website.

Essentially there are two methods for lightboxing your content:

1. Drag and drop a suitable lightbox stack into each Masonry Brick. A free lightbox stack like LiteBox would be perfect for this task.
2. Add the lightbox stack somewhere else in the page. Where you see the setting to change the selector name of the 'trigger' enter .masonry_brick a in the box. Then your lightbox will open any link you have applied to the Masonry Bricks.

Some lightbox effects (like TopBox) have support for an extensive choice of different content types. When you are assigning links to your Masonry Bricks, it may be necessary to add additional custom attributes. Masonry supports custom attributes added to links, without any problem.