HUGO

Find a image from the file stem

tl;dr I need to find my image based on the file stem (sans extension) in a template

I have images in static/images/
In the front matter (via archetypes) I have a parameter image that has the same name as the page (file stem, using image: {{ .Name }})

I am putting the image into my page via the template with:
<img src="/images/{{ .Params.image }}.jpg"/>

So hugo new art/Name\ of\ Image.md creates a page that pulls in the image.

Except come images have jpg and some have png as suffix (being different formats)

So I need to do something different.

Is there a way I can search for them? Like
<img src="/images/{{ find static/images/ .Params.image }}

It’s not possible to do in an archetype the way you’re going about it.
But, it may be possible in your template code. You could use readDir and find your image in the returned list

Is there a more idiomatic way of associating a image with a page, via the file name or front matter? (Not sure if I am using “page” correctly. Hopefully I am clear)

I thought the thing to do with images is to put them under /static. But then again page resources can be images. I am confused

Right. It just comes down to preference.

I am having trouble with resources though.

I copied the style from https://zwbetz.com/make-a-hugo-blog-from-scratch/ and put some images in the content/blog/ directory.

In the single.html template I inserted:

{{ range .Resources.ByType "image" }}
Name:{{ .Name }}
{{ end }}

That should have listed the images in the content/blog directory because content/blog is a page bundle. Since it has a _index.md .

I am following https://gohugo.io/content-management/page-bundles/ for the definition of bundles and https://gohugo.io/content-management/page-resources/ to access the resources.

You’re close. You put that code in the single template, but it needs to go in the list template

1 Like

Ah! That gets the names of the resources into the list page.
That is a start!
But I need them in the single page. How can I get them there?

If you’re still using that tutorial, then you’ll need to convert traditional post pages to page bundles. Meaning change this:

blog/some-post.md

To this:

blog/some-post/index.md

Then put your images under some-post/

Thank you.
Clarity!

1 Like

FYI if you ever find yourself needing to convert many traditional pages to page bundles, @onedrawingperday wrote a bash script for that: Bash Script to convert Hugo Content Files to Page Bundles

1 Like

A post was split to a new topic: List all site resources from the homepage template