Archived topic
facetwp and masonry blog
7 replies · Started by SCIP on November 19, 2017
I would like to use facetwp to be able to filter my masonry blog, where the first column is featured (2/3 width).
The problem is that after you have filtered the posts, the layout breaks.
The answer from facetwp is to
<script>
$(document).on('facetwp-loaded', function() {
// do layout when FacetWP finishes
$grid.masonry('layout');
});
</script>This is meant to cause the layout is triggered after facetwp is loading. The problem is that is that your masonry event is loaded once the images are loaded.
Any idea about how to combine them?
Many thanks
Mark
Give this a shot:
<script>
jQuery(document).on('facetwp-loaded', function() {
jQuery( '.masonry-container' ).masonry( 'layout' );
});
</script>Thanks for the answer, unfortunately it didn't work.
I have got the following code to work:
(function($) {
$(document).on('facetwp-loaded', function() {
$('.masonry-container').masonry('reload');
});
})(jQuery);But I need it to wait until the images have loaded otherwise the posts lie on top of each other. I think the following is working:
(function($) {
$(document).on('facetwp-loaded', function() {
var $grid = $('.grid').imagesLoaded( function() {
$('.masonry-container').masonry('reload');
});
});
})(jQuery);See http://nhssf.scipdev.org/blog/
Regards
Mark
What do you think? The code may come in useful for other people.
Looks great - thanks a lot for sharing! :)
Hello sir,
I have the same problem with facetwp plugin.
When select one category in dropdown filter (right sidebar), display the posts lie on top of each other and break footer.
url: http://academia1.eup7wgww6f-xmz4qkv8o42o.p.runcloud.link/
I've tried adding the last javascript code of markinbrighton user using elements and hook in the blog, but not working ... Maybe i'm doing something wrong.
Any help? Please
Thanks in advance.
Hi there,
see my reply here:
Hello David,
It works ...!!
Thanks a lot sir :-)
Awesome - glad to hear that
