added tags and location to a div with class 'filter' in video grid. install bower component 'isotope'

6_video.html

@@ -9,40 +9,37 @@ permalink: /video/
 <div id="video-roster" class="content container-fluid">
 
  {% for post in site.posts %}
-   
+
    {% for talk in post.talks %}
-   
+
    {% if talk.talk_video_url %}
-     
-     {% assign vimeo_id = talk.talk_video_url | remove:'https://vimeo.com/' %}     
-     
+
+     {% assign vimeo_id = talk.talk_video_url | remove:'https://vimeo.com/' %}
+
+     {% if talk.topics %}
+       {% 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="video-title">{{talk.title}}</div>
-       {% if talk.topics %}
-        <ul class="tags">
-         {% assign tags = (talk.topics | split:",") %}
-          {% for tag in tags | uniq %}
-           <li>{{tag}}</li>
-          {% endfor %}
-        </ul>
-       {% endif %}     
        <img class="playbutton" src="/images/play-button.png" />
        <div class="video-description"><p>{{talk.artist}} / {{talk.artist_website}} – {{talk.description}}</p></div>
-     </div> 
-     
-   {% endif %} 
-   
+     </div>
+
+   {% endif %}
+
    {% endfor %}
 
  {% endfor %}
- 
+
   <div id="videotext"></div>
 
   <div id="videoplayer">
     <div id="player"></div>
     <div id="close-button"></div>
   </div>
-  
+
 </div> <!-- container -->
 
 <script>
@@ -55,7 +52,7 @@ permalink: /video/
          $this.css('background-size', 'cover');
          //$this.css('height', (($this.width()/4)*3));
        });
-       
+
        $this.on('mouseover', function() {
          var offset = $this.offset();
          var center = jQuery(window).width()/2;

_includes/head.html

@@ -22,6 +22,7 @@
  <script src="{{ '/bower_components/jquery/dist/jquery.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
  <script src="{{ '/bower_components/bootstrap/dist/js/bootstrap.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
  <script src="{{ '/bower_components/vegas/dist/jquery.vegas.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
+ <script src="{{ '/bower_components/isotope/dist/isotope.pkgd.min.js' | prepend: site.baseurl }}" type="text/javascript"></script>
  <script src="{{ '/js/picbook.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
  <script src="{{ '/js/jquery.imagefill.min.js' | prepend: site.baseurl }}" type="text/javascript" ></script>
  <script src="{{ '/js/jquery.cookie.js' | prepend: site.baseurl }}" type="text/javascript" ></script>