🚸 Prevent image processing on external URLs

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- Markdown images and `figure` shortcode fail to load resource when providing an external URL source
+- HTML `figcaption` tags are output for Markdown images even when a caption is not provided
+
 ## [2.0.2] - 2022-02-05
 
 ### Changed

exampleSite/content/docs/shortcodes/index.md

@@ -99,14 +99,14 @@ You can see some additional Chart.js examples on the [charts samples]({{< ref "c
 
 Congo includes a `figure` shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.
 
-Images included using `figure` will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions.
+When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a URL to an external image is provided, it will be included as-is without any image processing by Hugo.
 
 The `figure` shortcode accepts six parameters:
 
 <!-- prettier-ignore-start -->
 |Parameter|Description|
 |---|---|
-|`src`|**Required.** The filename of the image. This image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.|
+|`src`|**Required.** The filename or URL of the image. When providing a filename, this image must be a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page.|
 |`alt`|[Alternative text description](https://moz.com/learn/seo/alt-text) for the image.|
 |`caption`|Markdown for the image caption, which will be displayed below the image.|
 |`class`|Additional CSS classes to apply to the image.|

layouts/_default/_markup/render-image.html

@@ -1,19 +1,27 @@
+{{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
-{{ with $.Page.Resources.GetMatch (.Destination) }}
+{{ if findRE "^https?" $url.Scheme }}
   <figure>
-    <img
+    <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-      class="my-0 rounded-md"
+    {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
-      srcset="
-        {{ (.Resize "330x").RelPermalink }} 330w,
-        {{ (.Resize "660x").RelPermalink }} 660w,
-        {{ (.Resize "1024x").RelPermalink }} 1024w,
-        {{ (.Resize "1320x").RelPermalink }} 2x"
-      src="{{ (.Resize "660x").RelPermalink }}"
-      alt="{{ $altText }}"
-    />
-    <figcaption>{{ $caption | markdownify }}</figcaption>
   </figure>
 {{ else }}
-  {{ errorf `[CONGO] Markdown image error in "%s": Resource "%s" not found. Check the path is correct or remove the image from the content.` .Page.Path .Destination }}
+  {{ with $.Page.Resources.GetMatch ($url.String) }}
+    <figure>
+      <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 }}"
+      />
+      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+    </figure>
+  {{ else }}
+    {{ errorf `[CONGO] Markdown image error in "%s": Resource "%s" not found. Check the path is correct or remove the image from the content.` .Page.Path $url.String }}
+  {{ end }}
 {{ end }}

layouts/shortcodes/figure.html

@@ -1,27 +1,35 @@
 {{ if .Get "default" }}
   {{ template "_internal/shortcodes/figure.html" . }}
 {{ else }}
+  {{ $url := urls.Parse (.Get "src") }}
   {{ $altText := .Get "alt" }}
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
-  {{ with $.Page.Resources.GetMatch (.Get "src") }}
+  {{ if findRE "^https?" $url.Scheme }}
-    <figure {{ with $class }}class="{{ . }}"{{ end }}>
+    <figure>
-      {{ with $href }}<a href="{{ . }}">{{ end }}
+      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
-        <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 }}"
-        />
-      {{ if $href }}</a>{{ end }}
       {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
-    {{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (.Get "src") }}
+    {{ with $.Page.Resources.GetMatch ($url.String) }}
+      <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 }}"
+            alt="{{ $altText }}"
+          />
+        {{ if $href }}</a>{{ end }}
+        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      </figure>
+    {{ else }}
+      {{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path ($url.String) }}
+    {{ end }}
   {{ end }}
 {{ end }}