From c14683fe37fabe06082f43e8bf67debc4cca7297 Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Tue, 21 Jul 2026 14:24:59 +0200
Subject: Render asset credit inside the gallery lightbox correctly

GLightbox's own selector-based description feature never actually
resolved a selector in three different attempts -- literal text,
then a resolved-but-empty div, then apparently not firing at all
against the installed (unversioned) build. Replaced with a small
afterSlideLoad handler that reads a plain data-credit-selector
attribute and copies the real element's HTML into the slide's
description area directly, depending only on GLightbox handing back
a real DOM node per slide -- a much smaller contract than trusting
its own caption-resolution feature.

Renamed the credit div's class from glightbox-desc, since that name
is reserved by the library's own bundled CSS (display: none
!important) and can't be reliably overridden from here.

Also: distinguishes the credit line and the "N Bilder" caption from
ordinary body text (italic, muted, matching .author_and_date's
existing convention), and makes the lightbox's caption card follow
the site's light/dark toggle via Canvas/CanvasText, since the
library's bundled theme never adapts to it on its own.
---
 public/javascripts/admin_interface.js |  6 +++++-
 public/javascripts/public.js          | 21 ++++++++++++++++++++-
 public/javascripts/related_assets.js  |  1 +
 public/stylesheets/ccc.css            | 26 +++++++++++++++++++++++---
 4 files changed, 49 insertions(+), 5 deletions(-)

(limited to 'public')

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 7fb1dc2..f378c46 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -282,6 +282,7 @@ cccms = {
           large: $(this).data('large-url'),
           original: $(this).data('original-url'),
           name: $(this).data('name'),
+          hasCredit: $(this).data('has-credit') === true,
           headline: $(this).data('headline') === true
         };
       }).get();
@@ -320,8 +321,11 @@ cccms = {
         : 'inline-image inline-image--half inline-image--' + placement;
 
       var esc = cccms.inline_images.escape_attr;
+      var titleForGlightbox = (item.name || '').replace(/;/g, ',');
+      var glightboxOpts = 'title: ' + esc(titleForGlightbox) +
+        (item.hasCredit ? '; description: #credit_for_asset_' + esc(item.id) : '') + ';';
       var html = '<a href="' + esc(item.original) + '" class="glightbox" data-gallery="page-' + esc(cccms.inline_images.node_id) + '"' +
-                 ' data-title="' + esc(item.name) + '" data-description="#credit_for_asset_' + esc(item.id) + '">' +
+                 ' data-glightbox="' + glightboxOpts + '">' +
                  '<img src="' + esc(item.large) + '" class="' + classes + '" alt="' + esc(item.name) + '"></a>';
 
       cccms.inline_images.editor.insertContent(html);
diff --git a/public/javascripts/public.js b/public/javascripts/public.js
index a9250ca..7f38f66 100644
--- a/public/javascripts/public.js
+++ b/public/javascripts/public.js
@@ -1,6 +1,25 @@
 document.addEventListener('DOMContentLoaded', function(){
 
-  GLightbox({ selector: '.glightbox' });
+  GLightbox({
+    selector: '.glightbox',
+    afterSlideLoad: function(slideData) {
+      var trigger = document.querySelectorAll('.glightbox')[slideData.index];
+      var selector = trigger && trigger.dataset.creditSelector;
+      if (!selector) return;
+
+      var source = document.querySelector(selector);
+      var container = slideData.slide.querySelector('.gdesc-inner');
+      if (!source || !container) return;
+
+      var target = container.querySelector('.gslide-desc');
+      if (!target) {
+        target = document.createElement('div');
+        target.className = 'gslide-desc';
+        container.appendChild(target);
+      }
+      target.innerHTML = source.innerHTML;
+    }
+  });
 
   document.getElementById("light-mode").addEventListener("change", () => {
     if (document.getElementById("light-mode").checked)
diff --git a/public/javascripts/related_assets.js b/public/javascripts/related_assets.js
index cc07d86..c6c6a19 100644
--- a/public/javascripts/related_assets.js
+++ b/public/javascripts/related_assets.js
@@ -87,6 +87,7 @@ related_assets = {
         var item = $($("#related_asset_template").html().trim());
         item.attr("data-url", related.url);
         item.attr("data-asset-id", related.asset_id);
+        item.attr("data-has-credit", related.has_credit);
         item.attr("data-large-url", related.large_url);
         item.attr("data-original-url", related.original_url);
         item.attr("data-name", related.name);
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index 8358d06..9654594 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -727,7 +727,6 @@ div.teaser_ruler {
   min-width: 0;
 }
 
-
 .inline-image--full {
   width: 100%;
   margin: 1rem 0;
@@ -748,10 +747,31 @@ div.teaser_ruler {
   margin-left: 1rem;
 }
 
-#asset_credits .glightbox-desc {
+#asset_credits .asset_credit_block {
   display: none;
 }
 
-#asset_credits .headline_credit {
+#asset_credits .asset_credit_block.headline_credit {
   display: block;
 }
+
+#asset_credits {
+  border-top: dotted 1px silver;
+}
+
+#asset_credits,
+.right {
+  font-style: italic;
+  font-family: Georgia;
+  font-size: 0.9rem;
+  color: color-mix(in srgb, CanvasText, #808080);
+}
+
+.glightbox-clean .gslide-description {
+  background: Canvas !important;
+}
+
+.glightbox-clean .gslide-title,
+.glightbox-clean .gslide-desc {
+  color: CanvasText !important;
+}
-- 
cgit v1.3