Resize animated Gif to convert in png image

support
1

Hello,

If I understand correctly, support for resizing animated GIF images has been supported since Hugo version 0.101.

I wanted to look into this option, but the rendering is nothing more than a conversion to PNG.

Have I misunderstood the function?

Thanks

render-image.html

-----------
    {{ if and $image (eq $image.MediaType.SubType "gif") }}

      {{ if ge $image.Width "800" }}

        {{ $XS := $image.Resize "250x gif" }}
        {{ $SM := $image.Resize "300x gif" }}
        {{ $MD := $image.Resize "400x gif" }}
        {{ $LG := $image.Resize "500x gif" }}
        {{ $XL := $image.Resize "700x gif" }}
        {{ $XXL := $image.Resize "800x gif" }}
        {{ $alt := .PlainText | safeHTML }}
        {{ $caption := "" }}
        {{ with .Title }}
          {{ $caption = . | safeHTML }}
        {{ end }}
        
        <figure>
          <a href="{{ $image.RelPermalink }}">
            <img class="mx-auto d-block"
              sizes="(max-width: 400px) 250px,
                    (max-width: 500px) 300px,
                    (max-width: 768px) 400px,
                    (max-width: 992px) 500px,
                    (max-width: 1440px) 700px,
                    800px"
              srcset="{{ $image.RelPermalink }} 250w, 
                      {{ $image.RelPermalink }} 300w, 
                      {{ $image.RelPermalink }} 400w, 
                      {{ $image.RelPermalink }} 500w, 
                      {{ $image.RelPermalink }} 700w, 
                      {{ $image.RelPermalink }} 800w"
              src="{{ $image.RelPermalink }}"
              alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
              >
          </a>
          {{ with $caption }}
            <figcaption class="text-center">{{ . | markdownify }}</figcaption>
          {{ end }}
        </figure>
      {{ end }}

----------

Repository GitHub - hacf-admin/blog_hacf at static_cms
But render-image.html is not update with code for gif.

2

Tested with v0.101.0 and v0.113.0. This is not a new bug.

If you have an empty image cache (resources/_gen/images), the .Width and .Height methods return the original dimensions instead of the resized dimensions when you run hugo or hugo server for the first time. Note that the images in the cache (and the published images) are the correct size (i.e., resizing was successful).

If you run hugo or hugo server again (the image cache is not empty) the .Width and .Height methods return the correct (resized) dimensions.

This behavior is limited to animated GIF images. Non-animated GIF images work as expected, as do JPEG, WebP, etc.

Reproducible example (includes an animated GIF and a non-animated GIF):

git clone --single-branch -b hugo-forum-topic-44751 https://github.com/jmooring/hugo-testing hugo-forum-topic-44751
cd hugo-forum-topic-44751
rm -rf resources/_gen/images/ && hugo server

Then stop the server, and restart without clearing the image cache:

hugo server

See https://github.com/gohugoio/hugo/issues/11079.

1 Like
3

Thanks for your feedback.

I took the time to try a few things before replying.

I deleted the contents of the image folder in resource folder. then ran the command again, but it didn’t work the first time.

Explain:
In my render-image I had this organization.

If image from URL you do this

Else,
If ne gif or svg,
you resize it and convert it to webp.

Else
you do this.

I wanted to try it this way:

If image from URL you do this

Else,
If not a gif or svg,
you resize it and convert it to webp.
Else if eq gif
You resize
Else
you do this.

But when I run the hugo serve command it tries to build and then timeout error.

I’ve increased the timeout to 60 and 120sec but it doesn’t work.

So I tried like this:

If image from URL you do this

Else,
If ne svg,
you resize.
Else
you do this.

This last way works only with hugo serve command.

Do you know why the second to last one doesn’t work?

And the last solution works with hugo serve command but not when I run a hugo --gc --minify --buildDrafts --builgFutur
(This command is not exactly)

Any ideas?

Thanks in advance

Here’s the problem, it’s the static-cms branch.

4 
{{ if and $image (ne $image.MediaType.SubType "gif" "svg") }}

I think you want

{{ if and $image (not (in (slice "gif" "svg") $image.MediaType.SubType)) }}

And this doesn’t make any sense:

 {{- $src := .Destination | relURL | safeURL -}}

Should be:

{{- $src := .Destination | safeURL -}}

I didn’t look through the rest of it.

1 Like
5

Thank you for these clarifications and corrections.

I have just corrected Destination safeurl and if with slice.

Unfortunately, this doesn’t solve the image generation problem, it always gets stuck somewhere and ends up with a timeout.

Out of curiosity, what’s the difference between what I wrote and the proposed fix?
{{ if and $image (ne $image.MediaType.SubType "gif" "svg") }}
vs
{{ if and $image (not (in (slice "svg" "gif") $image.MediaType.SubType)) }}

Great Thank for your involvement

6

In your example, the animated Gif image isn’t resized? it’s still 480x480?

On the other hand, it is well generated

hugo_resize_gif
hugo_resize_gif909Ă—818 84.2 KB

I Tested with Firefox and Brave.

7

Yes, the image is resized. You are looking at the display size which is defined by the width and height attributes of the img element, which are determined by the .Width and .Height methods on the resource, which are wrong because of #11079.

8

You are correct; there is no difference.

Our documentation, and Go’s text/template documentation, state that the binary comparison operators take 2 arguments (Go’s docs state that eq can take 2 or more arguments).

But we made an undocumented change over three years ago:
https://github.com/gohugoio/hugo/pull/6775

All of the comparison operators (eq, ne, lt, gt, ge, le) are now variadic. I will update the documentation (https://github.com/gohugoio/hugoDocs/pull/2104).

1 Like
9

I am unable to reproduce this. I cloned your repository at 2023-06-11T10:45:54-07:00.

git clone --recurse-submodules https://github.com/hacf-admin/blog_hacf
cd blog_hacf
git checkout static_cms
npm ci
hugo

                   |  EN   
-------------------+-------
  Pages            |  223  
  Paginator pages  |   19  
  Non-page files   |  289  
  Static files     |   34  
  Processed images | 1028  
  Aliases          |  112  
  Sitemaps         |    1  
  Cleaned          |    0  

Total in 21712 ms
10

So it’s time dont work ?

11

I don’t understand your question.

12

Sorry, I misspoke.

So it doesn’t actually resize the image according to my capture, the image doesn’t look 100px?

13

Yes hugo works, but hugo --gc --minify --buildDrafts --buildFuture not work

I’ve just checked and the code in the render-image still excludes gif. You need to delete gif from the following line

if and $image (ne $image.MediaType.SubType "gif" "svg")

Edit : I have just deleted gif, the problem should be of

14

Of course it doesn’t look 100x100. The width and height attributes on the img element are wrong… that’s the bug.

1 Like
15

If you have a little time you can try to restart the static branch, I put it in the version where it doesn’t generate the site.

Thanks