feat: update for better image support

This commit is contained in:
Henk Verlinde 2022-06-30 11:57:39 +02:00
parent 75d250b240
commit 7204cfeb31
8 changed files with 37 additions and 42 deletions

View File

@ -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"

View File

@ -46,12 +46,19 @@ siteLinksSearchBox = false
themeColor = "#fff"
# Images
quality = 85
bgColor = "#fff"
landscapePhotoWidths = [900, 800, 700, 600, 500]
portraitPhotoWidths = [800, 700, 600, 500]
lqipWidth = "20x"
smallLimit = "300"
# quality = 85
# bgColor = "#fff"
# landscapePhotoWidths = [900, 800, 700, 600, 500]
# portraitPhotoWidths = [800, 700, 600, 500]
# lqipWidth = "20x"
# 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>"

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

View File

@ -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)

Binary file not shown.

After

Width:  |  Height:  |  Size: 433 KiB

View File

@ -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 -}}

13
package-lock.json generated
View File

@ -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",

View File

@ -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",