What is the current status of image processing in Hugo?

support
1

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.

image
image690×923 156 KB

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).

image
image751×122 7.99 KB

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.

2

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

https://gohugo.io/content-management/image-processing/

3

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

4

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.

5

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.

6

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.

8

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