Cache busting for resources.Copy

support
13

Try this:

git clone --single-branch -b hugo-forum-topic-45006 https://github.com/jmooring/hugo-testing hugo-forum-topic-45006
cd hugo-forum-topic-45006
hugo server

The approach I took is to create a map of the images: the original plus each derivative.

The map looks like:

{
  "jpeg": {},
  "original": {},
  "webp": {}
}

Where each of the {} above is an image resource.

Then I range through the map of images to create the picture element.

layouts/_default/single.html 
{{ with .Resources.GetMatch "cover.*" }}
  {{/* Create map of images. */}}
  {{ $iMap := dict "original" . }}
  {{/* Set processing options. */}}
  {{ $formats := slice "webp" "jpeg" }} {{/* Last one is fallback. */}}
  {{ $anchor := "TopLeft" }}
  {{ $targetWidth := div $iMap.original.Width 2 }}
  {{ $targetHeight := div $iMap.original.Height 1.45 | int }}
  {{/* Create new images. */}}
  {{ $base := strings.TrimRight (path.Ext $iMap.original.Key) $iMap.original.Key }}
  {{ range $format := $formats }}
    {{ $opts := printf "%dx%d %s %s" $targetWidth $targetHeight . $anchor }}
    {{ with $iMap.original.Fill $opts | fingerprint }}
      {{ $ext := strings.TrimLeft "." (path.Ext .Key) }}
      {{ $targetPath := printf "%s.%d.%s" $base (crypto.FNV32a .Data.Integrity) $ext }}
      {{ with resources.Copy $targetPath . }}
        {{ $iMap = merge $iMap (dict $format . ) }}
      {{ end }}
    {{ end }}
  {{ end }}
  {{/* Render the picture element. */}}
  <picture>
    {{ range $formats }}
      {{ with index $iMap . }}
        <source srcset="{{ .RelPermalink }}" type="{{ .MediaType.Type }}">
      {{ end }}
    {{ end }}
    {{ with index $iMap (index $formats (sub (len $formats) 1)) }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  </picture>
{{ end }}

This produces:

public/
├── posts/
│   ├── post-1/
│   │   ├── cover.1906466728.jpg
│   │   ├── cover.2036869910.webp
│   │   ├── cover.jpg
│   │   └── index.html
│   └── index.html
├── favicon.ico
└── index.html

A side benefit… you can easily wrap the picture element with:

<a href="{{ $iMap.original.RelPermalink }}">
  ...
</a>
3 Likes