From a1808f4bb44c09e2f811ec9ad83f8be56359659c Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 7 Apr 2024 20:05:31 +0100
Subject: [PATCH] Add description to image lightbox

---
 static/src/scss/_content.scss                                  | 3 +++
 website/common/templates/common/blocks/image-caption.html      | 2 +-
 .../mermaid_block/templates/contrib/blocks/mermaid.html        | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss
index af2f3f0..0f6ed13 100644
--- a/static/src/scss/_content.scss
+++ b/static/src/scss/_content.scss
@@ -56,6 +56,9 @@ section.content {
 .gslide-image img {
   object-fit: contain !important;
 
+  // Manually set sizes, as mermaid images are very small
+  width: 80vw !important;
+
   &[src*="mermaid.ink"] {
     @include dark-mode {
       filter: invert(100%);
diff --git a/website/common/templates/common/blocks/image-caption.html b/website/common/templates/common/blocks/image-caption.html
index da567d7..2242a83 100644
--- a/website/common/templates/common/blocks/image-caption.html
+++ b/website/common/templates/common/blocks/image-caption.html
@@ -2,7 +2,7 @@
 
 <figure>
   <div class="image">
-    <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-height="70vh" data-width="95vw" data-alt="{{ value.caption|richtext|extract_text }}">
+    <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-height="70vh" data-alt="{{ value.caption|richtext|extract_text }}" data-title="{{ value.caption|richtext|extract_text }}">
       <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
     </a>
   </div>
diff --git a/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html b/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
index 17aaf5e..f9587cc 100644
--- a/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
+++ b/website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
@@ -2,7 +2,7 @@
 
 <figure>
   <div class="image">
-    <a href="https://mermaid.ink/svg/{{ value.pako }}" data-gallery="content" class="glightbox" data-type="image" data-height="60vh" data-width="95vw" data-alt="{{ value.caption|richtext|extract_text }}">
+    <a href="https://mermaid.ink/svg/{{ value.pako }}" data-gallery="content" class="glightbox" data-type="image" data-height="70vh" data-alt="{{ value.caption|richtext|extract_text }}" data-title="{{ value.caption|richtext|extract_text }}">
       <img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
     </a>
   </div>