How to build a strict 'masonry'-like portfolio page

[Toon61]

Hi all,

I'm in the middle of developing a site for a friend photographer.
She wants a 'masonry' style homepage and portfolio pages.
But this masonry must conform to certain rules:
Images are always square (1:1) or double square (2:1 or 1:2).
At the moment I've build the homepage following these rules and she is very happy with it:
http://mgf.woohoodesign.nl
The homepage is a combination of 5 posts and 6 menu-items (Styling, Kinderen etc.) linking to the 6 different parts of her portfolio.
I use the Genesis Extender plugin (from Cobalt Apps) to build the homepage. It consists of 11 widgets in which I use the 'Genesis Sandbox - Featured Content' plugin to get all the content displayed. The beauty of this plugin is that you can offset which post or page (with thumbnail) to display in a certain widget.
A similar layout will be used for the 6 portfolio pages, where about 10 - 12 photo's will be displayed. I can use the same technique as I've done for the homepage, but that means that there will be another 60 or more widgets to be controlled from the WordPress Widgets page. But I don't think that's a very clever way to do this.
What I really would like to do, is create some logic so every Portfolio page with 10-12 photo's is rendered dynamically within the strict (squares and double squares) masonry-like layout.
At this moment I don't know how to do this, or where to look for an easy or understandable solution.
I can't and will not ask for a complete solution, but I would like to be pointed in the right direction.
Maybe it can be done with the use of the Genesis Extender plugin, or maybe with Visual Composer (Although I have not had any good results using Visual Composer. It might be possible to build a page that looks like the layout I made for the homepage, but I haven't found out (yet) how to 'connect' all these individual parts together. As far as I know, they can only be treated as individual elements and that is not what I want).

Any help is very much appreciated.

http://mgf.woohoodesign.nl

[Badlywired]

OK wordpress has jquery-masonary built in
see https://codex.wordpress.org/Function_Reference/wp_enqueue_script

enqueue it

then write a custom loop to ensure you build the right sized bricks in the right sequence (if you care i.e small x 4, big, horiz, horiz )

and add a bit of jquery to fires it all up

This tutorial should get you closer http://code.tutsplus.com/tutorials/using-jquery-masonry-for-pinterest-like-posting--wp-29556

In this site http//:fullworlks.net I'm using the same principals (but using 'isotope' library) and using 'post format' amd 'menu order' on the post to determine order / size

---

My techy blog WordPress and stuff badlywired.com

[Toon61]

Thank you Badlywired,

I'll definitely look into that, sounds promising.
What's the difference between the masonry and isotope library?

[Badlywired]

Not a lot. In fact I think (but not sure) that isotope uses jquery masonry for its masonry effects.

---

My techy blog WordPress and stuff badlywired.com

[Toon61]

I've looked at both masonry and isotope effects, but I don't like that reshuffling of elements when you change the width of the browser window. I want it to scale fluidly, just as I did on the homepage (http://mgf.woohoodesign.nl).
So I think I'll stick with the solution I already created, and try to figure out how to make this more 'intelligent'.

[Author]

Posts