Always put thumb images in a lightbox

assets/controllers/lightbox_controller.js

@@ -4,7 +4,12 @@ import GLightbox from 'glightbox';
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
     connect() {
-        const params = { selector: '.thumb', openEffect: 'none', closeEffect: 'none', slideEffect: 'none' };
+        const params = {
+            selector: '.thumb',
+            openEffect: 'none',
+            closeEffect: 'none',
+            touchNavigation: true,
+        };
         GLightbox(params);
     }
 }

assets/controllers/subject_controller.js

@@ -1,7 +1,6 @@
 import { fetch, ok } from '../utils/http';
 import getIntIdFromElement, { getDepth, getLevel, getTypeFromNotification } from '../utils/mbin';
 import { Controller } from '@hotwired/stimulus';
-import GLightbox from 'glightbox';
 import router from '../utils/routing';
 import { useIntersection } from 'stimulus-use';
 
@@ -16,9 +15,6 @@ export default class extends Controller {
     static sendBtnLabel = null;
 
     connect() {
-        const params = { selector: '.thumb', openEffect: 'none', closeEffect: 'none', slideEffect: 'none' };
-        GLightbox(params);
-
         const self = this;
         if (this.hasMoreTarget) {
             this.moreTarget.addEventListener('focusin', () => {

templates/components/_figure_entry.html.twig

@@ -3,13 +3,7 @@
     {% set sensitive_id = 'sensitive-check-%s-%s'|format(entry.id, image.id) %}
     {% set lightbox_alt_id = 'thumb-alt-%s-%s'|format(entry.id, image.id) %}
     {% set image_path = image.filePath ? asset(image.filePath)|imagine_filter('entry_thumb') : image.sourceUrl %}
-
-
-    {% if type is same as 'image' %}
-        {% set route = is_single ? uploaded_asset(image) : entry_url(entry) %}
-    {% elseif type is same as 'link' %}
-        {% set route = is_single ? entry.url : entry_url(entry) %}
-    {% endif %}
+    {% set route = uploaded_asset(image) %}
 
     {% set is_single_image = is_single and type is same as 'image' %}
 
@@ -31,8 +25,9 @@
                    aria-label="{{ 'sensitive_toggle'|trans }}">
         {% endif %}
         <a href="{{ route }}"
-           class="{{ html_classes('sensitive-checked--show', {'thumb': is_single_image}) }}"
+           class="{{ html_classes('sensitive-checked--show', 'thumb') }}"
            rel="{{ (type is same as 'link') ? get_rel(route) : '' }}"
+           data-gallery="entry-{{ entry.id }}"
            data-description="{{ is_single_image and image.altText ? '.'~lightbox_alt_id : '' }}">
             <img class="thumb-subject"
                  loading="lazy"

templates/components/_figure_image.html.twig

@@ -14,6 +14,7 @@
                 <a
                     href="{{ uploaded_asset(image) }}"
                     class="thumb"
+                    data-gallery="{{ gallery_name }}"
                     data-description="{{ image.altText ? '.'~lightbox_alt_id : ''}}">
                     <img loading="lazy"
                          src="{{ image_path }}"

templates/components/entry_comment.html.twig

@@ -91,7 +91,8 @@
                         image: comment.image,
                         parent_id: comment.id,
                         is_adult: comment.isAdult,
-                        thumb_filter: 'post_thumb'
+                        thumb_filter: 'post_thumb',
+                        gallery_name: 'ec-%d'|format(comment.id),
                     }) }}
                 {% endif %}
                 {% if comment.visibility in ['visible', 'private'] %}

templates/components/post.html.twig

@@ -75,7 +75,8 @@
                         image: post.image,
                         parent_id: post.id,
                         is_adult: post.isAdult,
-                        thumb_filter: 'post_thumb'
+                        thumb_filter: 'post_thumb',
+                        gallery_name: 'post-%d'|format(post.id),
                     }) }}
                 {% endif %}
                 {% if post.visibility in ['visible', 'private'] %}

templates/components/post_comment.html.twig

@@ -88,7 +88,8 @@
                         image: comment.image,
                         parent_id: comment.id,
                         is_adult: comment.isAdult,
-                        thumb_filter: 'post_thumb'
+                        thumb_filter: 'post_thumb',
+                        gallery_name: 'pc-%d'|format(comment.id),
                     }) }}
                 {% endif %}
                 {% if comment.visibility in ['visible', 'private'] %}