added video filtering function

6_video.html

@@ -6,6 +6,32 @@ visible: false
 permalink: /video/
 ---
 
+{% assign allTopics = "" | split:"|"  %}
+{% for post in site.posts %}
+  {% for talk in post.talks %}
+    {% if talk.talk_video_url %}
+      {% for topic in talk.topics %}
+        {% assign talkTopics = topic | split:","  %}
+        {% for talkTopic in talkTopics %}
+        {% assign tt = talkTopic | strip | downcase %}
+          {% unless allTopics contains tt %}
+            {% assign allTopics = allTopics | push: tt %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+{% assign allTopicsABC = allTopics | sort %}
+
+<div class="button-group filter-button-group">
+  <button data-filter="*">show all</button>
+  {% for thisTopic in allTopicsABC %}
+    <button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
+  {% endfor %}
+</div>
+
 <div id="video-roster" class="content container-fluid">
 
  {% for post in site.posts %}
@@ -20,11 +46,10 @@ permalink: /video/
        {% assign tags = (talk.topics | split:",") %}
      {% endif %}
 
-     <div class="videobox" vimeo="{{vimeo_id}}">
-       <div class="filter {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}}"></div>
+     <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}}" vimeo="{{vimeo_id}}">
        <div class="video-title">{{talk.title}}</div>
        <img class="playbutton" src="/images/play-button.png" />
-       <div class="video-description"><p>{{talk.artist}} / {{talk.artist_website}} – {{talk.description}}</p></div>
+       <div class="video-description"><p><span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – <span class="video-session">#{{ post.number }}</span>: {{talk.description}}</p></div>
      </div>
 
    {% endif %}
@@ -95,5 +120,17 @@ permalink: /video/
        });
 
      });
+     $('#video-roster').isotope({
+       // options
+       itemSelector: '.videobox'
+     });
+     // init Isotope
+      var $grid = $('#video-roster').isotope({
+      });
+      // filter items on button click
+      $('.filter-button-group').on( 'click', 'button', function() {
+        var filterValue = $(this).attr('data-filter');
+        $grid.isotope({ filter: filterValue });
+      });
    });
  </script>

_site/css/video.css

@@ -1,3 +1,12 @@
+.button-group
+{
+  margin: 50px 0 30px 0;
+}
+
+button
+{
+  color: #000;
+}
 
 #video-roster {
   background-color:#000;
@@ -106,4 +115,4 @@
   right:0;
   background-image:url("/images/close-button-large.png");
   background-size:cover;
-}
+}