reusable gallery includes; primitive, dynamic loopdir path support

_includes/gallery_list.html

@@ -0,0 +1,5 @@
+<div class="list-gallery">
+    {% capture path %}gallery/{{ include.gallery }}{% endcapture %}
+    {% loopdir path:path match:"*.md" sort:"ordering" %}<a href="/{{ item.fullname }}.html"><img alt="Photo: {{ item.title }}" height="200" src="{{ site.asset_prefix }}/{{ item.fullname }}~200x200.jpg" title="{{ item.title }}" width="200" /></a>{% endloopdir %}
+    }
+</div>

_includes/gallery_map.html

@@ -0,0 +1,46 @@
+<div id="googlemap" style="height:400px;margin-top:8px;"></div>
+<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDIwEZirrDvuvDkhTtON8OqpmH7jP7DW4&amp;sensor=false"></script>
+<script type="text/javascript">
+    google.maps.event.addDomListener(
+        window,
+        'load',
+        function () {
+            var map = new google.maps.Map(
+                document.getElementById("googlemap"),
+                {
+                    center : new google.maps.LatLng({{ include.latitude }}, {{ include.longitude }}),
+                    mapTypeId : google.maps.MapTypeId.TERRAIN,
+                    zoom : {{ include.zoom }}
+                }
+            );
+
+            {% capture path %}gallery/{{ include.gallery }}{% endcapture %}
+            {% loopdir path:path match:"*.md" sort:"ordering" %}{% if item.location %}
+                (function () {
+                    var wo = false;
+                    var m = new google.maps.Marker({
+                        position: new google.maps.LatLng({{ item.location.latitude }}, {{ item.location.longitude }}),
+                        map : map,
+                        title : "{{ item.title }}"
+                    });
+                    var w = new google.maps.InfoWindow({
+                        content: '<div style="margin-bottom:5px;">{{ item.title|replace:"'","\\'" }}</div><a href="/{{ item.fullname }}.html"><img alt="Photo: {{ item.title|replace:"'","\\'" }}" height="200" src="{{ site.asset_prefix }}/{{ item.fullname }}~200x200.jpg" title="{{ item.title|replace:"'","\\'" }}" width="200" /></a>'
+                    });
+                    google.maps.event.addListener(
+                        m,
+                        'click',
+                        function() {
+                            if (wo) {
+                                w.close();
+                            } else {
+                                w.open(map, m);
+                            }
+
+                            wo = !wo;
+                        }
+                    );
+                })();
+            {% endif %}{% endloopdir %}
+        }
+    );
+</script>

_plugins/loopdir.rb

@@ -16,7 +16,12 @@ module Jekyll
       @attributes['sort'] = 'path';
  
       markup.scan(Liquid::TagAttributes) do | key, value |
-        @attributes[key] = value
+        if 'path' == key
+          # path can be dynamic to support includes
+          @attributes['path'] = Liquid::Variable.new(value)
+        else
+          @attributes[key] = value.gsub /"(.*)"/, '\1'
+        end
       end
 
       if @attributes['path'].nil?
@@ -37,7 +42,9 @@ module Jekyll
  
       items = []
 
-      Dir.glob(File.join(@attributes['path'], @attributes['match'])).each do |pathname|
+      path = @attributes['path'].render(context)
+ 
+      Dir.glob(File.join(path, @attributes['match'])).each do |pathname|
         if @attributes['parse']
           item = {}
 
@@ -59,6 +66,7 @@ module Jekyll
         end
 
         item['name'] = File.basename(pathname, @attributes['match'].sub('*', ''))
+        item['fullname'] = path + '/' + item['name']
         item['path'] = pathname
 
         items.push item

gallery/2014-london-iceland-trip/index.html

@@ -7,6 +7,4 @@ title : London & Iceland Trip
     My trip to London and Iceland…
 </p>
 
-<div class="list-gallery">
+{% include gallery_list.html gallery='2014-london-iceland-trip' %}
-    {% loopdir path:gallery/2014-london-iceland-trip match:*.md sort:ordering %}<a href="/gallery/2014-london-iceland-trip/{{ item.name }}.html"><img alt="Photo: {{ item.title }}" height="200" src="{{ site.asset_prefix }}/gallery/2014-london-iceland-trip/{{ item.name }}~200x200.jpg" title="{{ item.title }}" width="200" /></a>{% endloopdir %}
-</div>

gallery/2014-london-iceland-trip/map.html

@@ -0,0 +1,6 @@
+---
+layout: post
+title: London & Iceland Trip
+---
+
+{% include gallery_map.html gallery='2014-london-iceland-trip' latitude=59.1116508 longitude=-10.4266682 zoom=4 %}