Implement Galleries as JSON+JS for all themes

nikola/data/themes/base-jinja/templates/base.tmpl

@@ -22,5 +22,6 @@
     {{ body_end }}
     {{ template_hooks['body_end']() }}
     {{ base.late_load_js() }}
+    {% block extra_js %}{% endblock %}
 </body>
 </html>

nikola/data/themes/base-jinja/templates/gallery.tmpl

@@ -22,20 +22,78 @@
     {% endfor %}
     </ul>
     {% endif %}
-    {% if photo_array %}
-    <ul class="thumbnails">
-        {% for image in photo_array %}
-            <li><a href="{{ image['url'] }}" class="thumbnail image-reference" title="{{ image['title'] }}">
-                <img src="{{ image['url_thumb'] }}" alt="{{ image['title'] }}" /></a>
-        {% endfor %}
-    </ul>
-    {% endif %}
+
+    <div id="gallery_container"></div>
+
 {% if site_has_comments and enable_comments %}
     {{ comments.comment_form(None, permalink, title) }}
 {% endif %}
 {% endblock %}
 
 {% block extra_head %}
 {{ super() }}
+<!-- FIXME: this goes in some CSS -->
+<style type="text/css">
+.image-block {
+    display: inline-block;
+}
+.flowr_row {
+    width: 100%;
+}
+</style>
 <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
 {% endblock %}
+
+{% block extra_js %}
+<script>
+function createGallery() {
+    jQuery.getScript("/assets/js/flowr.plugin.js");
+    jQuery.getJSON('index.json', success = function(data) {
+        $("#gallery_container").flowr({
+        data : data,
+        height : {{ thumbnail_size }}*.6,
+        padding: 5,
+        rows: -1,
+        render : function(params) {
+            // Just return a div, string or a dom object, anything works fine
+            img = $("<img />").attr({
+                'src': params.itemData.url_thumb,
+                'width' : params.width,
+                'height' : params.height
+            }).css('max-width', '100%');
+            link = $( "<a></a>").attr({
+                'href': params.itemData.url,
+                'class': 'image-reference'
+            });
+            div = $("<div />").addClass('image-block').attr({
+                'title': params.itemData.title,
+                'data-toggle': "tooltip",
+            });
+            link.append(img);
+            div.append(link);
+//             div.hover(div.tooltip());
+            return div;
+        },
+        itemWidth : function(data) { return data.size.w; },
+        itemHeight : function(data) { return data.size.h; },
+        complete : function(params) {
+            if( jsonContent.length > params.renderedItems ) {
+                nextRenderList = jsonContent.slice( params.renderedItems );
+            }
+        }
+    });
+})};
+
+// Load JQuery if it's not there already
+if(typeof jQuery=='undefined') {
+    var headTag = document.getElementsByTagName("head")[0];
+    var jqTag = document.createElement('script');
+    jqTag.type = 'text/javascript';
+    jqTag.src = '//code.jquery.com/jquery-1.11.3.min.js';
+    jqTag.onload = createGallery;
+    headTag.appendChild(jqTag);
+} else {
+     createGallery();
+}
+</script>
+{% endblock %}

nikola/data/themes/base/templates/base.tmpl

@@ -22,5 +22,6 @@ ${template_hooks['extra_head']()}
     ${body_end}
     ${template_hooks['body_end']()}
     ${base.late_load_js()}
+    <%block name="extra_js"></%block>
 </body>
 </html>

nikola/data/themes/base/templates/gallery.tmpl

@@ -22,20 +22,78 @@
     % endfor
     </ul>
     %endif
-    %if photo_array:
-    <ul class="thumbnails">
-        %for image in photo_array:
-            <li><a href="${image['url']}" class="thumbnail image-reference" title="${image['title']}">
-                <img src="${image['url_thumb']}" alt="${image['title']}" /></a>
-        %endfor
-    </ul>
-    %endif
+
+    <div id="gallery_container"></div>
+
 %if site_has_comments and enable_comments:
     ${comments.comment_form(None, permalink, title)}
 %endif
 </%block>
 
 <%block name="extra_head">
 ${parent.extra_head()}
+<!-- FIXME: this goes in some CSS -->
+<style type="text/css">
+.image-block {
+    display: inline-block;
+}
+.flowr_row {
+    width: 100%;
+}
+</style>
 <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
 </%block>
