From d98e130168339263677c546c3bdc62d0ff9620d7 Mon Sep 17 00:00:00 2001
From: thomasdn <thomasdn@gmail.com>
Date: Sun, 11 Jul 2021 14:51:38 +0200
Subject: [PATCH 1/2] Added common subtemplate for album items to be included
 from album.html and album_list.html

---
 sigal/themes/galleria/templates/album.html    | 230 +----------------
 .../galleria/templates/album_items.html       | 231 ++++++++++++++++++
 .../themes/galleria/templates/album_list.html |   8 +-
 3 files changed, 235 insertions(+), 234 deletions(-)
 create mode 100644 sigal/themes/galleria/templates/album_items.html

diff --git a/sigal/themes/galleria/templates/album.html b/sigal/themes/galleria/templates/album.html
index 3187519..65500da 100644
--- a/sigal/themes/galleria/templates/album.html
+++ b/sigal/themes/galleria/templates/album.html
@@ -14,235 +14,7 @@
 {% endblock %}
 
 {% block content %}
-        <div class="icons">
-          {% if settings.show_map and album.show_map %}
-          <a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
-            title="Show/Hide map" alt="Show/Hide Map (m)" /></a>
-          {% endif %}
-          <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
-            title="Fullscreen" alt="Fullscreen (f)" /></a>
-        </div>
-        <div id="gallery"></div>
+        {% include 'album_items.html' %}
 
-        {% if album.zip %}
-        <div id="additionnal-infos" class="row">
-          <p><a href="{{ album.zip }}"
-                title="Download a zip archive with all images">Download ZIP</a>
-          </p>
-        </div>
-        {% endif %}
-
-        {% if album.description %}
-        <div id="description">
-          {{ album.description }}
-        </div>
-        {% endif %}
 {% endblock %}
 
