add photoswipe to file list and album table views

bornhack · Nov 24, 2024 · 16d4a18 · 16d4a18
1 parent 61ed575
commit 16d4a18
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 5 deletions.
diff --git a/src/albums/templates/album_grid.html b/src/albums/templates/album_grid.html
@@ -9,11 +9,11 @@
 {% for file in filter.qs %}
 
 {% if file.filetype == "image" %}
-<a href="{{ file.original.url }}" data-pswp-width="{{ file.width }}"  data-pswp-height="{{ file.height }}"  data-pswp-type="image"  data-pswp-srcset="{% render_source_set field_file=file.original file_type="WEBP" max_width=4000 cols=12 %}">{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="1/1" %}</a>
+<a class="gallerya" href="{{ file.original.url }}" data-pswp-width="{{ file.width }}"  data-pswp-height="{{ file.height }}"  data-pswp-type="image"  data-pswp-srcset="{% render_source_set field_file=file.original file_type="WEBP" max_width=4000 cols=12 %}">{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="1/1" %}</a>
 
 {% elif file.filetype == "video" %}
 {# Set max video player size to 1280x1024 #}
-<a href="{{ file.original.url }}" data-pswp-type="video" data-pswp-width="1280" data-pswp-height="1024">{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="16/9" %}</a>
+<a class="gallerya" href="{{ file.original.url }}" data-pswp-type="video" data-pswp-width="1280" data-pswp-height="1024">{% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="16/9" %}</a>
 
 {% else %}
 <a href="{{ file.original.url }}">

diff --git a/src/albums/templates/album_table.html b/src/albums/templates/album_table.html
@@ -1,4 +1,13 @@
 {% extends "album_detail.html" %}
+{% load static %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{% static 'css/vendor/photoswipe-v5.4.4.css' %}">
+{% endblock extra_head %}
+
 {% block album_detail %}
+<div class="pswp-gallery pswp-gallery--single-column" id="gallery">
 {% include "includes/file_table.html" %}
+</div>
+<script type="module" src="{% static 'js/photoswipe.js' %}"></script>
 {% endblock album_detail %}
diff --git a/src/bma/settings.py b/src/bma/settings.py
@@ -267,3 +267,11 @@
     "USE_PLACEHOLDERS": False,
     "PROCESSOR": "images.picture_processor.dummy_processor",
 }
+
+
+DJANGO_TABLES2_TABLE_ATTRS = {
+    "class": "table table-hover",
+    "thead": {
+        "class": "table-light",
+    },
+}
diff --git a/src/files/templates/file_list.html b/src/files/templates/file_list.html
@@ -1,8 +1,13 @@
 {% extends "base.html" %}
+{% load humanize static %}
 {% load django_bootstrap5 %}
 
 {% block title %}File list{% endblock title %}
 
+{% block extra_head %}
+<link rel="stylesheet" href="{% static 'css/vendor/photoswipe-v5.4.4.css' %}">
+{% endblock extra_head %}
+
 {% block main_content %}
   <div class="row">
     <div class="col-2">
@@ -38,9 +43,12 @@ <h5 class="card-header">Filter Files</h5>
       <div class="card">
         <h5 class="card-header">Files</h5>
         <div class="card-body">
-          {% include "includes/file_table.html" %}
+          <div class="pswp-gallery pswp-gallery--single-column" id="gallery">
+            {% include "includes/file_table.html" %}
+          </div>
         </div>
       </div>
     </div>
   </div>
+<script type="module" src="{% static 'js/photoswipe.js' %}"></script>
 {% endblock main_content %}
diff --git a/src/files/templates/includes/file_thumbnail.html b/src/files/templates/includes/file_thumbnail.html
@@ -1,5 +1,5 @@
 {% if record.thumbnail %}
-{% thumbnail record.thumbnail.source filetype=record.filetype width=width|default:50 ratio=ratio|default:"" %}
+<a class="gallerya" href="{{ record.original.url }}" data-pswp-width="{{ record.width }}"  data-pswp-height="{{ record.height }}"  data-pswp-type="image"  data-pswp-srcset="{% render_source_set field_file=record.original file_type="WEBP" max_width=4000 cols=12 %}">{% thumbnail record.thumbnail.source filetype=record.filetype width=width|default:50 ratio=ratio|default:"" %}</a>
 {% else %}
 <div class="text-center"><i class="center fas {{ record.filetype_icon }} fa-3x"></i></div>
 {% endif %}
diff --git a/src/static_src/js/photoswipe.js b/src/static_src/js/photoswipe.js
@@ -3,7 +3,7 @@ import PhotoSwipeLightbox from "/static/js/vendor/photoswipe-lightbox-v5.4.4.esm
 import PhotoSwipeVideoPlugin from '/static/js/vendor/photoswipe-video-plugin-v1.0.2.esm.min.js';
 const lightbox = new PhotoSwipeLightbox({
     gallery: '#gallery',
-    children: 'a',
+    children: 'a.gallerya',
     pswpModule: () => import('/static/js/vendor/photoswipe-v5.4.4.esm.min.js')
 });