🚸 Allow img fallback to assets/static directories

Fixes #126

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- Markdown images and `figure` shortcode now search the `assets/` directory if an image cannot be found in page bundle ([#126](https://github.com/jpanther/congo/issues/126))
+- Markdown images and `figure` shortcode now fallback to static assets if an image is not provided as a Hugo resource ([#126](https://github.com/jpanther/congo/issues/126))
+
 ## [2.0.5] - 2022-02-20
 
 ### Added

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.
 
-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.
+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 static asset or 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 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.|
+|`src`| **Required.** The local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a [page resource](https://gohugo.io/content-management/page-resources/) bundled with the page; then an asset in the `assets/` directory; then finally, a static image in the `static/` directory.|
 |`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

@@ -7,7 +7,13 @@
     {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
   </figure>
 {{ else }}
-  {{ with $.Page.Resources.GetMatch ($url.String) }}
+  {{ $resource := "" }}
+  {{ if $.Page.Resources.GetMatch ($url.String) }}
+    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
+  {{ else if resources.GetMatch ($url.String) }}
+    {{ $resource = resources.Get ($url.String) }}
+  {{ end }}
+  {{ with $resource }}
     <figure>
       <img
         class="my-0 rounded-md"
@@ -22,6 +28,9 @@
       {{ 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 }}
+    <figure>
+      <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+    </figure>
   {{ end }}
 {{ end }}

layouts/shortcodes/figure.html

@@ -12,7 +12,13 @@
       {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
-    {{ with $.Page.Resources.GetMatch ($url.String) }}
+    {{ $resource := "" }}
+    {{ if $.Page.Resources.GetMatch ($url.String) }}
+      {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
+    {{ else if resources.GetMatch ($url.String) }}
+      {{ $resource = resources.Get ($url.String) }}
+    {{ end }}
+    {{ with $resource }}
       <figure {{ with $class }}class="{{ . }}"{{ end }}>
         {{ with $href }}<a href="{{ . }}">{{ end }}
           <img
@@ -29,7 +35,10 @@
         {{ 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) }}
+      <figure>
+        <img class="my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+        {{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
+      </figure>
     {{ end }}
   {{ end }}
 {{ end }}