Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Matt Lewis
Matt Lewis
5,970 Points
Posted by Matt Lewis
Matt Lewis
5,970 Points

Wordpress Masonry Help?

Hello, I've created a custom post type for my portfolio that looks great, now I want to display the images with "masonry", and I've been following along with this tutorial:

http://www.danbirlew.com/updated-masonry-in-wordpress/

and I've followed all the enqueue steps correctly. The problem is with the Wordpress loop, can anyone let me know the best way about adding masonry to your loop?

Currently I have:

<div class="row">
    <div class=" small-12 columns">

        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>

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

<?php

    $args = array(
     'post_type' => 'portfolio'
    );
    $query = new WP_Query( $args );

?>

    <!-- The Loop -->


    <?php if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); ?>

    <div id="container" class="js-masonry"
    data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>     

        <?php the_post_thumbnail( 'large' ); ?> 

    </div>


    <!-- End The Loop -->

    <?php endwhile; endif; wp_reset_postdata(); ?>

It's a mess when I test it though. Can anyone help me figure this out?!

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You gotta get your container div out of the loop. You only need one.

<?php

    $args = array(
     'post_type' => 'portfolio'
    );
    $query = new WP_Query( $args );

?>

    <!-- The Loop -->

    <div id="container" class="js-masonry"
    data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

    <?php if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); ?>


      <div class="item">
        <?php the_post_thumbnail( 'large' ); ?> 
      </div>




    <!-- End The Loop -->
<?php endwhile; endif; wp_reset_postdata(); ?>

</div>

Now something like that should give you the correct markup. You'll only have one container div, and all images will be wrapped in a div with the class of item.

Now that only gives you blocks that are the same height, in this case you have selected 200px. If you wanted some elements to have different widths, there are a few ways to go about that. One is stopping and restarting the loop, and adding another class that has a different width.

I'm assuming widths could be applied dynamically via JS or jQuery (not ideal and won't work for users with JS disabled). I wonder if you could override widths using CSS psuedo classes, something like :nth-child(2n+4)? Truthfully don't know about that one.

Hopefully my above answer makes sense. Let me know if it doesn't. It's important you understand why, not just copy and paste here.