+
+<%block name="extra_js">
+<script>
+function createGallery() {
+    jQuery.getScript("/assets/js/flowr.plugin.js");
+    jQuery.getJSON('index.json', success = function(data) {
+        $("#gallery_container").flowr({
+        data : data,
+        height : ${thumbnail_size}*.6,
+        padding: 5,
+        rows: -1,
+        render : function(params) {
+            // Just return a div, string or a dom object, anything works fine
+            img = $("<img />").attr({
+                'src': params.itemData.url_thumb,
+                'width' : params.width,
+                'height' : params.height
+            }).css('max-width', '100%');
+            link = $( "<a></a>").attr({
+                'href': params.itemData.url,
+                'class': 'image-reference'
+            });
+            div = $("<div />").addClass('image-block').attr({
+                'title': params.itemData.title,
+                'data-toggle': "tooltip",
+            });
+            link.append(img);
+            div.append(link);
+//             div.hover(div.tooltip());
+            return div;
+        },
+        itemWidth : function(data) { return data.size.w; },
+        itemHeight : function(data) { return data.size.h; },
+        complete : function(params) {
+            if( jsonContent.length > params.renderedItems ) {
+                nextRenderList = jsonContent.slice( params.renderedItems );
+            }
+        }
+    });
+})};
+
+// Load JQuery if it's not there already
+if(typeof jQuery=='undefined') {
+    var headTag = document.getElementsByTagName("head")[0];
+    var jqTag = document.createElement('script');
+    jqTag.type = 'text/javascript';
+    jqTag.src = '//code.jquery.com/jquery-1.11.3.min.js';
+    jqTag.onload = createGallery;
+    headTag.appendChild(jqTag);
+} else {
+     createGallery();
+}
+</script>
+</%block>

nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl

@@ -17,47 +17,40 @@
     {% if folders %}
     <ul>
     {% for folder, ftitle in folders %}
-        <li><a href="{{ folder }}"><i class="icon-folder-open"></i>&nbsp;{{ ftitle }}</a></li>
+        <li><a href="{{ folder }}"><i
+        class="icon-folder-open"></i>&nbsp;{{ ftitle }}</a></li>
     {% endfor %}
     </ul>
     {% endif %}
 
-<div id="gallery_container"></div>
-{% if photo_array %}
-<noscript>
-<ul class="thumbnails">
-    {% for image in photo_array %}
-        <li><a href="{{ image['url'] }}" class="thumbnail image-reference" title="{{ image['title'] }}">
-            <img src="{{ image['url_thumb'] }}" alt="{{ image['title'] }}" /></a>
-    {% endfor %}
-</ul>
-</noscript>
-{% endif %}
+    <div id="gallery_container"></div>
+
 {% if site_has_comments and enable_comments %}
-{{ comments.comment_form(None, permalink, title) }}
+    {{ comments.comment_form(None, permalink, title) }}
 {% endif %}
 {% endblock %}
 
 {% block extra_head %}
 {{ super() }}
-<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
+<!-- FIXME: this goes in some CSS -->
 <style type="text/css">
-    .image-block {
-        display: inline-block;
-    }
-    .flowr_row {
-        width: 100%;
-    }
-    </style>
+.image-block {
+    display: inline-block;
+}
+.flowr_row {
+    width: 100%;
+}
+</style>
+<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
 {% endblock %}
 
-
 {% block extra_js %}
-<script src="/assets/js/flowr.plugin.js"></script>
 <script>
-jsonContent = {{ photo_array_json }};
-$("#gallery_container").flowr({
-        data : jsonContent,
+function createGallery() {
+    jQuery.getScript("/assets/js/flowr.plugin.js");
+    jQuery.getJSON('index.json', success = function(data) {
+        $("#gallery_container").flowr({
+        data : data,
         height : {{ thumbnail_size }}*.6,
         padding: 5,
         rows: -1,
@@ -78,7 +71,7 @@ $("#gallery_container").flowr({
             });
             link.append(img);
             div.append(link);
-            div.hover(div.tooltip());
+//             div.hover(div.tooltip());
             return div;
         },
         itemWidth : function(data) { return data.size.w; },
@@ -89,6 +82,19 @@ $("#gallery_container").flowr({
             }
         }
     });
+})};
+
+// Load JQuery if it's not there already
+if(typeof jQuery=='undefined') {
+    var headTag = document.getElementsByTagName("head")[0];
+    var jqTag = document.createElement('script');
+    jqTag.type = 'text/javascript';
+    jqTag.src = '//code.jquery.com/jquery-1.11.3.min.js';
+    jqTag.onload = createGallery;
+    headTag.appendChild(jqTag);
+} else {
+     createGallery();
+}
 $("a.image-reference").colorbox({rel:"gal", maxWidth:"100%",maxHeight:"100%",scalePhotos:true});
 </script>
 {% endblock %}