✨ Add SVG support to article featured images

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Front matter support for specifying article thumbnails, covers and featured image details (including filename pattern, alt text and caption)
+- Support for SVG assets as article thumbnails, covers and featured images
 - Front matter keywords support on a per article basis
 - Indonesian translation ([#398](https://github.com/jpanther/congo/pull/398))
 - Mastodon sharing links ([#405](https://github.com/jpanther/congo/pull/405))

assets/css/compiled/main.css

@@ -1890,6 +1890,10 @@ body:has(#menu-controller:checked) {
   height: 9rem;
 }
 
+.max-h-\[4\.5rem\] {
+  max-height: 4.5rem;
+}
+
 .max-h-\[10rem\] {
   max-height: 10rem;
 }
@@ -1950,6 +1954,10 @@ body:has(#menu-controller:checked) {
   max-width: 65ch;
 }
 
+.max-w-\[6rem\] {
+  max-width: 6rem;
+}
+
 .max-w-\[10rem\] {
   max-width: 10rem;
 }
@@ -2883,6 +2891,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .sm\:max-h-\[7\.5rem\] {
+    max-height: 7.5rem;
+  }
+
   .sm\:w-1\/2 {
     width: 50%;
   }
@@ -2891,6 +2903,10 @@ body:has(#menu-controller:checked) {
     width: 10rem;
   }
 
+  .sm\:max-w-\[10rem\] {
+    max-width: 10rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }

layouts/_default/_markup/render-image.html

@@ -17,15 +17,19 @@
     <figure>
       <img
         class="mx-auto my-0 rounded-md"
-        {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
+        {{ if eq .MediaType.SubType "svg" }}
           src="{{ .RelPermalink }}"
         {{ else }}
-          srcset="
+          {{ if lt .Width 660 }}
-          {{ (.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 }}
         {{ end }}
         alt="{{ $altText }}"
       />

layouts/_default/single.html

@@ -17,12 +17,18 @@
         <div class="prose">
           <img
             class="mb-6 -mt-4 rounded-md"
-            srcset="
+            {{ if eq .MediaType.SubType "svg" }}
-          {{- (.Resize "330x").RelPermalink }} 330w,
+              src="{{ .RelPermalink }}"
-          {{- (.Resize "660x").RelPermalink }} 660w,
+            {{ else }}
-          {{- (.Resize "1024x").RelPermalink }} 1024w,
+              {{ if lt .Width 660 }}
-          {{- (.Resize "1320x").RelPermalink }} 2x"
+                src="{{ .RelPermalink }}"
-            src="{{ (.Resize "660x").RelPermalink }}"
+              {{ else }}
+                srcset=" {{ (.Resize "330x").RelPermalink }} 330w,
+                {{ (.Resize "660x").RelPermalink }} 660w, {{ (.Resize "1024x").RelPermalink }}
+                1024w, {{ (.Resize "1320x").RelPermalink }} 2x"
+                src="{{ (.Resize "660x").RelPermalink }}"
+              {{ end }}
+            {{ end }}
             alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
           />
           {{ with $.Params.coverCaption }}

layouts/partials/article-link.html

@@ -13,12 +13,16 @@
         aria-label="{{ $.Title | emojify }}"
       >
         <img
-          class="w-24 rounded-md sm:w-40"
-          srcset="
-          {{- (.Fill "160x120 smart").RelPermalink }} 160w,
-          {{- (.Fill "320x240 smart").RelPermalink }} 2x"
-          src="{{ (.Fill "160x120 smart").RelPermalink }}"
           alt="{{ $.Params.featureAlt | default $.Params.thumbnailAlt | default "" }}"
+          {{ if eq .MediaType.SubType "svg" }}
+            class="w-24 max-w-[6rem] max-h-[4.5rem] rounded-md sm:max-h-[7.5rem] sm:w-40
+            sm:max-w-[10rem]" src="{{ .RelPermalink }}"
+          {{ else }}
+            class="w-24 rounded-md sm:w-40" srcset="
+            {{- (.Fill "160x120 smart").RelPermalink }}
+            160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
+            src="{{ (.Fill "160x120 smart").RelPermalink }}"
+          {{ end }}
         />
       </a>
     </div>

layouts/shortcodes/figure.html

@@ -21,15 +21,19 @@
           {{ $resource = resources.Get ($url.String) }}
         {{ end }}
         {{ with $resource }}
-          {{ if or (lt .Width 660) (eq .MediaType.SubType "svg") }}
+          {{ if eq .MediaType.SubType "svg" }}
             src="{{ .RelPermalink }}"
           {{ else }}
-            srcset="
+            {{ if lt .Width 660 }}
-            {{ (.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 }}
           {{ end }}
         {{ else }}
           src="{{ $url.String }}"