Fix sizing of content images

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;

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%);
+    }
+  }
+}

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">
+  <div class="image">
-    <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-title="{{ 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 }}">
       <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
     </a>
   </div>

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>