Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badabingbreda/a130a2650b085eb5282c1f3d1b47c107 to your computer and use it in GitHub Desktop.
Save badabingbreda/a130a2650b085eb5282c1f3d1b47c107 to your computer and use it in GitHub Desktop.
Toolbox Example: Dynamic Group Filter Twig
{% 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