DOCS

Macy.js is a lightweight, dependency-free, 4kb masonry layout library, designed for a hassle-free configuration. macyjs.com

Custom template for pagelist block. Learn more about custom templates on C5 docs.

How to:

  • Step1: Install package
  • Step2: Add pagelist block (or choise excist one).
  • Step3: Change custom template to macy.js template.
  • Thats it :) 

STYLE:

The style of each pagelist item is on your control. In general you dont have any limits.

How to edit deafult values:

First read  Macy.js docs (3 minutes). You must learn the API by your own (This is not C5 issue). 

Now, Its very simple.This block look the same as the core block. You only have to change the instiliaze function inside view.php and thats it.

* File location after instalation: 
yoursite/packages/macy_masonry_pagelist/blocks/page_list/templates/masonry_macy/view.php

<script>
document.addEventListener('DOMContentLoaded', function () {   
Macy.init({
  //options        
container: '#macy-container',        
trueOrder: true,         
waitForImages: false,         
margin: 14,         
columns: 4,         
breakAt: {             
1200: 4,             
940: 3,             
520: 2,             
400: 1         
}
});
});
</script>