-{% block late_js %}
-    {% macro img_description(media) -%}
-      {%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
-	    {# clean up tags and whitespace, including newlines, in the description #}
-      {%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
-      {%- if media.exif -%}
-        <div class='film-meta'>
-        {%- if media.exif.iso -%}<abbr title='film speed'>{{ media.exif.iso }}</abbr> {%- endif -%}
-        {%- if media.exif.exposure -%}<abbr title='exposure'>{{ media.exif.exposure }}</abbr> {%- endif -%}
-        {%- if media.exif.fstop -%}<abbr title='aperture'>{{ media.exif.fstop }}</abbr> {%- endif -%}
-        {%- if media.exif.focal -%}<abbr title='focal length'>{{ media.exif.focal }}</abbr> {%- endif -%}
-        </div>
-        {%- if media.exif.gps -%}
-          <a title='location' href='https://www.openstreetmap.org/?mlat={{ media.exif.gps.lat }}&amp;mlon={{ media.exif.gps.lon}}&amp;zoom=12&amp;layers=M' target='_blank' class='map' >{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }}{{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }}</a>
-        {%- endif -%}
-        {%- if media.exif.Make or media.exif.Model -%}
-          <abbr title='camera make and model'>{{ media.exif.Make }} {{ media.exif.Model }}</abbr>
-        {%- endif -%}
-        {%- if media.exif.datetime -%}
-          <abbr title='date'>{{ media.exif.datetime }}</abbr>
-        {%- endif -%}
-      {% endif %}
-    {%- endmacro %}
-
-    <script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
-    {% if settings.show_map and album.show_map %}
-    <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
-    <script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
-    {% endif %}
-    <script src="{{ theme.url }}/galleria.min.js"></script>
-    <script src="{{ theme.url }}/themes/{{ settings.galleria_theme }}/galleria.{{ settings.galleria_theme }}.min.js"></script>
-    <script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
-    <script>
-    var data = [
-      {% for media in album.medias -%}
-      {
-        title: "{{ media.title }}",
-        description: "{{ img_description(media) | e }}",
-        thumb: "{{ media.thumbnail }}",
-        {% if media.big %}
-        big: "{{ media.big_url }}",
-        {% endif %}
-        {% if media.type == "image" %}
-        image: "{{ media.url }}"
-        {% endif %}
-        {% if media.type == "video" %}
-        image: "{{ theme.url }}/img/empty.png",
-        layer: "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"
-        {% endif %}
-      },
-      {% endfor %}
-    ]
-
-    {% if settings.show_map and album.show_map %}
-    var selected =-1;
-    /* Init markers */
-    var features = new Array();
-
-    function selectMarker(marker) {
-        if (selected >= 0 && features[selected] != null) {
-            features[selected].setStyle({
-                radius: 7,
-                fillColor: "#888a85",
-                color: "#2e3436",
-                weight: 1,
-                fillOpacity: 1,
-                clickable: true
-            });
-            features[selected].redraw();
-        }
-
-        if (marker != null) {
-          marker.setStyle({
-              radius: 7,
-              fillColor: "#cc0000",
-              color: "#ef2929",
-              weight: 1,
-              fillOpacity: 1,
-              clickable: true
-          });
-          marker.bringToFront();
-          map.panTo(marker.getLatLng());
-        }
-    }
-
-    function onFeatureClick(e) {
-      selectMarker(e.target);
-      var id = features.indexOf(e.target);
-      var galleria = $("#gallery").data("galleria");
-      if (selected != id) {
-          selected = id;
-          galleria.show(id);
-      }
-    }
-
-    function init_map() {
-        /* Make sure we have the map div */
-        if ($("#galleria-map").length == 0) {
-            $(".galleria-stage").after("<div id='galleria-map'></div>");
-            map = L.map('galleria-map');
-            L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
-            map.setView([51.505, -0.09], 12);
-
-            {% for media in album.medias %}
-              {% if media.exif and media.exif.gps %}
-            var lat = {{ media.exif.gps.lat }};
-            var lon = {{ media.exif.gps.lon }};
-            var marker = L.circleMarker([lat, lon], {
-                radius: 7,
-                fillColor: "#888a85",
-                color: "#2e3436",
-                weight: 1,
-                fillOpacity: 1,
-                clickable: true
-            });
-            marker.on('click', onFeatureClick);
-            features.push(marker);
-            marker.addTo(map);
-              {% else %}
-            features.push(null);
-              {% endif %}
-            {% endfor %}
-
-            selectMarker(features[selected]);
-        }
-    }
-
-    function galleryMapToggle() {
-        /* Make sure the map is loaded */
-        init_map();
-
-        var stage = $(".galleria-stage");
-        var mapdiv = $("#galleria-map");
-        var icons = $(".icons");
-
-        if (stage.attr.hidden == true) {
-            stage.attr.hidden = false;
-            $(".galleria-info-link").show();
-            mapdiv.hide();
-            stage.css("opacity", "1");
-            icons.css("background-color", "inherit");
-            /* Change display of the Map link */
-            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/map.png";
-        } else {
-            stage.attr.hidden = true;
-            $(".galleria-info-link").hide();
-            mapdiv.show();
-            /* Play with the stage opacity otherwise galleria will go mad */
-            stage.css("opacity", "0");
-            icons.css("background-color", "#333");
-            /* Change display of the Map link */
-            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/photo.png";
-        }
-    }
-    {% endif %}
-
-    Galleria.ready(function() {
-        /*
-        load thumbnails after gallery setup, and download has started
-        for the main images, but before the loading of map tiles starts
-        in the background. This ensures visible elements are prioritised
-        over non-visible elements
-
-        The choice to lazy load thumbnails in batches of 50 was not made
-        scientifically. Other numbers may yield better performance.
-        */
-        this.lazyLoadChunks( 50 );
-
-        this.attachKeyboard({
-            right: this.next,
-            left: this.prev,
-            /* Toggle fullscreen display on press of 'f' key */
-            0x46: this.toggleFullscreen,
-            {% if settings.show_map and album.show_map %}
-            /* Toggle map display on press of 'm' key */
-            0x4D: galleryMapToggle,
-            {% endif %}
-        });
-
-        var gallery = this;
-        $('#fullscreen').click(function() {
-          gallery.toggleFullscreen();
-        });
-
-        $('.icons').appendTo(this.$('container'));
-
-        {% if settings.show_map and album.show_map %}
-        $(".gallery-map-toggle").click(galleryMapToggle);
-        this.bind('loadfinish', function(e) {
-            /*  Triggers every time Galleria has finished loading an image.*/
-            if (selected != e.index) {
-                selectMarker(features[e.index]);
-                selected = e.index;
-            }
-        });
-        {% endif %}
-    });
-
-    Galleria.configure({
-        imageCrop: false,
-        transition: "fade",
-        thumbnails: "lazy"
-    });
-    Galleria.run("#gallery", {dataSource: data});
-
-    </script>
-{% endblock %}
diff --git a/sigal/themes/galleria/templates/album_items.html b/sigal/themes/galleria/templates/album_items.html
new file mode 100644
index 0000000..d8cae58
--- /dev/null
+++ b/sigal/themes/galleria/templates/album_items.html
@@ -0,0 +1,231 @@
+        <div class="icons">
+          {% if settings.show_map and album.show_map %}
+          <a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
+            title="Show/Hide map" alt="Show/Hide Map (m)" /></a>
+          {% endif %}
+          <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
+            title="Fullscreen" alt="Fullscreen (f)" /></a>
+        </div>
+        <div id="gallery"></div>
+
+        {% if album.zip %}
+        <div id="additionnal-infos" class="row">
+          <p><a href="{{ album.zip }}"
+                title="Download a zip archive with all images">Download ZIP</a>
+          </p>
+        </div>
+        {% endif %}
+
+        {% if album.description %}
+        <div id="description">
+          {{ album.description }}
+        </div>
+        {% endif %}
+
+{% block late_js %}
+    {% macro img_description(media) -%}
+      {%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
+	    {# clean up tags and whitespace, including newlines, in the description #}
+      {%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
+      {%- if media.exif -%}
+        <div class='film-meta'>
+        {%- if media.exif.iso -%}<abbr title='film speed'>{{ media.exif.iso }}</abbr> {%- endif -%}
+        {%- if media.exif.exposure -%}<abbr title='exposure'>{{ media.exif.exposure }}</abbr> {%- endif -%}
+        {%- if media.exif.fstop -%}<abbr title='aperture'>{{ media.exif.fstop }}</abbr> {%- endif -%}
+        {%- if media.exif.focal -%}<abbr title='focal length'>{{ media.exif.focal }}</abbr> {%- endif -%}
+        </div>
+        {%- if media.exif.gps -%}
+          <a title='location' href='https://www.openstreetmap.org/?mlat={{ media.exif.gps.lat }}&amp;mlon={{ media.exif.gps.lon}}&amp;zoom=12&amp;layers=M' target='_blank' class='map' >{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }}{{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }}</a>
+        {%- endif -%}
+        {%- if media.exif.Make or media.exif.Model -%}
+          <abbr title='camera make and model'>{{ media.exif.Make }} {{ media.exif.Model }}</abbr>
+        {%- endif -%}
+        {%- if media.exif.datetime -%}
+          <abbr title='date'>{{ media.exif.datetime }}</abbr>
+        {%- endif -%}
+      {% endif %}
+    {%- endmacro %}
+
+    <script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
+    {% if settings.show_map and album.show_map %}
+    <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
+    <script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
+    {% endif %}
+    <script src="{{ theme.url }}/galleria.min.js"></script>
+    <script src="{{ theme.url }}/themes/{{ settings.galleria_theme }}/galleria.{{ settings.galleria_theme }}.min.js"></script>
+    <script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
+    <script>
+    var data = [
+      {% for media in album.medias -%}
+      {
+        title: "{{ media.title }}",
+        description: "{{ img_description(media) | e }}",
+        thumb: "{{ media.thumbnail }}",
+        {% if media.big %}
+        big: "{{ media.big_url }}",
+        {% endif %}
+        {% if media.type == "image" %}
+        image: "{{ media.url }}"
+        {% endif %}
+        {% if media.type == "video" %}
+        image: "{{ theme.url }}/img/empty.png",
+        layer: "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"
+        {% endif %}
+      },
+      {% endfor %}
+    ]
+
+    {% if settings.show_map and album.show_map %}
+    var selected =-1;
+    /* Init markers */
+    var features = new Array();
+
+    function selectMarker(marker) {
+        if (selected >= 0 && features[selected] != null) {
+            features[selected].setStyle({
+                radius: 7,
+                fillColor: "#888a85",
+                color: "#2e3436",
+                weight: 1,
+                fillOpacity: 1,
+                clickable: true
+            });
+            features[selected].redraw();
+        }
+
+        if (marker != null) {
+          marker.setStyle({
+              radius: 7,
+              fillColor: "#cc0000",
+              color: "#ef2929",
+              weight: 1,
+              fillOpacity: 1,
+              clickable: true
+          });
+          marker.bringToFront();
+          map.panTo(marker.getLatLng());
+        }
+    }
+
+    function onFeatureClick(e) {
+      selectMarker(e.target);
+      var id = features.indexOf(e.target);
+      var galleria = $("#gallery").data("galleria");
+      if (selected != id) {
+          selected = id;
+          galleria.show(id);
+      }
+    }
+
+    function init_map() {
+        /* Make sure we have the map div */
+        if ($("#galleria-map").length == 0) {
+            $(".galleria-stage").after("<div id='galleria-map'></div>");
+            map = L.map('galleria-map');
+            L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
+            map.setView([51.505, -0.09], 12);
+
+            {% for media in album.medias %}
+              {% if media.exif and media.exif.gps %}
+            var lat = {{ media.exif.gps.lat }};
+            var lon = {{ media.exif.gps.lon }};
+            var marker = L.circleMarker([lat, lon], {
+                radius: 7,
+                fillColor: "#888a85",
+                color: "#2e3436",
+                weight: 1,
+                fillOpacity: 1,
+                clickable: true
+            });
+            marker.on('click', onFeatureClick);
+            features.push(marker);
+            marker.addTo(map);
+              {% else %}
+            features.push(null);
+              {% endif %}
+            {% endfor %}
+
+            selectMarker(features[selected]);
+        }
+    }
+
+    function galleryMapToggle() {
+        /* Make sure the map is loaded */
+        init_map();
+
+        var stage = $(".galleria-stage");
+        var mapdiv = $("#galleria-map");
+        var icons = $(".icons");
+
+        if (stage.attr.hidden == true) {
+            stage.attr.hidden = false;
+            $(".galleria-info-link").show();
+            mapdiv.hide();
+            stage.css("opacity", "1");
+            icons.css("background-color", "inherit");
+            /* Change display of the Map link */
+            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/map.png";
+        } else {
+            stage.attr.hidden = true;
+            $(".galleria-info-link").hide();
+            mapdiv.show();
+            /* Play with the stage opacity otherwise galleria will go mad */
+            stage.css("opacity", "0");
+            icons.css("background-color", "#333");
+            /* Change display of the Map link */
+            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/photo.png";
+        }
+    }
+    {% endif %}
+
+    Galleria.ready(function() {
+        /*
+        load thumbnails after gallery setup, and download has started
+        for the main images, but before the loading of map tiles starts
+        in the background. This ensures visible elements are prioritised
+        over non-visible elements
+
+        The choice to lazy load thumbnails in batches of 50 was not made
+        scientifically. Other numbers may yield better performance.
+        */
+        this.lazyLoadChunks( 50 );
+
+        this.attachKeyboard({
+            right: this.next,
+            left: this.prev,
+            /* Toggle fullscreen display on press of 'f' key */
+            0x46: this.toggleFullscreen,
+            {% if settings.show_map and album.show_map %}
+            /* Toggle map display on press of 'm' key */
+            0x4D: galleryMapToggle,
+            {% endif %}
+        });
+
+        var gallery = this;
+        $('#fullscreen').click(function() {
+          gallery.toggleFullscreen();
+        });
+
+        $('.icons').appendTo(this.$('container'));
+
+        {% if settings.show_map and album.show_map %}
+        $(".gallery-map-toggle").click(galleryMapToggle);
+        this.bind('loadfinish', function(e) {
+            /*  Triggers every time Galleria has finished loading an image.*/
+            if (selected != e.index) {
+                selectMarker(features[e.index]);
+                selected = e.index;
+            }
+        });
+        {% endif %}
+    });
+
+    Galleria.configure({
+        imageCrop: false,
+        transition: "fade",
+        thumbnails: "lazy"
+    });
+    Galleria.run("#gallery", {dataSource: data});
+
+    </script>
+{% endblock %}
diff --git a/sigal/themes/galleria/templates/album_list.html b/sigal/themes/galleria/templates/album_list.html
index 9670e21..558c6ad 100644
--- a/sigal/themes/galleria/templates/album_list.html
+++ b/sigal/themes/galleria/templates/album_list.html
@@ -24,10 +24,8 @@
             {% endfor %}
           </ul>
         </div>
+        {% include 'album_items.html' %}
+
+
 
-        {% if album.description %}
-        <div id="description">
-          {{ album.description }}
-        </div>
-        {% endif %}
 {% endblock %}

From 5e9ba3e3bd09685d2cc8841277a8e07fa20394e0 Mon Sep 17 00:00:00 2001
From: thomasdn <thomasdn@users.noreply.github.com>
Date: Thu, 19 Aug 2021 16:38:17 +0000
Subject: [PATCH 2/2] Update album_items.html

---
 sigal/themes/galleria/templates/album_items.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/sigal/themes/galleria/templates/album_items.html b/sigal/themes/galleria/templates/album_items.html
index d8cae58..ded498c 100644
--- a/sigal/themes/galleria/templates/album_items.html
+++ b/sigal/themes/galleria/templates/album_items.html
@@ -23,6 +23,7 @@
         {% endif %}
 
 {% block late_js %}
+  {% if album.medias %}
     {% macro img_description(media) -%}
       {%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
 	    {# clean up tags and whitespace, including newlines, in the description #}
@@ -228,4 +229,5 @@
     Galleria.run("#gallery", {dataSource: data});
 
     </script>
+  {% endif %}
 {% endblock %}