Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] facetwp and masonry blog

Home Forums Support facetwp and masonry blog

  • This topic has 3 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #428598
    markinbrighton

    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

    GeneratePress 1.4
    GP Premium 1.5.4
    #428629
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    <script>
    jQuery(document).on('facetwp-loaded', function() {
        jQuery( '.masonry-container' ).masonry( 'layout' );
    });
    </script>
    #431090
    markinbrighton

    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.

    #431190
    Tom
    Lead Developer
    Lead Developer

    Looks great – thanks a lot for sharing! 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.