Breakdance4fun Logo

Masonry layout for the Post Loop Builder

The Post Loop Builder and the Post List elements don't have an option to turn the layout into a MASONRY one. We can only choose between a List, a Grid or a Slider layout.

Here is a simple method with a single Code Block element. Like the following example, the layout will have 3 columns by default, then 2 in tablet mode, and finally one column in mobile mode. (resize the window to see the layout changing in realtime).

Poster #1

Supamike Photo Of Minimalist Old Mecha 80s Extreme Close Up Gra 25600129 F087 4b2d 90ef 3346e409ac17

Poster #2

Supamike Photo Of Minimalist 3d Huge Destroyed Mecha 1.5 In A F Ce1b4f77 6a4f 4e46 856b 03608e6b437c

Poster #3

Supamike Photo Of Minimalist Old Mecha 80s Extreme Close Up Gra E49656b9 95bf 47a9 8a31 41a85fce0503

Poster #4

Supamike Photo Of Minimalist 3d Huge Mecha 1.5 In A Factory Ext E6b0f77c 535b 4db1 8896 3315b57bdf48

Poster #5

Supamike Photo Of Minimalist 3d Mecha Extreme Close Up Graffiti 1a090d34 2f72 458a Ad74 Bd1ec459376a

Poster #6

Supamike Photo Of Minimalist 3d Mecha Extreme Close Up Graffiti 4304b615 Ae1d 4a6e 8bf4 5a1a57afe4e7

Poster #7

Supamike Photo Of Minimalist Old Mecha 80s Extreme Close Up Gra C51a663f 5b70 43c9 B62f 844bc73ee844

Poster #8

Supamike Photo Of Minimalist 3d Mecha Extreme Close Up Graffiti 065c8651 80ab 4170 Ae62 7682f3ed068d

Step 1

Add the Post Loop Builder element and set its ID to "masonry-posts"

Step 2

Change the Layout to Grid and set the grid exactly like you want. With the Items Per Row, Space Between Items, you can set different values for each breakpoint, just like you would do it with a usual Grid layout.

Post Loop Builder Grid

Step 3

Go to the Advanced Panel and add this Custom CSS :

%%SELECTOR%% .gutter-sizer {
width:var(--bde-posts-gap);
height:0
}
%%SELECTOR%% .ee-post {
--masonry-width:calc(100% / var(--bde-posts-per-row));
--masonry-width-diff:calc(var(--bde-posts-gap) - (var(--bde-posts-gap) / var(--bde-posts-per-row)));
width:calc(var(--masonry-width) - var(--masonry-width-diff));
margin-bottom: var(--bde-posts-gap);
}
Post Loop Masonry Css

That's it for the Post Loop Builder element.

Step 4

Add a Code Block element and add this code in the PHP textarea :

<?php wp_enqueue_script('masonry'); ?>

Step 6

Still in the same Code Block, in the Javascript textarea, add :

const posts = document.querySelector('#masonry-posts .ee-posts');
const guttersizer = document.createElement("div");
guttersizer.className = "gutter-sizer";
posts.appendChild(guttersizer);

const grid = document.querySelector('#masonry-posts');
const masonry = new Masonry(grid, {
itemSelector: '.ee-post',
percentPosition:true,
horizontalOrder:true,
gutter: '.gutter-sizer',
});
Post Loop Codeblock

That's it, it won't work on the backend but it will work just fine in the frontend.