HUGO

How to show images on post pages if they're located in the assets folder?

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: ![Some description](/image01.png). 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.

Thank you in advance.

Images in the static folder can be called like: ‘/imagename.jpg’. Images in the resource folder need to be called like this:

{{- (resources.Get "imagename.jpg").RelPermalink -}}

Image Processing | Hugo.

Thank you for your reply.

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

Thank you for replying @cshoredaniel.

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:

{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
<figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">
	<img style="max-width: 100%; width: auto; height: auto;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
	<figcaption>
	<small>
	{{ with .Inner }}
	{{ . }}
	{{ end }}
	</small>
	</figcaption>
</figure>  

HTH

Also, can you show your source repo: It may be that we can find the error: See: Requesting Help

Finally, to understand how Hugo finds resources, check out:

Hugo Pipes Introduction | Hugo (gohugo.io)

Hugo is large. I would pick one method and figure out how to get it to work (at this point I think using shortcode is probably the easiest route).

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: ![Some description](/image01.png) . 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:

(.Site.Resources.GetMatch "images/image01.png").Resize "50x50"

However, you should access this through a shortcode. I simplified his code a little for extra readability:

{{< imgresize "images/image01.png" >}}

Calling this shortcode (layouts/shortcodes/imgresize.html):

{{ $image := (.Site.Resources.GetMatch (.Get 0)).Resize "50x50" }}
<img src="{{ $image.RelPermalink }}">

See also: Resize image in Hugo (v 0.32.x) in markdown - Stack Overflow

1 Like

Thank you both for your replies.

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.

2 Likes

@thx-1138 Sorry I couldn’t have been of more help, but good luck as you learn how to work on this!

I had a rough start with Hugo too: Three and a half years later | Hugo Codex. Hang in there!

1 Like

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

1 Like

@thx-1138 <jk>Are you sure you are not a fellow Canadian?</jk>[1]

Seriously though, no need to feel bad…we are all here to learn and help each other :slight_smile: .

[1] For those not aware, Canadian comedians often joke about conversations like:

“I’m sorry for …”
“No, I’m sorry that …”
and so on…

Not that all Canadians are like that, nor all the time even for those who are, but it does seem to be a ‘thing’ that we do.

1 Like

Hi guys,

To be able to access images as resources, I’m doing this:

  1. add the images in “content/media”
  2. add in “content/media” also _index.md as below:

content/media/_index.md

+++
headless= true
title= "Media"
+++
  1. In the page where you need them ex:

content/about.md

---
date: "..."
title: "about"
featuredImage: "media/sample-image.jpg"
---

# About
  1. you can now access them in templates:
{{ $img := .Params.featuredImage }}
{{ $alt := .Title }}

{{ range wit $.Site.Pages }}
    {{ with .Resources.Match $sourceImage }}
        {{ range . }}
            {{ $imageXL := .Resize "..." }}
            {{ $imageL := .Resize "..." }}
            {{ $imageM := .Resize "..." }}
            <picture>
                <source data-srcset='{{ $imageM.RelPermalink }}' type='image/jpg' media='(max-width: 500px)'>
                <source data-srcset='{{ $imageM.RelPermalink }}' type='image/jpg' media='(max-width: 900px)'>
                <source data-srcset='{{ $imageXL.RelPermalink }}' type='image/jpg' media='(min-width: 901px)'>
                <img loading="lazy" data-src='{{ $imageXL.RelPermalink }}' class='lazyload img-fluid' alt='{{ $alt }}' />
            </picture>
            <noscript>
                <img src="{{ $imageXL.RelPermalink }}" alt="{{ $alt }}" />
            </noscript>
        {{ end }}
    {{ end }}
{{ end }}

Hope the above is helping you.

3 Likes

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 ![](/image/filename.jpg) 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?

This blog post shows how to include images from page resource using the render-image.html file. I tried changing the line 3 of the code into

{{- $image := (resources.Get (index $link 0) ) }}

It worked for once. But, it didn’t work from next time onwards. I dunno why its like that.