Allow multiple gallery view includes per page – handle conflicting html ids

_includes/collection_gallery.html

@@ -1,42 +1,53 @@
 {% assign collection = site[include.collection] %}
 {% assign undefined = include.undefined | default: 'undefined' %}
+{% assign id = include.id | default: include | jsonify | slugify %}
 
-{% if include.only and include.facet_by %}
+{% if include.only.size > 0 %}
   {% assign subset = collection | where: include.facet_by, include.only | sort: 'order' %}
+{% else %}
+  {% assign subset = nil %}
 {% endif %}
 
-<div id='wax-gallery-{{ include.collection }}-container' class='wax-gallery-container full-width'>
+<div id='{{ id }}-container' class='wax-gallery-container full-width'>
   <div class='wax-inline-container'>
-    <div id="{{ include.collection }}-facet-buttons" class="facet-buttons"></div>
-    <div id="wax-gallery-{{ include.collection }}" class="wax-gallery"></div>
+    {% if include.facet_by %}
+    <div id="{{ id }}-facet-buttons" class="facet-buttons"></div>
+    {% endif %}
+    <div id="wax-gallery-{{ id }}" class="wax-gallery"></div>
   </div>
 </div>
 
+{% if subset.size > 0 %}
+  <script type="text/javascript">
+    $( document ).ready(function() {
+      let container = $('#{{ id }}-container');
+      let gallery = $('#wax-gallery-{{ id }}');
+      let buttonDiv = $('#{{ id }}-facet-buttons');
 
-<script type="text/javascript">
-  $( document ).ready(function() {
-    var container = $('#wax-gallery-{{ include.collection }}-container');
-    var gallery = $('#wax-gallery-{{ include.collection }}');
-    var buttonDiv = $('#{{ include.collection }}-facet-buttons');
-
-    {% if subset %}
       {% for item in subset %}
         {%- capture item_html -%}
           "<div class='gallery-item {{ item[include.facet_by] | slugify }} all'><a href='{{ item.url | absolute_url }}'><div class='hovereffect'><img class='img-responsive gallery-thumb' src='{{ item.thumbnail | default: site.default_thumb | absolute_url }}' alt='{{ item.label | escape }}'/><div class='overlay'><p class='info'>{{ item.label | escape }}</p></div></div></a></div>"
         {%- endcapture -%}
         gallery.append({{ item_html | strip_newlines }});
       {% endfor %}
-    {% else %}
+    });
+  </script>
+{% else %}
+  <script type="text/javascript">
+    $( document ).ready(function() {
+      let container = $('#{{ id }}-container');
+      let gallery = $('#wax-gallery-{{ id }}');
+      let buttonDiv = $('#{{ id }}-facet-buttons');
+
+
       {% for item in collection %}
         {%- capture item_html -%}
           "<div class='gallery-item {{ item[include.facet_by] | default: undefined | slugify }} all'><a href='{{ item.url | absolute_url }}'><div class='hovereffect'><img class='img-responsive gallery-thumb' src='{{ item.thumbnail | default: site.default_thumb | absolute_url }}' alt='{{ item.label | escape }}'/><div class='overlay'><p class='info'>{{ item.label | escape }}</p></div></div></a></div>"
         {%- endcapture -%}
         gallery.append({{ item_html | strip_newlines }});
       {% endfor %}
-    {% endif %}
 
-    {% if include.facet_by %}
-      {% unless subset %}
+      {% if include.facet_by %}
         var facets = Array.from(new Set([{%- for item in collection -%}'{{ item[include.facet_by] | default: undefined | slugify }}'{% unless forloop.last %}, {% endunless %}{%- endfor -%}]));
         buttonDiv.append("<button class='btn facet active' data-filter='all'>show all</button>");
 
@@ -45,15 +56,15 @@
         }
 
         $(document).ready(function(){
-          $(".facet").click(function(){
+          $("#{{ id }}-container .facet").click(function(){
             var filterValue = $(this).attr('data-filter');
-            $('.facet').removeClass('active');
+            $('#{{ id }}-container .facet').removeClass('active');
             $(this).addClass('active');
-            if(filterValue == 'all') { $('.all').show('slow'); }
-            else { $('.all').hide('slow'); $(`.${filterValue}`).show('slow'); }
+            if(filterValue == 'all') { $('#{{ id }}-container .all').show('slow'); }
+            else { $('#{{ id }}-container .all').hide('slow'); $(`.${filterValue}`).show('slow'); }
           });
         });
-      {% endunless %}
-    {% endif %}
-  });
-</script>
+      {% endif %}
+    });
+  </script>
+{% endif %}

_sass/_wax.scss

@@ -440,7 +440,6 @@ search box
   }
   .wax-gallery {
     margin: $margin auto;
-    min-height: 30vh;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;

index.md

@@ -14,4 +14,5 @@ The collection items in this demo are from The Museum of Islamic Art, Qatar, (co
 
 ### Browse the Collection
 
+#### By Item Type
 {% include collection_gallery.html facet_by='object_type' collection='qatar' %}

pages/collection.md

@@ -6,5 +6,16 @@ permalink: /collection/
 
 This site's sample collection comprises a set of objects, each of which is represented by one or more images. The collection items in this demo are from The Museum of Islamic Art, Qatar, (courtesy of [WikiMedia](https://commons.wikimedia.org/wiki/Category:Google_Art_Project_works_in_The_Museum_of_Islamic_Art,_Qatar) and [Google Art Project](https://www.google.com/culturalinstitute/about/artproject/)) and The Qatar National Library (via [World Digital Library](https://www.wdl.org/en/)).
 
+## By Location
+{% include collection_gallery.html facet_by='location' collection='qatar' %}
 
-{% include collection_gallery.html collection='qatar' facet_by='object_type' %}
+## By Object Type
+
+### Manuscripts
+{% include collection_gallery.html facet_by='object_type' only='manuscript' collection='qatar' %}
+### Portraits
+{% include collection_gallery.html facet_by='object_type' only='portrait' collection='qatar' %}
+### Maps
+{% include collection_gallery.html facet_by='object_type' only='map' collection='qatar' %}
+### Panels
+{% include collection_gallery.html facet_by='object_type' only='panel' collection='qatar' %}