74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
---
|
|
layout: default
|
|
sitemap: false
|
|
---
|
|
<div class="button-group filters-button-group">
|
|
|
|
<button class="button is-checked" data-filter="*">show all</button>
|
|
|
|
<!-- create categories array-->
|
|
{% assign categories_array = "" | split:"|" %}
|
|
|
|
<!--Add each unique 'my_collection' category to the array-->
|
|
{% for post in site.tracks %}
|
|
{% for category in post.categories %}
|
|
{% assign categories_array = categories_array | push: category | uniq %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
<!--Output the categories-->
|
|
{% for category in categories_array %}
|
|
|
|
<button class="button" data-filter=".{{ category }}">{{ category }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="grid" style="display:flex;flex-wrap: wrap;">
|
|
{% for resource in site.tracks %}
|
|
<div class="element-item {% for key in resource.categories %}{{ key | replace_first: ',', ''}} {% endfor %}"
|
|
style="flex 1 1 150px;">
|
|
<div class="cartouche filtered"
|
|
style="background-color: rgba(232, 241, 223, 1);background-image:url('{{ resource.image }}');background-position: center;">
|
|
|
|
</div>
|
|
<div class="cartouche">
|
|
<p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow"
|
|
class="btn"><strong>✎</strong> Edit Resource</a></p>
|
|
<h4>{{ resource.title }}</h4>
|
|
<p>{{ resource.description | truncate: 65 }}</p>
|
|
<p>{{ resource.media_type }}</p>
|
|
<p><a class="cta" href="{{ resource.url }}" alt="länk till ressurs" target="_blank" rel="noopener noreferrer">Läs
|
|
mer...</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
// external js: isotope.pkgd.js
|
|
|
|
// init Isotope
|
|
var $grid = $('.grid').isotope({
|
|
itemSelector: '.element-item',
|
|
layoutMode: 'fitRows'
|
|
});
|
|
// filter functions
|
|
|
|
// bind filter button click
|
|
$('.filters-button-group').on('click', 'button', function () {
|
|
var filterValue = $(this).attr('data-filter');
|
|
// use filterFn if matches value
|
|
|
|
$grid.isotope({ filter: filterValue });
|
|
});
|
|
// change is-checked class on buttons
|
|
$('.button-group').each(function (i, buttonGroup) {
|
|
var $buttonGroup = $(buttonGroup);
|
|
$buttonGroup.on('click', 'button', function () {
|
|
$buttonGroup.find('.is-checked').removeClass('is-checked');
|
|
$(this).addClass('is-checked');
|
|
});
|
|
});
|
|
</script>
|