🚸 Prevent scaling images smaller than article width

Fixes #394

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))

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 }}" />
+    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-    {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+    {{ 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
-        <img
+        class="mx-auto my-0 rounded-md"
-            class="my-0 rounded-md"
+        {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
-            src="{{ .RelPermalink }}"
+          src="{{ .RelPermalink }}"
-            alt="{{ $altText }}"
+        {{ else }}
-        />
+          srcset="
-      {{ else }}
+          {{ (.Resize "330x").RelPermalink }} 330w,
-        <img
+          {{ (.Resize "660x").RelPermalink }} 660w,
-            class="my-0 rounded-md"
+          {{ (.Resize "1024x").RelPermalink }} 1024w,
-            srcset="
+          {{ (.Resize "1320x").RelPermalink }} 2x"
-            {{ (.Resize "330x").RelPermalink }} 330w,
+          src="{{ (.Resize "660x").RelPermalink }}"
-            {{ (.Resize "660x").RelPermalink }} 660w,
+        {{ end }}
-            {{ (.Resize "1024x").RelPermalink }} 1024w,
+        alt="{{ $altText }}"
-            {{ (.Resize "1320x").RelPermalink }} 2x"
+      />
-            src="{{ (.Resize "660x").RelPermalink }}"
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-            alt="{{ $altText }}"
-        />
-      {{ end }}
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
     <figure>
-      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ end }}
 {{ end }}

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 }}" />
+      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      {{ 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"
+            class="mx-auto my-0 rounded-md"
-            srcset="
+            {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
-            {{ (.Resize "330x").RelPermalink }} 330w,
+              src="{{ .RelPermalink }}"
-            {{ (.Resize "660x").RelPermalink }} 660w,
+            {{ else }}
-            {{ (.Resize "1024x").RelPermalink }} 1024w,
+              srcset="
-            {{ (.Resize "1320x").RelPermalink }} 2x"
+              {{ (.Resize "330x").RelPermalink }} 330w,
-            src="{{ (.Resize "660x").RelPermalink }}"
+              {{ (.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 }}" />
+        <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+        {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
       </figure>
     {{ end }}
   {{ end }}