Skip Navigation

[Closed] masonry grid

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 3 replies, has 3 voices.

Last updated by tobiasS 6 years ago.

Assigned support staff: Beda.

Author
Posts
#334317

I am trying to:
Easy solution to masonry grid
I expected to see:
I see on another product similar to layouts they have on option to choose masonry grid. Periodically this would com in handy for image galleries and posts.

This would be a nice add on feature.

Cheers,

#334325

Thank you for contacting us here in the Support Forum

I had a look at http://masonry.desandro.com/, and as it seems, this framework does not rely on Bootstrap, if I understand this correctly.

Currently Layouts needs Bootstrap Framework to work properly, therefore it's not possible yet to use this framework with Layouts.

We are planning features that will allow you to define your own classes for Layouts, but when exactly our developers will add a new feature or not is not up-to us Supporters to determine.

Each issue reported in, whether a bug or a new feature request, is taken seriously into consideration.

It is given a high or low priority based on a number of factors.
Factors which those with the overview of all things related are in the best position to determine.

I apologize any inconvenience this may cause.

I have rised your feature request to the DEV team, so they can take this into consideration while developing the new features.

Please let me know if you have further questions regarding the issue mentioned in this Thread
and do not hesitate to open a new thread if other issues or problems arise

Thank you for your patience.

#334340

I have succesfully set up a masonry grid for Views (which you could integrate in Layouts).

Put the following code in your Loop Output
------------------------------------------

<script src="hidden link"></script>
[wpv-layout-start]
[wpv-items-found]
<div class="masonry-grid">
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 grid-item">
[wpv-post-body view_template="View Single Item Content Template"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

------------------------------------------

Then put this in your Javascript section for the Loop Output
------------------------------------------

jQuery( document ).ready(function() {
runmasonry();
});

// Masonry Function //

function runmasonry() {
jQuery('.masonry-grid').masonry({
// options
itemSelector: '.grid-item'
});
}

// ******* //

------------------------------------------
Also if you are using Ajax powered search you have to add this also
------------------------------------------

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
runmasonry();
});

------------------------------------------

Works like a charm.

#334343
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

Should be put on top of the loop output (some formatting issues)

The topic ‘[Closed] masonry grid’ is closed to new replies.