Inconsistent layout with jQuery masonry

[Robert Piller]

I’m finding that masonry sometimes destroys the layout, other times does not, depending on which browser I use and whether I’m refreshing the page or just clicking the link again in the navbar:

http://www.pillerdesigns.com/bouldereditors/member-directory/

Sometimes it works and other times I see a bar through Debra and it’s out of order: http://cl.ly/OfnD

I wonder if this has to do with the fact that Jump Start splits the posts into grid-rows. What’s a good workaround?

Here is my theme.js code inside the document.ready function:

$('div.grid-protection').masonry({
		itemSelector : '.grid-item'
	});

I tried loading masonry in window.load instead of document.ready (that’s what I usually do on other sites), but that looked even worse.

Thanks!

Topic

[Jason Bobich]

Hello Robert,

I haven’t played with it much to be honest, but from what I understand, the way the framework sets up the post grids in general isn’t really going to be ideal for using the jQuery Masonry plugin.

The framework sets up post grids something like this where each row of items is in its own div like:

<div class="grid-protection">
	<div class="grid-row">
		<div class="grid-item">Post #1</div>
		<div class="grid-item">Post #2</div>
		<div class="grid-item">Post #3</div>
	</div>
	<div class="grid-row">
		<div class="grid-item">Post #4</div>
		<div class="grid-item">Post #5</div>
		<div class="grid-item">Post #6</div>
	</div>
</div>

So, from what I understand, in order to get Masonry rolling like this:

$('div.grid-protection').masonry({
	itemSelector : '.grid-item'
});

… Ideally, you’d want your post grid’s markup to look something like this, right?

<div class="grid-protection">
	<div class="grid-item">Post #1</div>
	<div class="grid-item">Post #2</div>
	<div class="grid-item">Post #3</div>
	<div class="grid-item">Post #4</div>
	<div class="grid-item">Post #5</div>
	<div class="grid-item">Post #6</div>
</div>

Luckily, in this regard the framework does insert this markup to close and start rows from some filtered functions. So, in theory if you were just to blank these out (i.e. filter and return null), you should get markup similar to above.

add_filter( 'themeblvd_open_row', '__return_null' );
add_filter( 'themeblvd_close_row', '__return_null' );

Some things to note about this:

1. In my ignorance of Masonry, I have no idea how the framework’s post grid’s CSS is going to effect Masonry after you get the markup setup correctly.
2. If you made the above change, it’s going to effect all Post Grids, not sure if that matters to you.
3. If this continues to not work right, you may just consider creating your own Masonry element that just loops through and displays post with own custom markup. With the Layout Builder API, you can actually add this right to the Builder interface quite easily — http://dev.themeblvd.com/tutorial/add-remove-builder-elements/

[askwpgirl]

Jason, thanks for the great thoughts on this. I have had lots of people approach me lately for masonry layout, and there are some themes that use it, so I will definitely try this out with Jump Start and see how it works.

[karlo]

For the interested and if Masonry does not work 100%:

MixItUp http://mixitup.io/
ShapeShifter http://mcpants.github.io/jquery.shapeshift/

Hot 🙂

I have zero experience with any of them, or Masonry, but nice to have what seems to be solid alternatives. Sometimes required. Last Masonry update was 2011 right? Hmm. Must be very very good then. Github seems more alive https://github.com/desandro/masonry but “update to jQuery 1.7.1” ???

[Author]

Replies