Using isotope gallery in drupal 8 views

Requirements:

• the isotope library that you can save from the following link: JS FILE
• Drupal View module (now included in the drupal8’s core)
• some custom code

First step: integrating libraries to our theme.

demo.info.yml

libraries:

  - demo/global-style

acds.libraries.yml

global-style:

  css:

    theme:

      css/layout.css: {}

  js:

    js/isotope.pkgd.min.js: {}

    js/add.js: {}

     

  dependencies:

    - core/jquery

Second step: building the view.

Themename.theme

function demo_preprocess_block(&$variables) {

  $variables['termList'] = '';

    $vid = 'faculty_type';

      $terms =\Drupal::entityTypeManager()->getStorage('taxonomy_term')->loadTree($vid);

      $termList = '<div class="clearfix" id="options"><ul id="filters" class="pagination option-set clearfix" data-option-key="filter">

      <li><a href="#filter" data-filter="*" class="selected filter active">view all</a></li>';

      foreach ($terms as $term) {

         $termList .=' <li><a href="#filter" data-filter=".isotope-filter'.$term->tid.'" class="filter">'.$term->name.'</a></li>';

       

        }

       $termList .='</ul></div>';

      $variables['termList'] = $termList;

}

Goto block themes/templates/block/block--views-block--{View-machine-name}-{under-view-block}.html.twig

<div{{ attributes }}>

  {{ title_prefix }}

  {% if label %}

    <h2{{ title_attributes }}>{{ label }}</h2>

  {% endif %}

  {{ title_suffix }}

  {% block content %}

     {{ termList|raw }}

    {{ content }}

  {% endblock %}

</div>

css/layout.css

#filters {
margin:1%;
padding:0;
list-style:none;
}

#filters li {
float:left;
}

#filters li span {
display: block;
padding:5px 20px;
text-decoration:none;
color:#666;
cursor: pointer;
}

#filters li span.active {
background: #e95a44;
color:#fff;
}



#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;

}

js/add.js

jQuery(document).ready(function(){

jQuery(function () {    

  var filterList = {

    init: function () {

      jQuery('#portfoliolist').mixItUp({

        selectors: {

          target: '.portfolio',

          filter: '.filter' 

        },

        load: {

          filter: '*'  

        }     

      });               

      

      }

    };

    filterList.init();  

 });

});

VIEW 

views-view-unformatted--inner-page--block-2.html.twig

{% if title %}

  <h3>{{ title }}</h3>

{% endif %}

<div id="portfoliolist">

{% for row in rows %}

  {%

    set row_classes = [

      default_row_class ? 'views-row',

    ]

  %}

    {{- row.content -}}

{% endfor %}

</div>

View Under Rewrite results

<div class="portfolio isotope-filter{{ field_faculty_type }}" data-cat="isotope-filter{{ field_faculty_type }}">

<div class="portfolio-wrapper">

<img src="{{ field_faculty_image }}" alt="" />

<h3>{{ title }}</h3>

           

</div>

</div>