Masonry layout for Post loop builder | Voters

Masonry layout for Post loop builder

Alex

Will be great to add masonry layout view for Post loop builder

August 25, 2022

Randall Holbrook

and woocommerce product list/shop page!

Abu Sayed

For now you can achieve this using the code from mike

https://breakdance4fun.supadezign.com/masonry-layout-for-the-post-loop-builder/

Ileana Mayer-Dobnig

Need this!

Daniels Rogulis

Yess, please. This is essential for websites with custom posts :))

Ben Hartlenn

Please add this feature soon guys, thanks!

Hanael

Same!!!

I've found a work-around in the meantime:

Create the loop and show layout as grid
Add a code block in the page and paste the following lines in the JS section:

jQuery(function($) {
// init Masonry
var $grid = $('.ee-posts-grid').masonry({
// options
itemSelector: '.ee-post',
columnWidth: 0
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
});

In the CSS section of the code block, paste the following line and change the width to adapt your masonry columns layout:

.ee-post {width: 25%}

In the function.php add the following line:

add_action('wp_enqueue_scripts', 'add_thickbox');

Don't ask me why this code (originaly related to lightboxes) works. I found this by pure mistake.

Sorry for this quick and dirty tutorial. I hope it helps.

Joe

I’d love this to be implemented.