Isotope JS Library - Cards overlapping

210
February 05, 2018, at 7:43 PM

I have integrated the Isotope grid .js library (https://isotope.metafizzy.co/index.html) with my Wordpress posts to display a nice grid: see screenshot below:

However, on initial load (and when I do a cache reload) the grid items seem to overlap. See below Screenshot:

I've enqueued the js library using a CDN, I can tell thats working. I have the below code. Firstly the loop to bring in the posts and then the bit of Javascript that initialises it.

<div class="container blog-card-container">
    <div class="grid">
        <?php
        $my_query = new WP_Query('cat=[14]&posts_per_page=10');
        ?>
        <?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
                    <div class="grid-sizer"></div>
                    <!-- Conditional a Link =========================================== -->
                    <?php 
                      if(get_field('quote') == ''){
                      $yourTag = "<a href='".get_the_permalink()."'>" ;
                      } else {
                      $yourTag = "";
                      }
                    ?>

                    <div> <?php echo $yourTag; ?> </div>
                            <div class="grid-item">
                                <div class="client-header-logo-card" style="background-color: <?php the_field('client_brand_colour'); ?>;">
                                    <?php 
                                    $image = get_field('client_logo');
                                    if( !empty($image) ): ?>
                                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                                    <?php endif; ?>
                                </div>
                                <div class="clients-card-block">
                                    <h2><?php the_title(); ?></h2>
                                    <?php if( get_field('quote') ): ?><p class="client-quote"><span style="color:<?php the_field('client_brand_colour'); ?>; font-weight:bold;">&ldquo; </span><?php the_field('quote'); ?><span style="color:<?php the_field('client_brand_colour'); ?>;font-weight:bold;"> &rdquo;</span></p><?php endif; ?>

                                    <?php if( get_field('quote_name') ): ?><p class="client-name" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_name'); ?></p><?php endif; ?>
                                    <?php if( get_field('quote_position') ): ?><p class="client-position" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_position'); ?></p><?php endif; ?>

                                    <?php if( get_field('button_text') ): ?>
                                        <a class="btn btn-sm btn-client-archive" href="<?php the_permalink(); ?>" style="background-color:<?php the_field('client_brand_colour'); ?>;" role="button"><?php the_field('button_text'); ?></a>
                                    <?php endif; ?>
                                    <?php if( get_field('video_url') ): ?>
                                        <div class="embed-container">
                                            <?php the_field('video_url'); ?>
                                        </div>
                                    <?php endif; ?>                 
                                </div>
                            </div>
                        </a>

        <?php endwhile; ?>
    </div>
</div>


<script type="text/javascript">
// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: 20
  }
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});
</script>

I included this little bit of javascript after the init which is supposed to fx the issue, but I find them still overlapping:

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

My site is here by the way: http://webserver-meetandengage-com.m11e.net its around halfway down the homepage.

Do you think this is because I've included the javascript on the same page? Should I include it in it's own .js file? I tried this initially but I couldn't get it to work properly...

Answer 1

Seems you didn't include imagesLoaded plugin on the page. Please make sure that the plugin is added properly. Hope that'll resolve the overlapping issue. And you should add this <div class="grid-sizer"></div> outside the loop.

Rent Charter Buses Company
READ ALSO
How Do I Parse This JSON Data [on hold]

How Do I Parse This JSON Data [on hold]

I tried JSONparse but didn't work

185
On event in jquery [on hold]

On event in jquery [on hold]

I have 2 datatablesI want to add a row to another table and remove from the other table

177
Sticky foreground service fails to restart with a &ldquo;process is bad&rdquo; error

Sticky foreground service fails to restart with a “process is bad” error

I have a started foreground serviceI've taken care to return START_STICKY from onStartCommand

433