Masonry, WordPress Loop, and Bootstrap

1 Views

I am building a wordpress site using bootstrap, and I want to create a featured work section on my homepage using masonry to display the thumbnails and titles of my 3 most recent portfolio items.

I would like the portfolio items to be placed in a seemingly random fashion (similar to this: http://studiosweep.com/) rather than just an orderly grid format. I can’t figure out how to assign different widths to my portfolio items because they’re just being generated in the featured work section via wordpress loop.

Read More

Here’s my HTML: 

<section id="work">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-offset-6 col-sm-6 text-center">
        <h1>Featured Work</h1>
      </div>
    </div>
    <div class="row" id="ms-container">
      <?php query_posts('posts_per_page=3&post_type=work'); ?>
        <?php while ( have_posts() ) : the_post(); 
              $thumbnail = get_field('thumbnail');
              $medium = get_field('medium');
              $size = "large";
        ?>

      <div class="ms-item col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <figure>
          <a href="<?php the_permalink(); ?>"><?php echo wp_get_attachment_image($thumbnail, $size); ?></a>
        </figure>

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <div class="clearfix"></div>

      </div>

      <?php endwhile; // end of the loop. ?>                    
      <?php wp_reset_query();

    </div>

    <div class="clearfix"></div>

  </div>
</section>

Here’s the script: 

<script type="text/javascript">

     jQuery(window).load(function() {

     // MASSONRY Without jquery
         var container = document.querySelector('#ms-container');

         var msnry = new Masonry( container, {
             itemSelector: '.ms-item',
             columnWidth: '.ms-item',                
        });  

    }); 

</script>

As for CSS, I don’t really know how to go about assigning the different column widths, so I only have this so far:

.ms-item {
width: 38.23%;
margin-right: 80px;
margin-bottom: 70px;
}

Any help would be appreciated!

Post Views: 1

Related posts

1 comment

  1. Let’s say you have 3 different classes for column widths:

    .ms-item-width-1, .ms-item-width-2, .ms-item-width-3

    A possible solution is to add those 3 classes to your css file and randomly assign one of your classes to your container after .ms-item class. Masonry will give the width of the last class you added to that container. For example:

    <div class="ms-item <?php echo 'ms-item-width-' . (rand(0, 3) + 1); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <figure>
          <a href="<?php the_permalink(); ?>"><?php echo wp_get_attachment_image($thumbnail, $size); ?></a>
        </figure>

    Update: To have a randomized without getting repeated values you could have an array $widths = array(1,2,3); and then shuffle this array shuffle($widths); and instead of calling the random function you would be removing the elements of the array and replace it with the following code:

    <div class="ms-item <?php echo 'ms-item-width-' . array_shift($widths); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">

    This will provide an unique width to this 3 items.

Comments are closed.