wordpressfacetwp

FacetWP is braking masonry layout


I'm using FacetWP to build a filter form. Unfortunately, my masonry layout is braking when I select any option in the form. Results are presenting as a single column, instead of 3. Weird is that F5 makes the order (3 columns) right.
I was trying to use these methods: https://facetwp.com/documentation/template-configuration/ and this one: https://facetwp.com/using-facetwp-with-existing-template-files/

My code is

        <div id="primary" class="content-area col-md-9 <?php echo sydney_blog_layout(); ?>">
        <main id="main" class="post-wrap" role="main">


        <?php
        $args = array(
            'post_type' => 'nieruchomosci',
            'posts_per_page' => 12,
        );
        $query = new WP_Query( $args );?>
        <?php if ( $query->have_posts() ) : ?>

            <header class="page-header">
                <h3 class="archive-title">Szukaj nieruchomości</h3>
            </header><!-- .page-header -->
                <div class="wyszukiwarka"><?php echo facetwp_display( 'facet', 'rodzaj' ); ?><?php echo facetwp_display( 'facet', 'typ' ); ?><?php echo facetwp_display( 'facet', 'lokalizacja' ); ?></div>
            <div class="posts-layout facetwp-template">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php if ( has_post_thumbnail() && ( get_theme_mod( 'index_feat_image' ) != 1 ) ) : ?>
        <div class="entry-thumb">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('sydney-large-thumb'); ?></a>
        </div>
    <?php endif; ?>

    <header class="entry-header">
        <?php the_title( sprintf( '<h2 class="title-post entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    </header><!-- .entry-header -->

    <div class="entry-post">
                <?php the_field('cena'); ?> PLN | <?php the_field('powierzchnia'); ?> m<sup>2</sup></br>
                <?php echo get_the_term_list( $post->ID, 'rodzaj', '', ', ', '' ) ?> na <?php echo get_the_term_list( $post->ID, 'typ', '', ', ', '' ) ?> w miejscowości <?php echo get_the_term_list( $post->ID, 'lokalizacja', '', ', ', '' ) ?>
        <?php
            wp_link_pages( array(
                'before' => '<div class="page-links">' . __( 'Pages:', 'sydney' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-post -->

    <footer class="entry-footer">
        <?php sydney_entry_footer(); ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-## -->

            <?php endwhile; ?>
            </div>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->

Any advice will be very nice.


Solution

  • Actually I got his to work (using Masonry PACKAGED v4.1.1 & imagesLoaded PACKAGED v3.1.8):

    $(document).on('facetwp-loaded', function() {
        var $grid = $( '.grid' ).imagesLoaded( function() {
            $grid.masonry("reloadItems");
            $grid.masonry( {
                itemSelector : '.loop-entry',
                gutter       : 30,
                columnWidth  : 240,
                isAnimated   : true,
                animationOptions : {
                    duration : 300,
                    easing   : 'easeInOutCirc',
                    queue    : false
                }
            });
        });
    });