layouts/partials/cover.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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 }}