Página de portfólio no Drupal usando o plugin MixItUp JQuery

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

Para começar, precisaremos incluir o plug-in http://mixitup.io/ no arquivo .info do nosso tema.

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

Usando Drupal Views, criaremos um bloco simples para exibir todos os nossos termos de taxonomia (categorias de projeto).
Imagem

e, em seguida, criar uma página para exibir todos os nossos projetos (itens do portfólio) Imagem

e atribuir uma classe (.gridMeUp) a ele

Crie seus controles de filtro

Para o nosso bloco de Termos de Taxonomia, adicione um arquivo tpl à pasta do seu tema chamado:

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; ?>

Crie seu contêiner e conteúdo

MixItUp pode ser aplicado a qualquer tipo de elemento em um contêiner, como uma lista não ordenada. Seu contêiner deve ter um ID exclusivo ou uma classe que usaremos para instanciar MixItUp em seu JavaScript.

As categorias de filtragem de cada elemento de destino devem ser inseridas em seu atributo de classe

Para a nossa página Projetos, adicione um arquivo tpl à pasta do seu tema chamado:

views-view-list – projetos – 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; ?>

Por fim, MixItUp é instanciado em seu contêiner em seu JavaScript da seguinte maneira:

$(function(){

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

});

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