From e3269f63200938bb9ede37efc2598a8193f46dd2 Mon Sep 17 00:00:00 2001
From: tdro <tdro@noreply.example.com>
Date: Tue, 13 Dec 2022 20:21:18 -0500
Subject: themes/default/layouts/_default/_markup/render-image: Use new colors
 method

To create image gradient fallback for native browser lazy loading and volatile
network conditions
---
 .../layouts/_default/_markup/render-image.html     | 28 ++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/themes/default/layouts/_default/_markup/render-image.html b/themes/default/layouts/_default/_markup/render-image.html
index 150ad54..9481e9d 100644
--- a/themes/default/layouts/_default/_markup/render-image.html
+++ b/themes/default/layouts/_default/_markup/render-image.html
@@ -6,6 +6,7 @@
 {{- $width        := "" -}}
 {{- $height       := "" -}}
 {{- $srcset       := "" -}}
+{{- $colors       := "" -}}
 {{- $figcaption   := "Image/Picture" -}}
 {{- $orientation  := "landscape" -}}
 {{- $dimensions   := "600x360" -}}
@@ -13,8 +14,9 @@
 {{- $relURL       := strings.TrimPrefix .Page.Site.BaseURL .Page.Permalink -}}
 {{- $immutable    := print ($relURL | humanize | urlize) "-" ($source | sha256 | truncate 8 "") -}}
 {{- $fileCache    := print (partial "function-paths.html" "media") "/" $author "/" $immutable -}}
+{{- $cached       := and (fileExists (print "public/" $fileCache ".webp")) (fileExists (print "public/" $fileCache (path.Ext $source))) -}}
 
-{{- if not (and (fileExists (print "public/" $fileCache ".webp")) (fileExists (print "public/" $fileCache (path.Ext $source)))) -}}
+{{- if not $cached -}}
   {{- with $remote := resources.GetRemote $source -}}
     {{- with .Err -}}
       {{- if fileExists $public -}}
@@ -48,6 +50,7 @@
   {{- $local = $local | resources.Copy (print (partial "function-paths.html" "media") "/" $author "/" $immutable (path.Ext $local)) }}
   {{- $width = $local.Width -}}
   {{- $height = $local.Height -}}
+  {{- $colors = $local.Colors -}}
   {{- $writeToFile := $local.Permalink }}
 {{- end }}
 
@@ -59,6 +62,7 @@
   {{- $cache = $cache | resources.Copy (print (partial "function-paths.html" "media") "/" $author "/" $immutable (path.Ext $cache)) }}
   {{- $width = $cache.Width -}}
   {{- $height = $cache.Height -}}
+  {{- $colors = $cache.Colors -}}
   {{- $cache = $cache.Permalink }}
 {{- end -}}
 
@@ -71,6 +75,7 @@
   {{- end -}}
   {{- $width = .Width -}}
   {{- $height = .Height -}}
+  {{- $colors = .Colors -}}
   {{- $cache = .Permalink }}
 {{- end -}}
 
@@ -88,12 +93,31 @@
       {{- with $srcset }}
       <source srcset="{{ $srcset }}" type="image/webp" />
       {{- end }}
-      <img loading="lazy"
+      <img
+        loading="lazy"
         src="{{ or $cache $source }}"
         alt="{{ $.Text | htmlUnescape }}"
         title="{{ $.Text | htmlUnescape }}"
         width="{{ $width }}"
         height="{{ $height }}"
+        {{- printf `style="` | safeHTMLAttr }}
+          {{- with $colors -}}
+            background:
+            {{- range $key, $color := $colors }}
+              {{- $last := sub (len $colors) 1 -}}
+              {{- $separator := "," | safeHTMLAttr -}}
+              {{- $color = $color | safeHTMLAttr -}}
+              {{- $position := "top" -}}
+              {{- if eq $last $key -}}
+                {{- $separator = ";" | safeHTMLAttr -}}
+              {{- end -}}
+              {{- if gt $key 0 -}}
+                {{- $position = "bottom" -}}
+              {{- end -}}
+               radial-gradient(ellipse at {{ $position }}, {{ $color }}, transparent){{ $separator }}
+            {{- end -}}
+          {{- end -}}
+        {{- printf `"` | safeHTMLAttr }}
       />
     </picture>
   </a>
-- 
cgit v1.2.3