Photoswipe: Allow image listing in album_list.html

This commit introduces 2 main changes to the Photoswipe theme:

1. The media listing logic from "album.html" is separated
   and put in a new template, "album_items.html".
   Similarly, the supporting JavaScript content for
   initializing Photoswipe is split off into "ps_head.html".

2. The two new templates, "album_items.html" and "ps_head.html",
   are included in "album_list.html" in addition to "album.html".

src/sigal/themes/photoswipe/templates/album.html

@@ -1,92 +1,10 @@
 {% from 'description.html' import img_description %}
 {% extends "base.html" %}
 
-{% block extra_head %}
+{% include "ps_head.html" %}
-  <link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
-  <script type="module">
-  import PhotoSwipeLightbox from '{{ theme.url }}/photoswipe-lightbox.esm.min.js';
-  import PhotoSwipe from '{{ theme.url }}/photoswipe.esm.min.js';
-  import PhotoSwipeDynamicCaption from '{{ theme.url }}/photoswipe-dynamic-caption-plugin.esm.min.js';
-  import PhotoSwipeFullscreen from '{{ theme.url }}/photoswipe-fullscreen.esm.min.js';
-  import PhotoSwipeVideoPlugin from '{{ theme.url }}/photoswipe-video-plugin.esm.min.js';
-
-  const lightbox = new PhotoSwipeLightbox({
-    gallery: '.gallery',
-    children: '.thumbnail',
-    pswpModule: PhotoSwipe
-  });
-  const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {type: 'auto'});
-  const fullscreenPlugin = new PhotoSwipeFullscreen(lightbox);
-  const videoPlugin = new PhotoSwipeVideoPlugin(lightbox, {autoplay: true});
-
-  lightbox.on('uiRegister', function() {
-    lightbox.pswp.ui.registerElement({
-      name: 'download-button',
-      order: 8,
-      isButton: true,
-      tagName: 'a',
-      html: {
-        isCustomSVG: true,
-        inner: '<path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" id="pswp__icn-download"/>',
-        outlineID: 'pswp__icn-download'
-      },
-      onInit: (el, pswp) => {
-        el.setAttribute('download', '');
-        el.setAttribute('target', '_blank');
-        el.setAttribute('rel', 'noopener');
-        pswp.on('change', () => {
-          if (pswp.currSlide.data.element.children[0].dataset.big) {
-            el.href = pswp.currSlide.data.element.children[0].dataset.big;
-          } else {
-            el.href = pswp.currSlide.data.src;
-          }
-        });
-      }
-    });
-  });
-
-  lightbox.init();
-  </script>
-{% endblock extra_head %}
 
 {% block content %}
-  {% include 'download_zip.html' %}
+  {% include "album_items.html" %}
-  {% include 'map.html' %}
-  <div class="gallery">
-    {% for media in album.medias %}
-      {% if media.type == "image" %}
-        <figure class="gallery__img--{{ "main" if loop.first else "secondary" }} thumbnail">
-          <a href="{{ media.url }}"
-             data-pswp-width="{{media.size.width}}"
-             data-pswp-height="{{media.size.height}}"
-             {%- if media.big -%}
-             data-big="{{ media.big_url }}"
-             {%- endif -%}
-             >
-             <img src="{{ media.thumbnail }}" alt="{{ media.url }}" />
-          </a>
-          <div class="pswp-caption-content">
-            {{ img_description(media, with_big=False) }}
-          </div>
-          <figcaption>{{ media.title }} - {{ media.exif.datetime }}</figcaption>
-        </figure>
-      {% endif %}
-      {% if media.type == "video" %}
-        <figure class="gallery__img--secondary thumbnail" >
-          <a href="{{ media.url }}"
-             data-pswp-type="video"
-             data-pswp-width="800"
-             data-pswp-height="600">
-            <img src="{{ media.thumbnail }}" alt="{{ media.url }}" />
-          </a>
-          <div class="pswp-caption-content">
-            {{ img_description(media, with_big=False) }}
-          </div>
-          <figcaption>{{ media_title }}</figcaption>
-        </figure>
-      {% endif %}
-    {% endfor %}
-  </div>
 {% endblock %}
 
 {% block extra_footer %}

src/sigal/themes/photoswipe/templates/album_items.html

