--- 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>