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,3 @@
+_vendor/
+resources/
+public/
@@ -0,0 +1,25 @@
+module:
+  imports:
+  - path: github.com/hugo-mods/lazyimg
+  # replacements forces using local version for dev instead of using the remote:
+  replacements:
+  - github.com/hugo-mods/lazyimg -> ../../.
+
+# disableKinds is only needed for this exampleSite to surpress some warnings:
+disableKinds: ["taxonomy", "term"]
+
+Params:
+  lazyimg:
+    resizer: auto
+    renderer: lqip
+
+    # Resizer options:
+    lqipSize: "120x"
+    maxSize: "1920x"
+    responsiveSizes: ["320x", "640x", "768x", "1024x", "1366x", "1600x", "1920x"]
+    resizeOptions: "Lanczos q95"
+
+    # Renderer options:
+    class: "my-img-class"
+    alt: "My logo"
+    noscript: true
@@ -0,0 +1,3 @@
+module github.com/hugo-mods/lazyimg/exampleSite
+
+go 1.13
@@ -0,0 +1,55 @@
+<!doctype html>
+<!-- The 'no-js' class will be removed on lazyimg-setup: -->
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>hugo-mods: lazyimg</title>
+  <style>
+    /* TODO(kdevo): create a nice flexbox image gallery example
+    /* .grid {
+      display: flex;
+      flex-flow: column;
+      justify-content: space-between;
+    } 
+
+    .item {
+      width: 50%;
+      flex-grow: 1;
+      height: auto;
+      max-width: 1024px;
+    } */
+    html {
+      box-sizing: border-box;
+    }
+    
+    img {
+      height: auto;
+      width: 100%;
+      max-width: 1920px;
+
+      border-radius: 5px;
+      border: 1px solid #aaa;
+    }
+  </style>
+  <!-- lazyimg.css ensures that the image is not displayed twice when the user has no-js: -->
+  <style>{{ (resources.Get "lazyimg.css" | minify).Content | safeCSS }}</style>
+
+  <!-- This script basically loads laszysizes asynchronously: -->
+  {{ partial "lazyimg-setup-nojs" . }}
+</head>
+
+<body>
+    <!-- Most basic usage with single parameter that can either be a filename or resource: -->
+    {{ partial "lazyimg" "alps.jpg" }}
+
+    <!-- Here we call the partial by passing a param dict that overrides the site's params: -->
+    {{ partial "lazyimg" (dict "img" "alps.jpg" "class" "my-fancy-class" "alt" "This image shows the alps" "resizer" "simple") }}
+
+    {{ $images := (partial "images" .) }}
+    {{ range $images  -}}
+          <!-- Here we call the partial with a resource: -->
+          {{ partial "lazyimg" . }}
+    {{- end }}
+</body>
+</html>
@@ -0,0 +1,7 @@
+<!-- Create different versions of example image to demonstrate lazy-loading: -->
+{{ $images := slice }}
+{{ range seq 10 -}}
+    {{ $img := resources.Get "alps.jpg" | images.Filter (images.Hue (add -180 (mul . 36))) }}
+    {{ $images = append $img $images }}
+{{- end }}
+{{ return $images }}