From 138d2bf7bbdcc0e8c213f772f454890d5bafd8f4 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Fri, 13 Jan 2023 11:41:28 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Prevent=20scaling=20images=20sma?=
 =?UTF-8?q?ller=20than=20article=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #394
---
 CHANGELOG.md                               |  1 +
 layouts/_default/_markup/render-image.html | 42 ++++++++++------------
 layouts/shortcodes/figure.html             | 28 ++++++++-------
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 11f0cdcf..f1a982ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+- Images smaller than the article width are no longer resized to fill the content area and will now simply align centre ([#394](https://github.com/jpanther/congo/pull/394))
 - Upgrade to KaTeX v0.16.4 ([#414](https://github.com/jpanther/congo/pull/414))
 - Upgrade to Mermaid v9.3.0 ([#419](https://github.com/jpanther/congo/pull/419))
 - Upgrade to Chart.js v4.1.2 ([#420](https://github.com/jpanther/congo/pull/420), [#434](https://github.com/jpanther/congo/pull/434))
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 96f30901..63c27b73 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -3,8 +3,8 @@
 {{ $caption := .Title }}
 {{ if findRE "^https?" $url.Scheme }}
   <figure>
-    <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-    {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>
 {{ else }}
   {{ $resource := "" }}
@@ -15,30 +15,26 @@
   {{ end }}
   {{ with $resource }}
     <figure>
-      {{ if eq .MediaType.SubType "svg" }}
-        <img
-            class="my-0 rounded-md"
-            src="{{ .RelPermalink }}"
-            alt="{{ $altText }}"
-        />
-      {{ else }}
-        <img
-            class="my-0 rounded-md"
-            srcset="
-            {{ (.Resize "330x").RelPermalink }} 330w,
-            {{ (.Resize "660x").RelPermalink }} 660w,
-            {{ (.Resize "1024x").RelPermalink }} 1024w,
-            {{ (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-            alt="{{ $altText }}"
-        />
-      {{ end }}
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      <img
+        class="mx-auto my-0 rounded-md"
+        {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          srcset="
+          {{ (.Resize "330x").RelPermalink }} 330w,
+          {{ (.Resize "660x").RelPermalink }} 660w,
+          {{ (.Resize "1024x").RelPermalink }} 1024w,
+          {{ (.Resize "1320x").RelPermalink }} 2x"
+          src="{{ (.Resize "660x").RelPermalink }}"
+        {{ end }}
+        alt="{{ $altText }}"
+      />
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
     <figure>
-      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ end }}
 {{ end }}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index e8220ca6..bcd105f8 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -8,8 +8,8 @@
   {{ $class := .Get "class" }}
   {{ if findRE "^https?" $url.Scheme }}
     <figure>
-      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
     {{ $resource := "" }}
@@ -22,22 +22,26 @@
       <figure {{ with $class }}class="{{ . }}"{{ end }}>
         {{ with $href }}<a href="{{ . }}">{{ end }}
           <img
-            class="my-0 rounded-md"
-            srcset="
-            {{ (.Resize "330x").RelPermalink }} 330w,
-            {{ (.Resize "660x").RelPermalink }} 660w,
-            {{ (.Resize "1024x").RelPermalink }} 1024w,
-            {{ (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
+            class="mx-auto my-0 rounded-md"
+            {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              srcset="
+              {{ (.Resize "330x").RelPermalink }} 330w,
+              {{ (.Resize "660x").RelPermalink }} 660w,
+              {{ (.Resize "1024x").RelPermalink }} 1024w,
+              {{ (.Resize "1320x").RelPermalink }} 2x"
+              src="{{ (.Resize "660x").RelPermalink }}"
+            {{ end }}
             alt="{{ $altText }}"
           />
         {{ if $href }}</a>{{ end }}
-        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+        {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
       </figure>
     {{ else }}
       <figure>
-        <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+        <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+        {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
       </figure>
     {{ end }}
   {{ end }}