How to use Hugo image processing?

support
1

I want to generate thumbnails while listing items in range, is it even possible and if not what is the best solution for this?

I have Hugo + Netlify CMS project so all non static images uploaded by CMS user are stored in /uploads dir. What I want to achieve is to generate thumbnails for these image (not for all, only for those uploaded in gallery collection).

Here is my range code snippet:

{{ range .Params.gallery.list }}
	{{ $image := .imgUrl }} /* .imgUrl returns /path/to/image */
	{{ $thumb := $image.Fill "600x400" }}
	<a href="{{- .imgUrl -}}">
		<img src="{{- $thumb -}}">
	</a>
{{ end }}

Obviously this code does not work)) As I don’t understand quite good how image processing works in Hugo. Also I’m not sure if this is even a good idea to resize/crop images every time on page reload. So I need some advice on how to achieve this type of result?

2

Image Processing can be used only for the global and page Image Resources

Image Resources can reside either under the assetDir and can be retrieved with the resources.Get method or under Page Bundles and can be rendered with the .Resources.ByType method.

1 Like
3

Netlify CMS seems to support page bundles now: Beta Features! | Netlify CMS | Open-Source Content Management System

The images wouldn’t be resized/cropped on page reload, but on generation, i.e. once only. That’s the approach I take in my personal site, and I am certain I am not alone.

2 Likes