WordPress Masonry Grid For Any Content

Defiant America

Aspirant
Joined
Aug 3, 2019
Messages
10
I am looking for a way to display a Masonry Grid on a WordPress page, but so that the blocks can contain any sort of content I wish. If I want to put in a shortcode in a block, it displays whatever the shortcode provides. This is my main desire, but if I can put any sort HTML in it, that would be awesome too.

I would need the grid to maintain an order of left to right, with left being the newer than the right. If it has ways to sort different ways, that would be awesome too. This would need to be responsive so that if I have 4 columns it will resize down as the screen width gets smaller at certain points, so it goes from 4 to 3 (or to 2) and then 2 to 1 as the screen gets down to phone sizes.

This can be done in Divi builder code or text modules added in columns, but then the sorting is not preserved once columns start stacking as screen width gets smaller.

Would love to find something that does what I need.
 

Chemical

Aspirant
Joined
Feb 3, 2020
Messages
36
Take a look at Mettafizzy’s Packery and Isotope. You could set either up to use a shortcode but you probably will need to code the shortcode handler yourself. In saying that there may be plug-ins out there that integrate them for you. Both Isotope and Packery support JS, jQuery and plain HTML setup so hopefully will work in almost any environment you have.

 

Defiant America

Aspirant
Joined
Aug 3, 2019
Messages
10
Take a look at Mettafizzy’s Packery and Isotope. You could set either up to use a shortcode but you probably will need to code the shortcode handler yourself. In saying that there may be plug-ins out there that integrate them for you. Both Isotope and Packery support JS, jQuery and plain HTML setup so hopefully will work in almost any environment you have.

That looks cool. I was hoping to find more of a plugin that makes it so someone could easily add to the container without modifying html to add the "grid-item." What I am after is to allow someone to add in a iframely shortcode url to an offsite article to create a grid of "post cards" that can be clicked on and go directly to the article, rather than showing a card for a blog post on site. This is to create a aggregate article site.
 

Defiant America

Aspirant
Joined
Aug 3, 2019
Messages
10
So far so good, I got Metafizzy Isotope to display 3 iframely shortcodes. I may be able to train my friend to add these with HTML easy enough since he is eager to learn something new like this to make it happen quick.
 

Chemical

Aspirant
Joined
Feb 3, 2020
Messages
36
That looks cool. I was hoping to find more of a plugin that makes it so someone could easily add to the container without modifying html to add the "grid-item." What I am after is to allow someone to add in a iframely shortcode url to an offsite article to create a grid of "post cards" that can be clicked on and go directly to the article, rather than showing a card for a blog post on site. This is to create a aggregate article site.

Yes I understand your requirement. Several of the WP layout plug-ins on CodeCanyon are powered by either Isotope or Metafizzy, although don’t necessarily mention it. So if you don’t find what you are looking for elsewhere, spend some time paging through what CodeCanyon has to offer , taking care only to consider established plug-ins with a record of updates and good reviews.

Alternatively, Google ‘Wordpress grid plug-ins’. This should suggest several ‘any content’ grid plug-ins.

Failing the above, find yourself a WP dev, on here or elsewhere, and get them to quote on implementing one of the Metafizzy products into a shortcode.

Edit. Our posts crossed. Yes Isotope works well with Iframely.
 

Defiant America

Aspirant
Joined
Aug 3, 2019
Messages
10
Yes I understand your requirement. Several of the WP layout plug-ins on CodeCanyon are powered by either Isotope or Metafizzy, although don’t necessarily mention it. So if you don’t find what you are looking for elsewhere, spend some time paging through what CodeCanyon has to offer , taking care only to consider established plug-ins with a record of updates and good reviews.

Alternatively, Google ‘Wordpress grid plug-ins’. This should suggest several ‘any content’ grid plug-ins.

Failing the above, find yourself a WP dev, on here or elsewhere, and get them to quote on implementing one of the Metafizzy products into a shortcode.

Edit. Our posts crossed. Yes Isotope works well with Iframely.
I think I have looked at every plugin in existence and can't find one to do it. :p

I have a friend in the Ukraine who can program anything, although I could do it, but I am slow at coding other than doing a bug fix here and there on existing code.

I hope to become a better back-end coder. Thanks!
 

Chemical

Aspirant
Joined
Feb 3, 2020
Messages
36
Also, if you want to tidy this up a little, take a look at Advanced Custom Fields for WP. In the past we’ve used ACF on a page to configure multiple Isotope instances.
 
Top