Animated GIFs

[mousemat86]

Does the community know a way to use animated GIFs as content and not just stills?

I'm guessing something clever using this: https://gohugo.io/content-management/image-processing/#process

[mousemat86]

so adding this to /layouts/_default/single.json

{{- $context := . -}}
{{- $params := .Page.Params | merge .Site.Params.Page -}}

{{- with partial "function/getImageSlice.html" .  -}}
  {{- $index := len . -}}
  {{- $context.Scratch.Add "img" slice -}}
  {{- range sort . "Name" "desc" -}}
    {{- $image := . -}}
    {{- $index = sub $index 1 -}}
    {{- $alt := .Name -}}
    {{- with $params.unifiedAlt -}}
      {{- $alt = . -}}
    {{- end -}}

    {{- $lores := $image -}}  <!-- Initialize $lores -->
    {{- $hires := $image -}}  <!-- Initialize $hires -->

    {{- if ne $image.MediaType.SubType "gif" -}} <!-- Check if not a GIF -->
      {{- $lores = $image.Resize (site.Params.loResOpt | default "700x webp Lanczos q60") -}}
      {{- $hires = $image.Resize (site.Params.hiResOpt | default "2000x webp Lanczos q75") -}}
    {{- end -}}

    {{- $context.Scratch.Add "img" (dict
      "index" (int $index)
      "alt" (string $alt)
      "loUrl" (string $lores.RelPermalink)
      "loImgH" (int $lores.Height)
      "loImgW" (int $lores.Width)
      "hiUrl" (string $hires.RelPermalink)
      "hiImgH" (int $hires.Height)
      "hiImgW" (int $hires.Width)
      )
    -}}
  {{- end -}}
    {{ $context.Scratch.Get "img" | jsonify }}
{{- else -}}
[]
{{- end -}}

Throws no errors and processes the images upon hugo server however pages load but no images display

I also added this to params.toml

# Add options specifically for GIF images
gifOpt = "keep"  # This is a custom option to indicate that GIFs should be preserved

Any body have an idea if the javascript tiling effect should be able to display GIFs – I suspect maybe not?

[Sped0n]

Based on my understanding it should work, what's the hugo -D command output?

Start building sites …
hugo v0.134.0+extended darwin/arm64 BuildDate=2024-09-03T09:54:22Z VendorInfo=brew


                   | EN
-------------------+------
  Pages            |  11
  Paginator pages  |   0
  Non-page files   |   0
  Static files     |  13
  Processed images | 180
  Aliases          |   0
  Cleaned          |   0

Total in 72 ms

What's the number for Processed images?

[Sped0n]

Screen.Recording.2024-09-04.at.12.43.24.mp4

Actually it works on my laptop?

GIF file I'm using

{{- $context := . -}}
{{- $params := .Page.Params | merge .Site.Params.Page -}}

{{- with partial "function/getImageSlice.html" .  -}}
  {{- $index := len . -}}
  {{- $context.Scratch.Add "img" slice -}}
  {{- range sort . "Name" "desc" -}}
    {{- $image := . -}}
    {{- $index = sub $index 1 -}}
    {{- $alt := .Name -}}
    {{- with $params.unifiedAlt -}}
      {{- $alt = . -}}
    {{- end -}}
    {{- $lores := $image -}}
    {{- $hires := $image -}}
    {{- if ne $image.MediaType.SubType "gif" -}}
      {{- $lores = .Resize (site.Params.loResOpt | default "700x webp Lanczos q60") -}}
      {{- $hires = .Resize (site.Params.hiResOpt | default "2000x webp Lanczos q75") -}}
    {{- end -}}
    {{- $context.Scratch.Add "img" (dict
      "index" (int $index)
      "alt" (string $alt)
      "loUrl" (string $lores.RelPermalink)
      "loImgH" (int $lores.Height)
      "loImgW" (int $lores.Width)
      "hiUrl" (string $hires.RelPermalink)
      "hiImgH" (int $hires.Height)
      "hiImgW" (int $hires.Width)
      )
    -}}
  {{- end -}}
    {{ $context.Scratch.Get "img" | jsonify }}
{{- else -}}
[]
{{- end -}}

[mousemat86]

Working for me too – must have been a cache issue previously, or did you change some of the code?

Thanks for looking at that 🙏

[Sped0n]

or did you change some of the code?

just the single.json

Working for me too

glad it works