🚸 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,6 +1,13 @@
+{{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
-{{ with $.Page.Resources.GetMatch (.Destination) }}
+{{ if findRE "^https?" $url.Scheme }}
+  <figure>
+    <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+    {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+  </figure>
+{{ else }}
+  {{ with $.Page.Resources.GetMatch ($url.String) }}
     <figure>
       <img
         class="my-0 rounded-md"
@@ -12,8 +19,9 @@
         src="{{ (.Resize "660x").RelPermalink }}"
         alt="{{ $altText }}"
       />
-    <figcaption>{{ $caption | markdownify }}</figcaption>
+      {{ 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 .Destination }}
+    {{ 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,11 +1,18 @@
 {{ 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>
+      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+    </figure>
+  {{ else }}
+    {{ with $.Page.Resources.GetMatch ($url.String) }}
       <figure {{ with $class }}class="{{ . }}"{{ end }}>
         {{ with $href }}<a href="{{ . }}">{{ end }}
           <img
@@ -22,6 +29,7 @@
         {{ 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") }}
+      {{ 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 }}