Requirements:
#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;
}
- 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
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
No comments:
Post a Comment
If you have any problem please let me know.