diff options
Diffstat (limited to 'layouts/partials/cover.html')
| -rw-r--r-- | layouts/partials/cover.html | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/layouts/partials/cover.html b/layouts/partials/cover.html new file mode 100644 index 0000000..047dd39 --- /dev/null +++ b/layouts/partials/cover.html @@ -0,0 +1,45 @@ +{{ $file := (.Params.cover) }} +{{ $altText := (.Params.coverAlt) }} + +<!-- https://discourse.gohugo.io/t/ability-to-access-site-params-in-the-front-matter-of-archetypes/9744/6 --> +{{ $imgPath := .Page.Param "imgPath" }} + +{{ if $imgPath }} + {{ $file = path.Join $imgPath $file }} +{{ end }} + +{{ with $.Page.Resources.GetMatch $file }} + + {{ $placeholder := (.Resize "800x png") | images.Filter (images.Contrast -100) }} + {{ $encodedPlaceholder := printf "image/png;base64,%s" ($placeholder.Content | base64Encode) }} + + {{ $encodedPixel := "image/gif;base64,R0lGODdhAQABAIABAICAgP///ywAAAAAAQABAAACAkQBADs=" }} + + <!-- + WARNING + For some reason I'm not able to printf the whole data URI + The ":" seems to be the culprit + Trying to escape it didn't work, for now I'm out of ideas + so I'll be simply using "data:[printf]" for now + --> + {{ $testEncodedPlaceholder := printf "data%cimage/png;base64,%s" "\u003A" ($placeholder.Content | base64Encode) }} + + <img + class="lazyload cover" + loading="lazy" + data-srcset="{{ (.Resize "1200x").RelPermalink }} 1200w, {{ (.Resize "800x").RelPermalink }} 800w, {{ (.Resize "500x q90").RelPermalink }} 500w" + src="data:{{ $encodedPlaceholder }}" + data-src="{{ (.Resize "800x").RelPermalink }}" + {{ with $altText }}alt="{{ . }}"{{ end }} + /> + + <noscript> + <img + class="cover" + loading="lazy" + srcset="{{ (.Resize "1200x").RelPermalink }} 1200w, {{ (.Resize "800x").RelPermalink }} 800w, {{ (.Resize "500x q90").RelPermalink }} 500w" + src="data:{{ $encodedPlaceholder }}" + {{ with $altText }}alt="{{ . }}"{{ end }} + /> + </noscript> +{{ end }} |