feat: add basic svg support to the img shortcode (#351)

thegeeklab · Dec 21, 2022 · 0f42af7 · 0f42af7
1 parent 9e4f04c
commit 0f42af7
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 19 deletions.
diff --git a/exampleSite/content/posts/post-with-images/images/forest-8.svg b/exampleSite/content/posts/post-with-images/images/forest-8.svg
diff --git a/exampleSite/content/posts/post-with-images/index.md b/exampleSite/content/posts/post-with-images/index.md
@@ -46,6 +46,11 @@ resources:
     title: Forest (7)
     params:
       credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)"
+  - name: forest-8
+    src: "images/forest-8.svg"
+    title: Forest (8)
+    params:
+      credits: "SVG Repo on [SVGRepo](https://www.svgrepo.com/svg/286078/forest)"
 ---
 
 If you need more flexibility for your embedded images, you could use the `img` shortcode. It is using Hugo's
@@ -156,3 +161,14 @@ copious quo ad. Stet probates in duo.
 {{< img name="forest-7" lazy=true >}}
 
 <!-- spellchecker-enable -->
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
+
+<!-- spellchecker-disable -->
+
+{{< img name="forest-8" size=small lazy=true >}}
+
+<!-- spellchecker-enable -->
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
@@ -2,18 +2,26 @@
 {{- $customAlt := .Get "alt" }}
 {{- $customSize := .Get "size" | lower }}
 {{- $lazyLoad := default (default true $.Site.Params.GeekblogImageLazyLoading) (.Get "lazy") }}
+{{- $data := newScratch }}
 
 {{- with $source }}
   {{- $caption := default .Title $customAlt }}
+  {{- $isSVG := (eq .MediaType.SubType "svg") }}
 
   {{- $origin := .Permalink }}
-  {{- $profile := (.Fill "180x180 Center").Permalink }}
-  {{- $tiny := (.Resize "320x").Permalink }}
-  {{- $small := (.Resize "600x").Permalink }}
-  {{- $medium := (.Resize "1200x").Permalink }}
-  {{- $large := (.Resize "1800x").Permalink }}
-
-  {{- $size := dict "origin" $origin "profile" $profile "tiny" $tiny "small" $small "medium" $medium "large" $large }}
+  {{- if $isSVG }}
+    {{- $data.SetInMap "size" "profile" "180" }}
+    {{- $data.SetInMap "size" "tiny" "320" }}
+    {{- $data.SetInMap "size" "small" "600" }}
+    {{- $data.SetInMap "size" "medium" "1200" }}
+    {{- $data.SetInMap "size" "large" "1800" }}
+  {{- else }}
+    {{- $data.SetInMap "size" "profile" (.Fill "180x180 Center").Permalink }}
+    {{- $data.SetInMap "size" "tiny" (.Resize "320x").Permalink }}
+    {{- $data.SetInMap "size" "small" (.Resize "600x").Permalink }}
+    {{- $data.SetInMap "size" "medium" (.Resize "1200x").Permalink }}
+    {{- $data.SetInMap "size" "large" (.Resize "1800x").Permalink }}
+  {{- end }}
 
 
   <div class="flex justify-center">
@@ -23,21 +31,28 @@
     >
       <a class="gblog-markdown__link--raw" href="{{ .Permalink }}">
         <picture>
-          <source
-            {{- with $customSize }}
-              srcset="{{ index $size $customSize }}"
-            {{- else }}
-              srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
-            {{- end }}
-          />
+          {{- $size := $data.Get "size" }}
+          {{- if not $isSVG }}
+            <source
+              {{- with $customSize }}
+                srcset="{{ index $size $customSize }}"
+              {{- else }}
+                srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
+              {{- end }}
+            />
+          {{- end }}
           <img
-            {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
-            {{- if eq $customSize "origin" }}
-              src="{{ $size.origin }}"
+            {{- if $isSVG }}
+              src="{{ $origin }}" width="{{ index $size (default "medium" $customSize) }}"
             {{- else }}
-              src="{{ $size.large }}"
+              {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
+              {{- if eq $customSize "origin" }}
+                src="{{ $origin }}"
+              {{- else }}
+                src="{{ $size.large }}"
+              {{- end }}
+              alt="{{ $caption }}"
             {{- end }}
-            alt="{{ $caption }}"
           />
         </picture>
       </a>