I’m trying to figure out the image processing on my hugo server (the site is not live yet), and the docs page notes:
the processing methods listed below do not work on images inside your /static folder.
After some reading I realized I need to move the images to either assets or resources folder. I decided to create /assets/images folder and place my images there.
The issue is, I cannot make the images show up in my posts .md pages. I used the most basic markdown code when the images were in the /static folder, which was: . This worked just fine.
I assumed the issue is with the relative/absolute path that is auto generated but I’m not sure what it is exactly. I tried all the paths I could think of: images/image01.png /images/image01.png ./images/image01.png assets/images/image01.png /assets/images/image01.png ./assets/images/image01.png
I understand half of these are plain wrong but I was just throwing them at the wall to see if anything will stick. I also tried moving images from the assets/images folder directly to assets, and again trying out different file paths. No luck either.
So finally I guess the issue is not with the markdown syntax file path but rather some template file or something. I’m quite a noob when it comes to these thing so I’d appreciate any pointers into what I can try to fix this. Preferably in a way that won’t create further problem when I start working on the image processing part.
Still, I wasn’t been able to make it work. That code placed in my .md document renders as plain text. Does it need a shortcode to work?
I tried putting the general statement from Hugo’s Image Processing page in a shortcode img_load.html file, then invoking it in my .md file via {{<img_load ... />}} but that threw me a server error.
Also, how will imagename.jpg path from that statement recognize that I have imagename.jpg picture in the assets/images folder? Do I need to modify it to say something like images/imagename.jpg or similar?
The more I’m reading about this, the more it looks like I need to create Page Bundles for Image Processing to work. Which is something I really don’t want to do, I hope there is a way around it.
@thx-1138 it goes in your layout or partial (.html) not your content files, unless enable and use inline shortcodes (and I’m not sure how resources with shortcodes works or doesn’t work).
I’m confused by the fact that both general form from Image Processing doc page and the example jhvanderschee was kind to provide have the actual file path in them. If I place that code into a layout/partial wouldn’t that render the same image over and over on all pages?
Edit: I just tried to insert it after the {{ .Content }} in baseof.html and single.html. The example from Image Processing doc page doesn’t render at all, as in there is nothing in the rendered html source. jhvanderschee’s example creates a server error. The path I used for this trial was “images/image01.png”.
I still do not understand how to tell Hugo to look for images in the assets/images folder instead of static. There is a plethora of examples online on how to process images but virtually all of them require for the images to be put in the same posts subfolders together with the .md file.
That’s understandable. My understanding is that the docs do this to avoid overloading the discussion with other topics, but you are right, you won’t want the actual file path.
What you likely want is either use a page or site param, a shortcode, or to use a render hook:
An example using shortcodes is:
Removing the image processing (for simplicity) we get:
The issue is, I cannot make the images show up in my posts .md pages. I used the most basic markdown code when the images were in the /static folder, which was:  . This worked just fine.
You can not use it like this (in markdown). Resizing only works on resources as you assumed correctly. A resource is a file in the resource directory or a file in a page bundle. To access resources in markdown you will have to use a shortcode.
Note that you can define the static dir as the resources directory. Once you do that, you can just use the static directory and write something like:
I’m afraid that after banging my head against the wall for several days I did what I wanted by using simple css code transforms/adjustments. I hope the ideas from this thread can help someone more versed in Hugo/web development than me. I’m just a beginner trying to build my personal webpage and for me the documentation is all but illegible. I had to take the easy way out. Nevertheless, I do appreciate you chiming in with the examples - thank you.
@cshoredaniel I do appreciate your help and inputs, if anything I apologize if I came of as being critical to those on this thread who tried to help. That was not my intention and I hope this discussion can help others in the future.
@jhvanderschee I know what you mean, I understand that Hugo is very capable it’s just the documentation is non-revealing on how to employ those capabilities. I’ll give it another look in three and half years lol.
Hi, I am having the same query and I am not able to figure out how to do it. I would like to call the image from ‘assets/image/filename.jpg’ using  in the markdown file, similar to what’s done for static folder.
As per this post, this must be possible if I make use of markdown render hooks. But, I am not able to figure out what exactly to write in the /layouts/_default/_markup/render-image.html file. Can someone help me out?
.