Masonry settings not affecting WP post loop output

1 Views

I am developing a WP 4.0 theme and trying to implement a simple setup of masonry. My intentions are to get a certain number of posts from a category, create a loop and have masonry lay them out in a dynamic grid.

For whatever reason, the settings I input (columnWidth and gutter) into my functions.js file seem to have no effect at all. All the images load up but only go down vertically in one column. I feel like either i’m missing something entirely or perhaps a small fluke somewhere?

Read More

functions.php: 

function archive_grid(){
    wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts', 'archive_grid');

functions.js: 

var container = document.querySelector('#masonry-loop');
    var msnry = new Masonry( container, {
            columnWidth: 300,
            gutter: 30,
            itemSelector: '.archive-container'
            });
    } );

template.php 

<div id="archive-index">
    <div id="masonry-loop">
        <?php
            $args = array(
                        'posts_per_page'   => 6,
                'category_name'    => 'back-issue', 
                'orderby'          => 'post_date',
                'order'            => 'DESC' );

            $archive = get_posts( $args ); 
            foreach ( $archive as $post ) : setup_postdata( $post ); ?>     
            <div class="archive-container">
                <?php the_post_thumbnail(); ?></a>
            </div><!-- Archive Container-->
            <?php
            endforeach; 
            ?>              
    </div><!--/#masonry-loop-->
    <?php
    wp_reset_postdata(); ?> 
</div><!-- #archive-index -->
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. It looks like this may be your problem (or at least part of it):

    <div class="archive-container">
    <?php the_post_thumbnail(); ?></a>
</div><!-- Archive Container-->

    There’s no opening < a > tag within the div 🙂 Try adding that in and see if it fixes the column issue.

  2. I’m not exactly sure where in my wordpress the images are being affected. It seems somewhere it is just ignoring masonry settings and setting the images to some other defined height which I cant seem to figure out but shows up in inspector as (img[Attributes Style] {};). I added some css attributes to the item containers to force the divs to max-widths. fixed the problem.

    .archive-container {    
    max-width: 300px;
}
.item img {
    width: auto;
    height: auto;
    max-width: 300px;
}