From 7078eb6c1eb241efbc4fe7c7b39609968f712ae1 Mon Sep 17 00:00:00 2001
From: Nathan Lovato <nathan@gdquest.com>
Date: Mon, 6 Jul 2020 07:35:46 -0600
Subject: [PATCH] Add default image size for lazy loaded images

---
 config.toml                                |  8 ++++
 layouts/_default/_markup/render-image.html | 52 +++++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/config.toml b/config.toml
index 03fc824cc..95589914f 100644
--- a/config.toml
+++ b/config.toml
@@ -100,6 +100,14 @@ privacyEnhanced = true
 dir = ":cacheDir/modules"
 maxAge = -1
 
+[module]
+[[module.mounts]]
+source = "assets/scss"
+target = "assets/scss"
+[[module.mounts]]
+source = "static/img"
+target = "assets/img"
+
 [markup]
 defaultMarkdownHandler = "goldmark"
 
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 548c0f51a..52c813f3e 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1 +1,51 @@
-<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+<!-- layouts/partials/render-image.html -->
+{{ $src := ( .Destination | safeURL ) }}
+{{ $fragments := ( split $src "#" ) }}
+{{ $src = index ($fragments ) 0 }}
+{{ $src = path.Base $src }}
+{{ $resource := ($.Page.Resources.ByType "image").GetMatch ( printf "**%s" $src ) }}
+
+{{ with $resource }}
+{{ if (eq .MediaType.SubType "svg") }}
+  {{ warnf "%q" .Permalink }}
+{{ else }}
+  {{ .ResourceType }} || {{ .MediaType.SubType}} || {{.Width}}
+{{ end }}
+{{ end }}
+
+{{ with $resource  }}
+{{ warnf "%q %s" . .ResourceType }}
+    {{ if eq .ResourceType "image" }}
+        {{ $width := 0 }}
+        {{ $height := 0 }}
+        {{ if isset . "Width" }}
+            {{ $width = .Width }}
+            {{ $height = .Height }}
+        {{ end }}
+        <!-- resize if wider than 800px -->
+        {{ $resized := cond (lt .Width "800") . ( .Resize "800x" ) }}
+        <!-- generate a low resolution placeholder to use as background if a JPG -->
+        {{ $placeholder := "" }}
+        {{ if eq .MediaType.SubType "jpeg" }}
+            {{ $placeholder = .Resize "16x q20 jpg Gaussian" }}
+        {{ end }}
+        <img src="{{ $resized.RelPermalink }}"
+             
+        width="{{ $resized.Width }}"
+        height="{{ $resized.Height }}"
+        {{ with $placeholder }}style="
+            background-image: url('data:image/jpg;base64,{{ .Content | base64Encode }}');
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            background-size: cover;"{{ end }}
+        alt="{{ $.Text }}" {{ with $.Title }} title="{{ . }}" {{ end }}
+        {{ with index ($fragments ) 1 }}class="{{ . }}"{{ end }}
+        loading="lazy"
+        >
+    {{ end }}
+{{ else }}
+    <img src="{{ .Destination | safeURL }}"
+    alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }}
+    loading="lazy"
+    >
+{{ end }}