sakrecoer-mother-web/musicindex.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>&#9998;</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>