What is the current status of image processing in Hugo?

I’ve been trying to get image processing to work in Hugo for the last three days or so.
Now I’m asking for some tailwind of the community, maybe someone has a simple answer for me.

All topics and related code, which I was able find deals either with super sophisticated shortcodes, where I can’t see any start (or make sense out of it), or it is just a part of incomplete code, where the writer assumes, that I know all the rest of it. I don’t.

My question:

What is the current status of image processing in Hugo? Or phrased differently:

What is the most simple form of some image code, which will output and process/compress a simple image?

I have tried:

  • to put an image in the same folder like the _index.md > content/posts/my-post + image.jpg
  • to put an image in the root-assets folder like assets/images/image.jpg
  • to put an image in the static folder at the root level.

I have followed the docs to include and process my images with the following code:

Get the image as a resource
{{ $image := .Resources.GetMatch “/images/November-Sunrise.jpg” }}

Code to output the image
{{ $image.RelPermalink }}" width=“{{ $image.Width }}” height="{{ $image.Height }}

This is the code for the src attribute of the image (taken straight from the docs).

In all three cases I get an unrendered output/code as a result.
As you can see in the first screenshot in the bottom right corner, no images are being processed (Or the one I’ve tried to include).

I also found this post Image render hook does not work with page resources any more · Issue #6851 · gohugoio/hugo · GitHub where this feature is being discussed.

I must be doing something wrong? Thanks in advance for some ideas on how to solve this simple one.

The first section of the image processing documentation provides two very simple examples.


Thank you, that is the code that I wrote in my post, which is not working and why I’m asking.

You’re trying to use the .Resources.Get method with a global resource. That’s not going to work.

When looking at the code examples in the docs, also look at the file tree before each example.

Yes, I know that I must be doing something wrong with the paths/wrong folder or so - However, as you can see in the screenshot (at the top), I did put my image in the root assets folder on my project as it states in the docs > “A global resource is a file within the assets directory” and it’s not working.

Here’s a dirt simple example:

git clone --single-branch -b hugo-forum-topic-49600 https://github.com/jmooring/hugo-testing hugo-forum-topic-49600
cd hugo-forum-topic-49600
hugo server

See the image processing code in layouts/_default/single.html.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.