gistfile1.php

<?php
/**
 * Template Name: Portfolio
 * Created by Zoe Rooney http://zoerooney.com
 */

get_header(); ?>

    <div id="primary" class="full-width">
      <div id="content" role="main">

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <div id="placeholder"></div>
          <div id="legend"></div>
          
          <div id="container1">
          <?php
            $args = array(
              'post_type' => 'wine',
              'nopaging' => true
            );
            $the_query = new WP_Query( $args );
            
            while ( $the_query->have_posts() ) : $i++;
              $the_query->the_post(); ?>
              <div class="portfolio<?php if ( ($i%3) == 0 ) { echo ' two-last'; } elseif ( ($i%2) == 0 ) { echo ' two-last'; } elseif ( ($i%4) == 0 ) { echo ' very-large'; } ?>" data-country="<?php echo implode(', ', get_field('country')); ?>" data-region="<?the_field('region'); ?>" data-price="<?php the_field('price'); ?>" data-varietal="<?php the_field('varietal'); ?>" data-vintage="<?php the_field('vintage'); ?>" data-brand="<?php the_field('brand'); ?>">
                
                <div class="project-image"><?php the_post_thumbnail('wine'); ?></div>
                <div class="project-info">
                  <span class="portfolio-title"><h3><?php the_title(); ?></h3></span>
                  <span class="portfolio-designer"><span class="light"><strong>Price/Bottle:</strong></span><?php the_field('price'); ?></span>
                  <span class="portfolio-type"><span class="light"><strong>Country:</strong></span> <span class="white"><?php the_field('country'); ?></span></span>
                  <span class="portfolio-varietal"><span class="light"><strong>Varietal:</strong></span><?php the_field('varietal'); ?></span>
                  <span class="portfolio-vintage"><span class="light"><strong>Vintage:</strong></span><?php the_field('vintage'); ?></span>
                  <!--Read More Button-->
                  <a class="btn btn-small" href="#read_more_<?php echo $i; ?>" role="button" data-toggle="modal">Read more</a>
                </div>
                <!-- Modal inside the loop rather than two loops -->
                <div id="read_more_<?php echo $i; ?>" class="modal hide fade" aria-labelledby="modalLabel" aria-hidden="true"> 
                    <div class="modal-box">
                        <div class="modal-header">  
                           <h2><?php the_title(); ?></h2>  
                        </div>      
                        <div class="modal-body">  
                           <p><?php the_field('varietal'); ?></p>  
                        </div>  
                    </div>  
                </div>
                
              </div>
          </div>
          


      </article><!-- #post-<?php the_ID(); ?> -->
          
      </div><!-- #content -->
    </div><!-- #primary -->

 

               <!-- javascript -->

<script>
jQuery(document).ready(function($){
     $.filtrify("container1", "placeholder", {
      close : true,
      callback : function( query, match, mismatch ) {
                 if ( !mismatch.length ) {
                     $("#legend").html("Viewing all Wines");
                 } else {
                     var category, tags, i, tag, legend = "<h4>Currently filtered by:</h4>";
                     for ( category in query ) {
                         tags = query[category];
                         if ( tags.length ) {
                             legend += "";
                             for ( i = 0; i < tags.length; i++ ) {
                                 tag = tags[i];
                                 legend += "" + tag + "&nbsp;&nbsp;&nbsp;&nbsp;";
                             };
                             legend += "";
                         };
                     };
                     $("#legend").html( legend );
                 };
             }
     });
});
</script>
<?php get_footer(); ?>