1 files changed, 66 insertions, 16 deletions
diff --git a/nikola/data/themes/base-jinja/templates/gallery.tmpl b/nikola/data/themes/base-jinja/templates/gallery.tmpl
index 0a53ebe..d425106 100644
--- a/nikola/data/themes/base-jinja/templates/gallery.tmpl
+++ b/nikola/data/themes/base-jinja/templates/gallery.tmpl
@@ -1,11 +1,12 @@
 {#  -*- coding: utf-8 -*- #}
 {% extends 'base.tmpl' %}
 {% import 'comments_helper.tmpl' as comments with context %}
-{% import 'crumbs.tmpl' as ui with context %}
+{% import 'ui_helper.tmpl' as ui with context %}
+{% import 'post_helper.tmpl' as post_helper with context %}
 {% block sourcelink %}{% endblock %}
 
 {% block content %}
-    {{ ui.bar(crumbs) }}
+    {{ ui.breadcrumbs(crumbs) }}
     {% if title %}
     <h1>{{ title|e }}</h1>
     {% endif %}
@@ -15,21 +16,39 @@
     </p>
     {% endif %}
     {% if folders %}
-    <ul>
-    {% for folder, ftitle in folders %}
-        <li><a href="{{ folder }}"><i
-        class="icon-folder-open"></i>&nbsp;{{ ftitle }}</a></li>
-    {% 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>
+        {% if galleries_use_thumbnail %}
+            {% for (folder, ftitle, fpost) in folders %}
+            <div class="thumnbnail-container">
+                <a href="{{ folder }}" class="thumbnail image-reference" title="{{ ftitle|e }}">
+                    {% if fpost and fpost.previewimage %}
+                        <img src="{{ fpost.previewimage }}" alt="{{ ftitle|e }}" loading="lazy" style="max-width:{{ thumbnail_size }}px; max-height:{{ thumbnail_size }}px;" />
+                    {% else %}
+                        <div style="height: {{ thumbnail_size }}px; width: {{ thumbnail_size }}px; background-color: #eee;"></div>
+                    {% endif %}
+                <p class="thumbnail-caption">{{ ftitle|e }}</p>
+                </a>
+            </div>
+            {% endfor %}
+        {% else %}
+            <ul>
+            {% for folder, ftitle in folders %}
+                <li><a href="{{ folder }}">📂&nbsp;{{ ftitle|e }}</a></li>
+            {% endfor %}
+            </ul>
+        {% endif %}
     {% 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']|e }}">
+            <img src="{{ image['url_thumb'] }}" alt="{{ image['title']|e }}" loading="lazy" /></a>
+    {% endfor %}
+</ul>
+</noscript>
+{% endif %}
 {% if site_has_comments and enable_comments %}
     {{ comments.comment_form(None, permalink, title) }}
 {% endif %}
@@ -38,4 +57,35 @@
 {% block extra_head %}
 {{ super() }}
 <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
+<style type="text/css">
+    #gallery_container {
+        position: relative;
+    }
+    .image-block {
+        position: absolute;
+    }
+</style>
+{% if translations|length > 1 %}
+    {% for langname in translations.keys() %}
+         {% if langname != lang %}
+             <link rel="alternate" hreflang="{{ langname }}" href="{{ _link('gallery', gallery_path, langname) }}">
+         {% endif %}
+    {% endfor %}
+{% endif %}
+<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
+{% if post %}
+    {{ post_helper.open_graph_metadata(post) }}
+    {{ post_helper.twitter_card_information(post) }}
+{% endif %}
+{% endblock %}
+
+{% block extra_js %}
+<script src="/assets/js/justified-layout.min.js"></script>
+<script src="/assets/js/gallery.min.js"></script>
+<script>
+var jsonContent = {{ photo_array_json }};
+var thumbnailSize = {{ thumbnail_size }};
+renderGallery(jsonContent, thumbnailSize);
+window.addEventListener('resize', function(){renderGallery(jsonContent, thumbnailSize)});
+</script>
 {% endblock %}