Code snippets for my WordPress + Filtrify portfolio tutorial: http://zoerooney.com/blog/tutorials/wordpress-filtrify-a-tag-filtered-portfolio-or-gallery/

data-attributes.php

data-platform="<?php echo implode(', ', get_field('platform')); ?>"

data-project-type="<?php echo implode(', ', get_field('project_type')); ?>"

data-designer="<?php the_field('designers'); ?>"

div-output.html

<div class="portfolio" data-platform="WordPress, Shopify" data-project-type="Ecommerce" data-designer="Ghostly Ferns">

<div class="portfolio last" data-platform="WordPress" data-project-type="Info Site" data-designer="small shop">

div-tag.php

<div class="portfolio<?php if ( ($i%3) == 0 ) { echo ' last'; } elseif ( ($i%2) == 0 ) { echo ' two-last'; } elseif ( ($i%4) == 0 ) { echo ' very-large'; } ?>" data-platform="<?php echo implode(', ', get_field('platform')); ?>" data-project-type="<?php echo implode(', ', get_field('project_type')); ?>" data-designer="<?php the_field('designers'); ?>">

enqueue.php

function lets_add_some_scripts() {
	wp_enqueue_script(
		'filtrify',
		get_template_directory_uri() . '/js/filtrify.min.js',
		array('jquery')
	);
	wp_enqueue_style(
		'filtrify-css',
		get_template_directory_uri() . '/js/filtrify.css'
	);
}    
add_action('wp_enqueue_scripts', 'lets_add_some_scripts');

full-template-file.php

<?php
/**
 * Template Name: Portfolio
 */

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="container">
					<?php
						$args = array(
							'post_type' => 'customportfolio',
							'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 ' last'; } elseif ( ($i%2) == 0 ) { echo ' two-last'; } elseif ( ($i%4) == 0 ) { echo ' very-large'; } ?>" data-platform="<?php echo implode(', ', get_field('platform')); ?>" data-project-type="<?php echo implode(', ', get_field('project_type')); ?>" data-designer="<?php the_field('designers'); ?>">
								<div class="project-image">
									<?php the_post_thumbnail('portfolio'); ?>
								</div>
								<div class="project-info">
									<?php the_title(); ?>
								</div>
							</div>
						<?php endwhile; wp_reset_postdata(); ?>	
					</div>
					
				</article>
					
			</div><!-- #content -->
		</div><!-- #primary -->
<script>
jQuery(document).ready(function($){
     $.filtrify("container", "placeholder", {
     	close : true,
     	callback : function( query, match, mismatch ) {
     	           if ( !mismatch.length ) {
     	               $("#legend").html("Viewing all projects");
     	           } 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 + "&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;";
     	                       };
     	                       legend += "";
     	                   };
     	               };
     	               $("#legend").html( legend );
     	           };
     	       }
     });
});
</script>
<?php get_footer(); ?>

init.js

<script>
jQuery(document).ready(function($){
     $.filtrify("container", "placeholder", {
     	close : true,
     	callback : function( query, match, mismatch ) {
     	           if ( !mismatch.length ) {
     	               $("#legend").html("Viewing all projects");
     	           } 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 + "&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;";
     	                       };
     	                       legend += "";
     	                   };
     	               };
     	               $("#legend").html( legend );
     	           };
     	       }
     });
});
</script>

layout-basic-page.html

<div id="placeholder"></div>
<div id="legend"></div>
					
<div id="container">
    .....
</div>

layout.php

<div id="placeholder"></div>
<div id="legend"></div>
					
<div id="container">
	<?php
	$args = array(
		'post_type' => 'customportfolio',
		'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 ' last'; } elseif ( ($i%2) == 0 ) { echo ' two-last'; } elseif ( ($i%4) == 0 ) { echo ' very-large'; } ?>">
		
			<div class="project-image">
				<?php the_post_thumbnail('portfolio'); ?>
			</div>
			
			<div class="project-info">
				<?php the_title(); ?>
			</div>
									
		</div>
		
	<?php endwhile; wp_reset_postdata(); ?>
	
</div>

portfolio-item.php

<div class="portfolio<?php if ( ($i%3) == 0 ) { echo ' last'; } elseif ( ($i%2) == 0 ) { echo ' two-last'; } elseif ( ($i%4) == 0 ) { echo ' very-large'; } ?>">

	<div class="project-image">
		<?php the_post_thumbnail('thumbnail'); ?>
	</div>
	
	<div class="project-info">
		<?php the_title(); ?>
	</div>
							
</div>

query.php

<?php
	$args = array(
		'post_type' => 'customportfolio',
		'nopaging' => true
	);
		
	$the_query = new WP_Query( $args );
						
	while ( $the_query->have_posts() ) : $i++;
	$the_query->the_post(); ?>
	
	<!-- stuff within the loop here -->
<?php endwhile; wp_reset_postdata(); ?>