Resize and Fit fail to render some of images

support
1

I use partial below to create responsive images. Everything works fine when working on in-memory server, things breaks when generating deployment.

To make sure no stale cache interfere with the result I use hugo --minify --ignoreCache --cleanDestinationDir --gc to generate deployment. After that in public folder I get image file as expected but half of them are broken, and can’t be open in any image viewer. All images I use are JPG.

The partial I use for every image:

{{ $placeholder := "images/placeholder.jpg" }}
{{ $params := (dict "lazy" true "sizes" (dict) "class" "" "alt" "" "title" "") }}
{{ $params = merge $params . }}

{{ $width := "" }}
{{ $height := "" }}
{{ $sizes := ""}}

{{ if $params.size }}
{{ $size := split .size "x" }}
{{ $width = index $size 0 }}
{{ $height = index $size 1 }}
{{ end }}

{{ $srcset := "" }}
{{ $src := "" }}

{{ if $params.static }}
{{ $src = $params.src | relURL }}
{{ else }}
{{ with $params.page.Resources.GetMatch $params.src }}
{{ $orig := . }}

{{ if eq $width "" }}
{{ $width = $orig.Width }}
{{ end }}

{{ if eq $height "" }}
{{ $height = $orig.Height }}
{{ end }}


{{ if $params.size }}
{{ $src = ($orig.Resize $params.size).RelPermalink }}
{{ else }}
{{ $src = $orig.RelPermalink }}
{{ end }}

{{ $index := 0 }}

{{ range $key, $value := $params.sizes }}
{{ $w := index (split $value "x") 0 }}
{{ if eq $index 0 }}
{{ $srcset = printf "%s %sw" ($orig.Resize $value).RelPermalink $w }}
{{ $sizes = printf "%s %svw" (printf "(min-width: %spx)" $key) $w }}
{{ else }}
{{ $srcset = printf "%s, %s %sw" $srcset ($orig.Resize $value).RelPermalink $w }}
{{ $sizes = printf "%s, %s %svw" $sizes (printf "(min-width: %spx)" $key) $w }}
{{ end }}
{{ $index = add $index 1 }}
{{ end }}
{{ end }}
{{ end }}

{{ with $params }}
<img src="{{ if .lazy }}{{ $placeholder | relURL }}{{ else }}{{ $src }}{{ end }}" alt="{{ .alt }}" class="{{ if .lazy }}lazyload{{ end }} {{ .class }}" data-src="{{ $src }}" srcset="{{ $srcset }}" sizes="{{ $sizes }}" title="{{ with $params.title }}{{ . }}{{ end }}">
<noscript>
  <img src="{{ $src }}" alt="{{ .alt }}" class="{{ .class }}" srcset="{{ $srcset }}">
</noscript>
{{ end }}

Example invocation looks like this

{{ partial "image" (dict "src" (printf "images/%s" .Params.Image) "alt" (printf "Thumbnail for '%s' post" .Params.Title) "size" "260x146" "sizes" (dict "320" "206x116" "375" "260x146" "425" "315x177" "768" "365x205" "1024" "220x124") "page" .) }}

As we know dict is unordered data type so maybe there is a problem with cache when we resize multiple times the same image with different parameters, bigger and smaller at random order.

I also tried replacing Resize with Fit, results are similar - half of images are broken.

I use macOS 10.15.7, Hugo v0.79.0-DEV/extended.

2

Random order: is this only about the size or is any specific image sometimes rendered and sometimes not? There are limits to what counts as image and what not. Some image generation tools create faulty headers and though some image viewers can show them, the CLI software (like mogrify) can’t read them. I had a Canon digicam 15 years ago that did that. Find out if the same images aren’t rendered, then take one of them, open in a graphics program, force “save as” and overwrite the original. If it rendered properly afterwards you have your work cut out :wink:

I see nothing in your sample code that would fail in some cases and not in other cases. But as I wrote: It’s probably not the template. Image format, filenames (with spaces?) come to mind.

3

All the images in posts are lowercase, kebab-case JPGs. All created in the same way using https://www.canva.com/ and later processed with Gimp. All have the same width and height.

On taxonomy page with thumbnails some images are generated properly and display well, some of them not display at all - their output files are broken. Those faulty ones can’t be even opened, their size is 0 bytes - it can be verified by checking generated /public folder.

I created sample, minimal repo to reproduce this problem. The repo uses theme as submodule so the easiest way to clone it is:

git clone --recurse-submodules git@github.com:adamfaryna/hugo-images-test.git

Make sure to npm i

The images renders fine when hugo server --gc --disableFastRender -v.

The generated images are broken on deployment build:

hugo --minify --ignoreCache --cleanDestinationDir --gc && npm run serve

It’s Github so the default repo is “main”.

I store project in case sensitive virtual volume so even though I work on macOS the case insensitivity is not a cause of issue.

I also submited bug report via Github since I was able to reproduce the problem in sample repo https://github.com/gohugoio/hugo/issues/8025.

4

If anybodyelse will stumble upon this problem, @jmooring come with the solution to not use --ignoreCache while calling hugo.

Use this instead:

hugo --minify --cleanDestinationDir --gc