Portfolio page in Drupal using MixItUp JQuery plugin

DEMO http://gifti.me/i/w1HDAFv.gif

To begin with we'll need to include http://mixitup.io/ plugin in our theme's .info file.

scripts[] = js/jquery.mixitup.min.js

Using Drupal Views we will create a simple Block to display all our Taxonomy Terms(Project Categories)
Picture

and then create a page for displaying all our projects (Portfolio items)Picture

and assign a class(.gridMeUp) to it

Build Your Filter Controls

For our Taxonomy Terms block add a tpl file to your theme's folder named:

views-view-list--project-taxonomy-terms--block.tpl.php

/**
 * @file
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */
?>
<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
     <?php foreach ($rows as $id => $row): ?>
      <li class="<?php print $classes_array[$id]; ?> filter" data-filter="pr_cat_<?=$view->style_plugin->rendered_fields[$id]['tid']?>"><?php print $row; ?></li>
    <?php endforeach; ?>
  <?php print $list_type_suffix; ?>
<?php print $wrapper_suffix; ?>

Build Your Container and Content

MixItUp can be applied to any type of elements within a container, such as an unordered list. Your container should have a unique ID or a Class that we will use to instantiate MixItUp in your JavaScript.

The filtering categories of each target element should be entered into its class attribute

For our Projects page add a tpl file to your theme's folder named:

views-view-list--projects--page.tpl.php

/**
 * @file
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */
?>
<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
    <?php foreach ($rows as $id => $row): ?>
        <?php
        $classes_for_mix = "";
        $pieces = explode(",", $view->style_plugin->rendered_fields[$id]['field_project_category']);
        foreach ($pieces as $p) $classes_for_mix .= " pr_cat_$p";
        ?>
      <li class="<?php print $classes_array[$id]; ?> <?=$classes_for_mix?> mix mix_all" data-cat="<?=$id?>"><?php print $row; ?></li>
    <?php endforeach; ?>
    <li class="gap"></li>
  <?php print $list_type_suffix; ?>
<?php print $wrapper_suffix; ?>

Finally MixItUp is instantiated on your container in your JavaScript like this:

$(function(){

    $('.gridMeUp').mixitup();

});

DEMO http://gifti.me/i/w1HDAFv.gif