Last active
April 5, 2019 20:52
-
-
Save badabingbreda/a130a2650b085eb5282c1f3d1b47c107 to your computer and use it in GitHub Desktop.
Toolbox Example: Dynamic Group Filter Twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% macro getterms( taxonomy ) %} | |
{% set terms = function( 'get_terms' , { 'taxonomy': taxonomy , 'hide_empty' : true } ) %} | |
{% for item in terms %} | |
{% if item.slug != 'uncategorized' %} | |
<div> | |
<ul class="uk-subnav uk-subnav-pill" uk-margin> | |
<li class="filterbutton" uk-filter-control="filter: [data-{{item.slug}}='true']; group: {{item.slug}}"> | |
<a href="#">{{item.name}}</a> | |
</li> | |
</ul> | |
</div> | |
{% endif %} | |
{%endfor %} | |
{% endmacro %} | |
{% macro flexterms( taxonomy ) %} | |
{% set terms = function( 'get_terms' , { 'taxonomy': taxonomy , 'hide_empty' : false } ) %} | |
{% for item in terms %} | |
{% if item.slug != 'uncategorized' %} | |
<div class="uk-margin-small-right uk-margin-small-bottom"> | |
<a class="uk-button uk-button-default chooser" data-term="{{item.slug}}" uk-filter-control="filter: [data-{{item.slug}}='true']; group: {{item.slug}}"> | |
{{item.name}} | |
</a> | |
<a class="uk-hidden uk-button uk-button-default shadow" data-term="{{item.slug}}" uk-filter-control="group: {{item.slug}}"> | |
Un{{item.name}} | |
</a> | |
</div> | |
{% endif %} | |
{%endfor %} | |
{% endmacro %} | |
{% macro terms_filter( terms ) %} | |
{% for item in terms %}{% if item.slug != 'uncategorized' %}data-{{item.slug}}="true"{{' '}}{% endif %}{% endfor %} | |
{% endmacro %} | |
{% import _self as termm %} | |
{#### | |
button bar #} | |
<div class="uk-flex uk-flex-wrap"> | |
{{ termm.flexterms('category') }} | |
</div> | |
{#### | |
end button bar #} | |
<div uk-filter="target: .js-filter"> | |
{# filter bar goes here #} | |
<div class="uk-grid-small uk-grid-divider uk-child-1-1" uk-grid> | |
<div> | |
<ul class="uk-hidden uk-subnav uk-subnav-pill" uk-margin> | |
<li class="uk-active" uk-filter-control><a href="#">All</a></li> | |
{{ termm.getterms('category') }} | |
</ul> | |
</div> | |
</div> | |
{# filter container #} | |
<div class="uk-container-medium uk-align-center"> | |
{% if posts|length > 0 %} | |
<div class="js-filter uk-grid-collapse uk-grid-match uk-child-width-1-1 uk-child-width-1-3@s" uk-grid> | |
{% for item in posts %} | |
{% set categories = function( 'get_the_terms' , item.ID , 'category' ) %} | |
{# needs data-prop in li#} | |
<div {{termm.terms_filter( categories )}}> | |
<div> | |
<a href="{{item.link}}"> | |
<div class="uk-inline" tabindex="0"> | |
<div class="uk-cover-container"> | |
{% if item.thumbnail.src %} | |
<img src="{{item.thumbnail.src('large')}}" uk-cover> | |
<canvas width="600" height="380"></canvas> | |
{% else %} | |
<img src="{{TimberImage( 62 ).src('large')}}" uk-cover> | |
<canvas width="600" height="380"></canvas> | |
{% endif %} | |
</div> | |
<div class="uk-overlay-primary uk-position-cover"></div> | |
<div class="uk-overlay uk-position-bottom-left uk-light"> | |
<h4>{{item.title}}</h4> | |
<span style="font-size:0.85em;">{{item.terms|join( ', ' )}}</span> | |
</div> | |
</div> | |
</a> | |
</div> | |
</div> | |
{% endfor %} | |
</div> | |
{% endif %} | |
</div> | |
{# end filter container #} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment