ACF Pro Gallery + Looper + Masonry Grid

[paulbcurious]

I am currently using ACF pro with loopers to display a gallery from a custom post type. It looks great, but my client has some cases where a masonry grid is required. I have been unable to find a simple solution to set a masonry layout for anything outside of the Blog or Portfolio post types.

Here is one of the pages where we want to use a masonry grid for gallery content.

Bella Grace

You can see that some posters are shorter than others, and having a masonry grid would be ideal.

If you could help point me and my developer in a direction to make this work, I would greatly appreciate it. Ideally there would be something we can tweak within Pro, but in my research here it I have not found that to be possible.

Thank you in advance!

[prakash_s]

Hello Paul,

Thanks for writing to us.

It seems that you are using Row & Column in the Looper, regretfully there isn’t an option that you can arrange the Row-Columns into a Masonry Layout. You will have to use the Grid element instead if you want to have a Masonry layout. Perhaps this advanced video tutorial can help you:

CSS Grid: Masonry Layout (Advanced)

Hope it helps
Thanks

[paulbcurious]

Thank you for the direction. This has helped me get halfway home. Is there a way for me to now dynamically shrink the height of a cell based on content? You can see here in my image that I have one piece of artwork that is smaller than the others, so using the static span height gives me undesirable results. I would want that 4th cell to shift up vertically by one row.

Any assistance is greatly appreciated.

[ruenel]

Hello Paul,

The Masonry Grid is different from the Masonry JS that automatically adjust the height of the grid items. Masonry Grid relies on the grid layout row placement. It cannot move up or down automatically. The position of the grid item is based on the cell position. By the way, can you please share to us the URL of the page where we can find the Grid so that we can inspect your settings.

Thank you in advance.

[paulbcurious]

Thank you for your help Ruenel,

Here is a staging URL where you can view the layout that I am trying to set up with a masonry layout. You can see all the vertical gaps I have that ideally I would close.

https://posterposse.flywheelstaging.com/artist/attila-j-szarka/

[christian]

Hey Paul,

Me and other support staff are not sure what Ruenel will do so I’m going to forward your case to him. Please kindly wait for his reply.

Basically, like what he has said, the Grid Cells cannot resize automatically. You need to manually resize the cells. However, that is tricky, if not impossible, to achieve when you’re using a Looper as you can’t control the output.

The best course of action, in my opinion, is to resize the images to the same dimensions using image tools like Photoshop.

[ruenel]

Hello Paul,

We have checked your page. Just like what I have guessed, you we using Image elements inside each cells. In the example video, @Kory is using the background images for each cells. The only ways you can have uniform Masonry Grid Layout is to either use the images as a background for each cells or if it is not possible then you will have to make sure that all your image posters are of the same dimensions just like what @Christian said in his reply.

By the way, the cells seem not positioned to the correct Y alignments. The 2 grid column seems a little bit off. Adding a subtle background color for each cells would also help for you grid layout.

Best Regards.

[paulbcurious]

@ruenel @christian thank you for your assistance. I’ll continue to try and work with background images and seeing how I might adjust. For us resizing the images to fit the space won’t be an ideal solution given some of the content we are posting.

[marc_a]

Hey Paul,

Great and let us know how it goes.

Thank you.