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,2 @@
+{{ partial "partials/lazyimg-setup" }}
+<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, "js");</script>
@@ -0,0 +1,6 @@
+{{- $lsPath := "lazyimg/lazysizes/lazysizes.min.js" -}}
+{{- with (resources.Get $lsPath) -}}
+    <script src="{{ .Permalink }}" async></script>
+{{- else -}}
+    {{ errorf "could not locate %s" $lsPath }}
+{{- end }}
@@ -0,0 +1,32 @@
+{{/* Parameter Parsing */}}
+{{ $usage := `lazyimg:
+    Usage like:
+    - {{ partial "lazyimg" "image.jpg" }}
+    - {{ partial "lazyimg" (resources.Get "image.jpg") }}
+
+    ...or more verbose by specifying a dict overriding the site.Params.lazyimg, e.g.:
+    - {{ partial "lazyimg" (dict "resizer" "auto" "renderer" "lqip") }}
+    - {{ partial "lazyimg" (dict "img" "image.jpg" "responsiveSizes" (slice "320px" "640px") "resizer" "responsive") }}
+
+    Please ensure that image exists in ./assets directory.
+` }}
+
+{{ $params := merge site.Params.lazyimg (dict 
+    "img" . 
+    "resizer" (default "responsive" site.Params.lazyimg.resizer) 
+    "renderer" (default "lqip" site.Params.lazyimg.renderer)
+)}}
+{{ if reflect.IsMap . }}
+    {{ $params = merge $params . }}
+{{ end }}
+{{ $resType := (printf "%T" $params.img) }}
+{{ if not (in $resType "resource") }}
+    {{ $params = merge $params (dict "img" (resources.Get $params.img)) }}
+{{ end }}
+{{ if not $params.img }}
+    {{ errorf "image path ./assets/%s does not exist" $params.img }}
+    {{ warnf $usage }}
+{{ end }}
+
+{{ $sizes := partial (printf "resizer/%s" $params.resizer) $params }}
+{{ return (partial (printf "renderer/%s" $params.renderer) (merge (dict "imgDict" $sizes) $params)) }}
@@ -0,0 +1,7 @@
+<picture>
+  <!-- TODO(kdevo): load webp images -->
+  <source type="image/webp"
+    srcset="
+      URL 100w,
+      URL 200w">
+</picture>
@@ -0,0 +1,8 @@
+{{/* Input: Input: dict {"responsive": [RESOURCE, ...]}. Output: srcset string */}}
+
+{{ $images := .responsive }}
+{{ $srcset := slice }}
+{{ range $images }}
+    {{ $srcset = append (printf "%s %dw" .Permalink .Width) $srcset }}
+{{ end }}
+{{ return  (delimit $srcset ",\n") }}
@@ -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 }}>
@@ -0,0 +1,35 @@
+{{/* Input: Params. Output: dict {"default": RESOURCE, "lqip": RESOURCE, "responsive": [RESOURCE, ...]} */}}
+
+{{ $res := .img }}
+{{ $resizeOptions := .resizeoptions }}
+{{ $sizes := .responsivesizes }}
+
+{{ $imageDict := partial "resizer/simple" . }}
+{{ $default := $imageDict.default }}
+{{ $name := replace (path.Base ($res.Permalink)) (path.Ext $res.Name) "" }}
+
+{{/* Responsive img sizing from LQIP width to default width */}}
+{{ $startWidth := (default 100 $imageDict.lqip.Width) }}
+{{ $sizes := seq $startWidth 50 $imageDict.default.Width }}
+{{ $n := 5 }}
+{{ if gt $n (len $sizes) -}}
+    {{ $n = len $sizes }}
+{{- end }}
+{{/* Partition the sizes */}}
+{{ $part := int (div (len $sizes) $n) }}
+{{ $wset := slice }}
+{{ range (seq 1 (sub $n 1)) -}}
+    {{ $wset = append (index $sizes (mul $part .)) $wset }}
+{{- end }}
+{{ $wset = (uniq (append (int $imageDict.default.Width) $wset)) }}
+
+{{/* Fill responsive slice: */}}
+{{ $responsive := slice }}
+{{ $break := false }}
+{{- range $wset -}}
+    {{- $resized := $res.Resize (printf "%dx %s" . $resizeOptions) -}}
+    {{- $resized := slice $resized | resources.Concat (printf "%s-%dx%s" $name . (path.Ext $default.Permalink)) -}} 
+    {{- $responsive = append $resized $responsive -}}
+{{- end -}}
+
+{{- return merge (dict "responsive" $responsive) $imageDict -}}
@@ -0,0 +1,26 @@
+{{/* Input: Params. Output: dict {"default": RESOURCE, "lqip": RESOURCE, "responsive": [RESOURCE, ...]} */}}
+
+{{ $res := .img }}
+{{ $resizeOptions := .resizeoptions }}
+{{ $sizes := .responsivesizes }}
+
+{{ $imageDict := partial "resizer/simple" . }}
+{{ $default := $imageDict.default }}
+{{ $name := replace (path.Base ($res.Permalink)) (path.Ext $res.Name) "" }}
+
+{{/* Fill responsive slice. Abort loop with $break when size exceeded (needed due to templating restrictions). */}}
+{{ $responsive := slice }}
+{{ $break := false }}
+{{- range $sizes -}}
+    {{ if not $break }}
+        {{- $resized := $res.Resize (printf "%s %s" . $resizeOptions) -}}
+        {{- $resized := slice $resized | resources.Concat (printf "%s-%s%s" $name . (path.Ext $default.Permalink)) -}} 
+        {{- $responsive = append $resized $responsive -}}
+        
+        {{- if or (gt $resized.Width $default.Width) (gt $resized.Height $default.Height) -}}
+            {{- $break = true -}}
+        {{- end -}}
+    {{- end -}}
+{{- end -}}
+
+{{- return merge (dict "responsive" $responsive) $imageDict -}}
@@ -0,0 +1,16 @@
+{{/* Input: Params. Output: dict {"default": RESOURCE, "lqip": RESOURCE} */}}
+
+{{ $res := .img }}
+{{ $maxSize := .maxsize }}
+{{ $lqipSize := .lqipsize }}
+{{ $resizeOptions := .resizeoptions }}
+
+{{ $name := replace (path.Base ($res.Permalink)) (path.Ext $res.Name) "" }}
+
+{{/* Resize base images */}}
+{{ $lqip := $res.Resize (printf "%s %s" $lqipSize $resizeOptions ) }}
+{{ $lqip := slice $lqip | resources.Concat (printf "%s-%s%s" $name $lqipSize (path.Ext $lqip.Permalink)) }} 
+{{ $default := $res.Resize (printf "%s %s" $maxSize $resizeOptions) }}
+{{ $default := slice $default | resources.Concat (printf "%s-%s%s" $name $maxSize (path.Ext $default.Permalink)) }} 
+
+{{ return dict "lqip" $lqip "default" $default }}
@@ -0,0 +1 @@
+{{/* TODO(kdevo) */}}