From 9096bd4b0b246ccb3bdd2c7f719ddc2dba05cc00 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 2 Oct 2022 22:38:10 +0100
Subject: [PATCH] Fix sizing of content images

---
 static/src/scss/_blocks.scss                  | 28 +++++++++++--------
 static/src/scss/_content.scss                 | 10 +++++++
 .../common/blocks/image-caption.html          |  4 +--
 .../templates/contrib/blocks/mermaid.html     |  2 +-
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/static/src/scss/_blocks.scss b/static/src/scss/_blocks.scss
index cd82432..b81ea10 100644
--- a/static/src/scss/_blocks.scss
+++ b/static/src/scss/_blocks.scss
@@ -11,6 +11,16 @@
   }
 }
 
+div.block-mermaid {
+  text-align: center;
+
+  img {
+    @include dark-mode {
+      filter: invert(100%);
+    }
+  }
+}
+
 div.block-image,
 div.block-mermaid,
 div.block-iframe {
@@ -21,6 +31,12 @@ div.block-iframe {
 
   figure {
     @include center-block;
+
+    img {
+      width: auto;
+      height: auto;
+      max-height: 45vh;
+    }
   }
 }
 
@@ -61,18 +77,6 @@ div.block-tangent {
   }
 }
 
-div.block-mermaid {
-  text-align: center;
-
-  img {
-    width: unset;
-
-    @include dark-mode {
-      filter: invert(100%);
-    }
-  }
-}
-
 div.block-code {
   .code-header {
     font-family: $family-code;
diff --git a/static/src/scss/_content.scss b/static/src/scss/_content.scss
index ec6db2c..3caac92 100644
--- a/static/src/scss/_content.scss
+++ b/static/src/scss/_content.scss
@@ -52,3 +52,13 @@ section.content {
     color: $dark-mode-text !important;
   }
 }
+
+.gslide-image img {
+  object-fit: contain !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 e70d997..9baff07 100644
--- a/website/common/templates/common/blocks/image-caption.html
+++ b/website/common/templates/common/blocks/image-caption.html
@@ -1,8 +1,8 @@
 {% load wagtailimages_tags wagtailcore_tags util_tags %}
 
 <figure>
-  <div class="image is-16by9">
-    <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-title="{{ value.caption|richtext|extract_text }}">
+  <div class="image">
+    <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-height="70vh" data-alt="{{ 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 dc35aff..3f6a58f 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/img/{{ value.pako }}" data-gallery="content" class="glightbox" data-glightbox="type: image" data-width="50vw" data-title="{{ value.caption|richtext|extract_text }}">
+    <a href="https://mermaid.ink/svg/{{ value.pako }}" data-gallery="content" class="glightbox" data-type="image" data-height="60vh" data-alt="{{ 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>