lightgallery: add custom admin link plugin

photologue_custom/static/lightgallery/plugins/admin/lg-admin.js

@@ -0,0 +1,26 @@
+/*
+ * Custom LightGallery plugin to add some buttons for administration
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+class lgAdmin {
+    constructor(instance, $LG) {
+        this.core = instance;
+        this.$LG = $LG;
+        return this;
+    }
+
+    init() {
+        this.core.$toolbar.append("<a href=\"#\" id=\"lg-admin\" class=\"lg-icon\">\uE033</a>");
+        this.core.LGel.on("lgAfterSlide.admin", this.onAfterSlide.bind(this));
+    }
+
+    onAfterSlide(event) {
+        const photoId = this.core.galleryItems[event.detail.index].slideName;
+        document.getElementById("lg-admin").href = `https://photos.crans.org/admin/photologue/photo/${photoId}/change/`;
+    }
+
+    // Admin must have destroy prototype
+    destroy() { }
+}

photologue_custom/templates/photologue/gallery_detail.html

@@ -14,12 +14,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 {% block extrajs %}
 <script src="{% static 'lightgallery/lightgallery.min.js' %}"></script>
+<script src="{% static 'lightgallery/plugins/admin/lg-admin.js' %}"></script>
 <script src="{% static 'lightgallery/plugins/hash/lg-hash.min.js' %}"></script>
 <script src="{% static 'lightgallery/plugins/thumbnail/lg-thumbnail.min.js' %}"></script>
 <script src="{% static 'lightgallery/plugins/zoom/lg-zoom.min.js' %}"></script>
 <script>
     lightGallery(document.getElementById('lightgallery'), {
-        plugins: [lgHash, lgThumbnail, lgZoom],
+        plugins: [{% if request.user.is_staff %}lgAdmin, {% endif %}lgHash, lgThumbnail, lgZoom],
         customSlideName: true,
     });
 </script>
@@ -68,7 +69,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
     </div>
     <div class="card-body row" id="lightgallery">
         {% for photo in photos %}
-        <a class="col-6 col-md-3 mb-2 text-center" href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}" data-slide-name="{{ photo.slug }}">
+        <a class="col-6 col-md-3 mb-2 text-center" href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}" data-slide-name="{{ photo.id }}">
             <img src="{{ photo.get_thumbnail_url }}" loading="lazy" class="img-thumbnail" alt="{{ photo.title }}{% if photo.date_taken %} - {{ photo.date_taken|date }} {{ photo.date_taken|time }}{% endif %} - {{ photo.extended.owner.get_full_name }}{% if photo.extended.license %} - {{ photo.extended.license }}{% endif %}">
         </a>
         {% endfor %}