feat: update for better image support

config/_default/config.toml

@@ -78,6 +78,9 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = "layouts"
+    target = "layouts"
   [[module.mounts]]
     source = "node_modules/flexsearch"
     target = "assets/js/vendor/flexsearch"
@@ -87,3 +90,6 @@ rel  = "sitemap"
   [[module.mounts]]
     source = "node_modules/mermaid"
     target = "assets/js/vendor/mermaid"
+  [[module.mounts]]
+    source = "node_modules/@hyas/images/layouts"
+    target = "layouts"

config/_default/params.toml

@@ -46,12 +46,19 @@ siteLinksSearchBox = false
 themeColor = "#fff"
 
 # Images
-quality = 85
+# quality = 85
-bgColor = "#fff"
+# bgColor = "#fff"
-landscapePhotoWidths = [900, 800, 700, 600, 500]
+# landscapePhotoWidths = [900, 800, 700, 600, 500]
-portraitPhotoWidths = [800, 700, 600, 500]
+# portraitPhotoWidths = [800, 700, 600, 500]
-lqipWidth = "20x"
+# lqipWidth = "20x"
-smallLimit = "300"
+# smallLimit = "300"
+
+# Images
+imageResponsive = true
+imageConvertTo = "webp"
+imageImageSizes = ["480","720","1080","1280","1600","2048"]
+singleSize = false
+imageAddClass = "img-fluid lazyload blur-up"
 
 # Footer
 footer = "Powered by <a class=\"text-muted\" href=\"https://www.netlify.com/\">Netlify</a>, <a class=\"text-muted\" href=\"https://gohugo.io/\">Hugo</a>, and <a class=\"text-muted\" href=\"https://getdoks.org/\">Doks</a>"

content/en/blog/say-hello-to-doks/index.md

@@ -9,3 +9,7 @@ weight: 50
 images: ["say-hello-to-doks.png"]
 contributors: ["Henk Verlinde"]
 ---
+
+![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg)
+
+![Screenshot](image003.png)

layouts/_default/_markup/render-image.html

@@ -1,36 +0,0 @@
-{{ $image := "" -}}
-{{ if (urls.Parse .Destination).IsAbs }}
-  {{ $image = resources.GetRemote .Destination -}}
-{{ else -}}
-  {{ $image = .Page.Resources.GetMatch .Destination -}}
-{{ end -}}
-{{ with $image -}}
-  {{ $lqip := $image.Resize site.Params.lqipWidth -}}
-
-  {{ $imgSrc := "" -}}
-  {{ $imgSrcSet := slice -}}
-
-  {{ $widths := site.Params.landscapePhotoWidths -}}
-  {{ if gt $image.Height $image.Width -}}
-    {{ $widths = site.Params.portraitPhotoWidths -}}
-  {{ end -}}
-
-  {{ range $widths -}}
-    {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
-    {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
-    {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
-  {{ end -}}
-  {{ $imgSrcSet = (delimit $imgSrcSet ",") -}}
-
-  {{ if gt $image.Width site.Params.smallLimit -}}
-    <figure class="figure">
-      <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
-      <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}"></noscript>
-      {{ with $.Title }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end -}}
-    </figure>
-  {{ else -}}
-    <img class="img-fluid lazyload blur-up" src="{{ $lqip.Permalink }}" data-src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $.Text }}">
-  {{ end -}}
-{{ else -}}
-  {{ erroridf "image-not-found" "Image not found" -}}
-{{ end -}}

package-lock.json

@@ -14,6 +14,7 @@
         "@babel/core": "^7.18",
         "@babel/preset-env": "^7.18",
         "@fullhuman/postcss-purgecss": "^4.1",
+        "@hyas/images": "^0.2.0",
         "auto-changelog": "^2.4",
         "autoprefixer": "^10.4",
         "bootstrap": "^5.1",
@@ -1750,6 +1751,12 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@hyas/images": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@hyas/images/-/images-0.2.0.tgz",
+      "integrity": "sha512-MWX6VoL6mOhbnXgt2pSsISYS87x1ZfQV+cFQ0ozvEZ944OJdeEph4vNyGpZAioFchTzEaZ3tK2gnRj1MOgaerQ==",
+      "dev": true
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -8155,6 +8162,12 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@hyas/images": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@hyas/images/-/images-0.2.0.tgz",
+      "integrity": "sha512-MWX6VoL6mOhbnXgt2pSsISYS87x1ZfQV+cFQ0ozvEZ944OJdeEph4vNyGpZAioFchTzEaZ3tK2gnRj1MOgaerQ==",
+      "dev": true
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",

package.json

@@ -42,6 +42,7 @@
     "@babel/core": "^7.18",
     "@babel/preset-env": "^7.18",
     "@fullhuman/postcss-purgecss": "^4.1",
+    "@hyas/images": "^0.2.0",
     "auto-changelog": "^2.4",
     "autoprefixer": "^10.4",
     "bootstrap": "^5.1",