From 3f9c6bf08e665a179110b36c8525892da8670b3c Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Tue, 8 Mar 2022 09:51:19 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Allow=20img=20fallback=20to=20as?=
 =?UTF-8?q?sets/static=20directories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #126
---
 CHANGELOG.md                                 |  5 +++++
 exampleSite/content/docs/shortcodes/index.md |  4 ++--
 layouts/_default/_markup/render-image.html   | 13 +++++++++++--
 layouts/shortcodes/figure.html               | 13 +++++++++++--
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8970c5f..8b2245cc 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index cf117647..1ee7361f 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/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.|
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index ad27611c..723c1dc2 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/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 }}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index cc9c7f2b..fda11b7f 100644
--- a/layouts/shortcodes/figure.html
+++ b/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 }}
\ No newline at end of file