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

1 files 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>