From d31e91f543ccd8d2282c3c365ed5350b0e98c43f Mon Sep 17 00:00:00 2001
From: lxf <sng@luxagraf.net>
Date: Sat, 31 May 2025 11:40:05 -0500
Subject: added vanilla js slideshow to jrnl template for smaller photos

---
 app/posts/templates/posts/jrnl_detail.html | 7 ++++++-
 templates/lib/img_cluster.html             | 2 +-
 templates/lib/img_picwide.html             | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/posts/templates/posts/jrnl_detail.html b/app/posts/templates/posts/jrnl_detail.html
index e34a825..ee5590b 100644
--- a/app/posts/templates/posts/jrnl_detail.html
+++ b/app/posts/templates/posts/jrnl_detail.html
@@ -27,7 +27,7 @@
                 </div>
             </header>
             <div class="e-content entry-content post-body" itemprop="articleBody">
-                {{object.body_html|safe|smartypants}}
+                {{object.body_html|safe|smartypants|widont}}
             </div>
         {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %}
             <aside id="wildlife">
@@ -117,5 +117,10 @@
 {% block js %}
 <script src="/media/js/leaflet-master/leaflet-mod.js"></script>
 <script src="/media/js/detail.min.js"></script>
+<script src="/media/js/fslightbox.js"></script>
+<script>
+    fsLightbox.props.type = "image";
+    fsLightbox.props.showThumbsOnMount = true;
+</script>
 {{ block.super }}
 {%endblock%}
diff --git a/templates/lib/img_cluster.html b/templates/lib/img_cluster.html
index 8117298..e405db1 100644
--- a/templates/lib/img_cluster.html
+++ b/templates/lib/img_cluster.html
@@ -1,6 +1,6 @@
 {% load get_image_by_size %}{%if cluster_class != "picwide"%}<span class="{{cluster_class}}">{%endif%}
 {% if caption %}<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
-    <a href="{%get_image_by_size image "original"%}" title="view larger image">
+    <a data-fslightbox href="{%get_image_by_size image "original"%}" title="view larger image">
         <img {%if cluster_class == "picwide"%} class="picwide"
                         sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
                         {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug%}"{%endif%}{%endfor%}
diff --git a/templates/lib/img_picwide.html b/templates/lib/img_picwide.html
index 871a97e..8f25a84 100644
--- a/templates/lib/img_picwide.html
+++ b/templates/lib/img_picwide.html
@@ -1,5 +1,5 @@
 {% load get_image_by_size %}{% if caption or exif or image.photo_credit_source %}<figure{%if not is_cluster %} class="picwide" id="{{image.id}}"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide" id="{{image.id}}">{%endif%}{%endif%}
-        <a itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%}" title="view larger image">
+        <a data-fslightbox itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%}" title="view larger image">
             <img class="u-photo" itemprop="contentUrl" sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}Scott Gilbertson{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}>
         </a>
 {% if caption or exif or image.photo_credit_source %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %}{%if caption or exif %} | {%endif%}image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}" itemprop="author">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source %}</figcaption>
-- 
cgit v1.2.3