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:
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>