From db870f073f710968e558a75c2b67d62e32cb97ca Mon Sep 17 00:00:00 2001
From: Nathan Lovato <nathan@gdquest.com>
Date: Mon, 29 Mar 2021 09:10:14 -0600
Subject: [PATCH] Add default image size for lazy loaded images (#233)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add default image size for lazy loaded images

* Rewrite code to set image dimensions

Here were the problems, and here’s the solution:

1. I had to mount the static folder to assets/ as suggested by @bep to
be able to get all images as resources
2. You have to be careful about some types, like for example if you call
safeURL on a path the returned object isn’t a string, so you can’t pass
it to .Page.Resources.GetMatch
3. I had to use the .Page object to get resources.
4. Trying to evaluate width and height on an SVG resource fails. We use
some SVGs in Markdown, as we sometimes use the format for lightweight
game sprites and other graphic design.
---
 config.toml                                |  6 ++++++
 layouts/_default/_markup/render-image.html | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/config.toml b/config.toml
index 5bc9c12ea..e0e7350f5 100644
--- a/config.toml
+++ b/config.toml
@@ -29,6 +29,10 @@ target = "assets/js"
 source = "assets/scss"
 target = "assets/scss"
 
+[[module.mounts]]
+source = "static/img"
+target = "assets/img"
+
 # Shortcuts in the docs section
 [[menu.shortcuts]]
 name = "<i class='fas fa-level-up-alt'></i>&nbsp;Back to GDQuest.com"
@@ -102,6 +106,7 @@ privacyEnhanced = true
 dir = ":cacheDir/modules"
 maxAge = -1
 
+
 [markup]
 defaultMarkdownHandler = "goldmark"
 
@@ -110,6 +115,7 @@ defaultMarkdownHandler = "goldmark"
 unsafe = true
 
 [module]
+
 [[module.imports]]
 path = "github.com/gohugoio/hugo-mod-jslibs/instantpage"
 
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 548c0f51a..9663b1874 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1 +1,16 @@
-<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+{{ $path := .Destination | safeURL }}
+{{ $alt := .Text }}
+{{ $resource := .Page.Resources.GetMatch .Destination }}
+
+{{ with $resource }}
+     {{ if and (eq .ResourceType "image") (ne .MediaType.SubType "svg") }}
+     <img src="{{ .Permalink | safeURL }}"
+          alt="{{ $alt }}"
+          {{ with .Title}}title="{{ . }}"{{ end }}
+          {{ with .Width }}width="{{ . }}"{{ end }}
+          {{ with .Height }}height="{{ . }}"{{ end }}
+     />
+     {{ else }}
+     <img src="$path" alt="$alt" />
+     {{ end }}
+{{ end }}