Image Processing - improve documentation

Hi,

at page [https://gohugo.io/content-management/image-processing/#readout](http://Image Processing) the example is very poor and I had quite some time figuring out how to show images in my /content/post/my-post/gallery/*.png in the resulting html.

First, the code is

{{ with .Resources.ByType "image" }}
{{ end }}

But this produces absolutely no list of images. What actually worked for me was switching the with for range.

{{ range .Resources.ByType "image" }}
  <img src="{{ .RelPermalink }}" alt="{{ .Title }}">
{{end}}

Can the documentation be improved?

While I’m not sure if it fits your exact use case I added an implementation to After Dark you may wish to study to understand how image processing can be used to create responsive images:

Hope this helps!

PR are always welcome.

Nope it does not, it does as advertised: “…get all images in a Page Bundle”.

What you want is:

{{ with .Resources.ByType "image }}
   {{ range . }}
   [ ... ]
   {{ end }}
{{ end }}

Thank, you. I am not sure I would do PR if I do not understand how it should work in the first place.

Your example worked for me. Is there any difference in treating list versus single pages?

I have this code in both single.html and list.html:

{{ range .Resources.Match "images/*" }}
I got picture resource.
{{ end }}

And it works for any leaf PageBundle (e.g. content/downloads/test/index.md) but not for content/downloads/_index.md, while both folders have images folder with content ready.

I also noticed, if I delete the resources folder, sometimes I get mixed results (images start to show).

Yes, that’s by design. See row 4 in the table here.

Hi everyone - not exactly on topic, but I didn’t find a better place to ask: When using the Image processing on page resources, as far as I experienced the original images always get copied over as well…which (at least in my case - and I guess in 99% of cases) is unnessesary, bc you normally want to use the processed images in your Website, right?
So is there a possibility to stop hugo from doing that?

Put them in static folder

Well if I put them in the static folder they only get copied over as they are. I don’t want them to be in the final website as they are, I only want the processed (resized) images to be in the in the website

Then you should resize and compress them yourself

Well thank you for your help…
(just wondered if I was missing to see smth obvious as it seems to be a weird beaviour to me - everything else in the content folder that gets processed isn’t additionally copied over “as-is”)

Hugo does leave bundled images as they are and you can access them if needed (I use that fact to provide something to zoom into from time to time).

If you don’t want or cannot have large images clogging your webserver space, then yes, you have to do a bit of pre-processing. Size them down / optimize them to something reasonable, then let Hugo automate the rest of the way.

2 Likes

Ok, thanks anyway!