@@ -0,0 +1,39 @@
+{% from 'description.html' import img_description %}
+
+  {% include 'download_zip.html' %}
+  {% include 'map.html' %}
+  <div class="gallery">
+    {% for media in album.medias %}
+      {% if media.type == "image" %}
+        <figure class="gallery__img--{{ "main" if loop.first else "secondary" }} thumbnail">
+          <a href="{{ media.url }}"
+             data-pswp-width="{{media.size.width}}"
+             data-pswp-height="{{media.size.height}}"
+             {%- if media.big -%}
+             data-big="{{ media.big_url }}"
+             {%- endif -%}
+             >
+             <img src="{{ media.thumbnail }}" alt="{{ media.url }}" />
+          </a>
+          <div class="pswp-caption-content">
+            {{ img_description(media, with_big=False) }}
+          </div>
+          <figcaption>{{ media.title }} - {{ media.exif.datetime }}</figcaption>
+        </figure>
+      {% endif %}
+      {% if media.type == "video" %}
+        <figure class="gallery__img--secondary thumbnail" >
+          <a href="{{ media.url }}"
+             data-pswp-type="video"
+             data-pswp-width="800"
+             data-pswp-height="600">
+            <img src="{{ media.thumbnail }}" alt="{{ media.url }}" />
+          </a>
+          <div class="pswp-caption-content">
+            {{ img_description(media, with_big=False) }}
+          </div>
+          <figcaption>{{ media_title }}</figcaption>
+        </figure>
+      {% endif %}
+    {% endfor %}
+  </div>

src/sigal/themes/photoswipe/templates/album_list.html

@@ -1,4 +1,9 @@
 {% extends "base.html" %}
+
+{% if album.medias %}
+  {% include "ps_head.html" %}
+{% endif %}
+
 {% block content %}
   <div class="album-list">
   {% for alb in album.albums %}
@@ -10,4 +15,6 @@
     </div>
   {% endfor %}
   </div>
+
+  {% include "album_items.html" %}
 {% endblock %}

src/sigal/themes/photoswipe/templates/ps_head.html

@@ -0,0 +1,51 @@
+{% block extra_head %}
+  <!--
+    FIXME: When this is imported into "album_list.html",
+    {{ theme.url }} is empty
+  -->
+  <link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
+  <script type="module">
+  import PhotoSwipeLightbox from '{{ theme.url }}/photoswipe-lightbox.esm.min.js';
+  import PhotoSwipe from '{{ theme.url }}/photoswipe.esm.min.js';
+  import PhotoSwipeDynamicCaption from '{{ theme.url }}/photoswipe-dynamic-caption-plugin.esm.min.js';
+  import PhotoSwipeFullscreen from '{{ theme.url }}/photoswipe-fullscreen.esm.min.js';
+  import PhotoSwipeVideoPlugin from '{{ theme.url }}/photoswipe-video-plugin.esm.min.js';
+
+  const lightbox = new PhotoSwipeLightbox({
+    gallery: '.gallery',
+    children: '.thumbnail',
+    pswpModule: PhotoSwipe
+  });
+  const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {type: 'auto'});
+  const fullscreenPlugin = new PhotoSwipeFullscreen(lightbox);
+  const videoPlugin = new PhotoSwipeVideoPlugin(lightbox, {autoplay: true});
+
+  lightbox.on('uiRegister', function() {
+    lightbox.pswp.ui.registerElement({
+      name: 'download-button',
+      order: 8,
+      isButton: true,
+      tagName: 'a',
+      html: {
+        isCustomSVG: true,
+        inner: '<path d="M20.5 14.3 17.1 18V10h-2.2v7.9l-3.4-3.6L10 16l6 6.1 6-6.1ZM23 23H9v2h14Z" id="pswp__icn-download"/>',
+        outlineID: 'pswp__icn-download'
+      },
+      onInit: (el, pswp) => {
+        el.setAttribute('download', '');
+        el.setAttribute('target', '_blank');
+        el.setAttribute('rel', 'noopener');
+        pswp.on('change', () => {
+          if (pswp.currSlide.data.element.children[0].dataset.big) {
+            el.href = pswp.currSlide.data.element.children[0].dataset.big;
+          } else {
+            el.href = pswp.currSlide.data.src;
+          }
+        });
+      }
+    });
+  });
+
+  lightbox.init();
+  </script>
+{% endblock extra_head %}