hq/sakrecoer-mother-web
hq/sakrecoer-mother-web
4
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

layout with isotope

Browse source
This commit is contained in:
Set Sakrecoer 2019-11-05 11:31:36 +01:00
parent 20ebba4337
commit 864b1ccc7f
4 changed files with 85 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

65
musicindex.html
View file

@ -2,47 +2,48 @@
layout: default
sitemap: false
---
<div class="button-group filters-button-group">
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button is-checked" data-filter="*">show all</button>
<!-- create categories array-->
{% assign categories_array = "" | split:"|" %}
<!-- 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 %}
<!--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 %}
<!--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="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 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