initial: support lqip and responsive image rendering/resizing

2021-09-18 11:20:39 +02:00
commit 3cfc4e6945
21 changed files with 380 additions and 0 deletions
@@ -0,0 +1,28 @@
+{{ $class := .class }}
+{{ $alt := .alt }}
+{{ $noscriptSupport := .noscript }}
+{{ $imgDict := .imgDict }}
+{{ if $noscriptSupport }}
+<noscript>
+    <!-- TODO: add responsiveness -->
+    <img src="{{ $imgDict.default.Permalink }}" {{ with $alt }} alt="{{ . }}" {{ end -}} 
+    class="{{ $class }}" loading="lazy" 
+    {{- with $imgDict.default }} height="{{ .Height }}" width="{{ .Width }}" {{ end -}}>
+</noscript>
+{{ end }}
+<img 
+{{- with $imgDict.lqip -}}
+    {{- $placeholderB64 := .Content | base64Encode -}}
+    {{- if gt (len $placeholderB64) 2048 }}
+        src="{{ .Permalink }}"
+    {{- else }}
+        src="data:{{ .MediaType }};base64,{{ $placeholderB64 }}"
+    {{- end }}
+    data-src="{{ $imgDict.default.Permalink }}" 
+    class="{{ with $class }}{{ . }} {{ end }}blur-up lazyload" 
+{{ else }}
+    src="{{ $imgDict.default.Permalink }}" class="{{ $class }} lazyload" 
+{{- end -}}
+{{- with (default $imgDict.default $imgDict.lqip) }} height="{{ .Height }}" width="{{ .Width }}" {{- end -}}
+{{- if $imgDict.responsive -}}{{ with partial "renderer/_srcset" $imgDict }} data-sizes="auto" data-srcset="{{ . }}" {{- end }}{{- end -}}
+{{- with $alt }} alt="{{ . }}" {{- end }}>