Hugo Image Set Path

Question

I'm new to Hugo, and having some trouble customizing a theme. This theme https://github.com/jpanther/congo takes advantage of Hugo Page Bundles to match a featured image string.

I would like to re-purpose this "featured:" field from the frontmatter to put the name of the image, and have it show up as the featured image.

The directory structure is like below:

Hugo/
  content/
    journal/
      post1.md
      featured-image1.jpeg
      post2.md
      image234.jpg
      ...

frontmatter for the posts would look like this:

---
title: Post 1
feature: "featured-image1.jpeg"
...

and

---
title: Post 2
feature: "image234.jpg"
...

So, I've tried overriding how the images are looked up as below:

<img alt="..." class="..." src="{{ .Params.feature }}" />

which works great, so long as pagination does not become involved. Otherwise it just happens the image name to the URL with pagination, rather than finding the image in the same directory as the markdown file.

I am aware of the benefits of using Page Bundles, and using the static/ directory to hold all of the images, but these both have huge drawbacka for my writing workflow, and so must give way to the simplified directory structure above where the images are kept in the same directory as the markdown files, and these are notncontained in their own sub-directory.

Any help would be appreciated. Thank you for your time, JB

score 1 · Answer 1 · answered Apr 18 '23 at 06:14

1

I think you need to call the method .Resources.GetMatch to return the first page resource whose Name matches the given Glob pattern specified by .Params.feature, and then render the found page resource:

{{ with .Resources.GetMatch .Params.feature }}
  <img alt="..." class="..." src="{{ .RelPermalink }}" />
{{ end }}

See Image Rendering for more information.

answered Apr 18 '23 at 06:14

Zeke Lu

6,349
1
17
23

I thought that should work too, but even though the images are in the same folder as the markdown file, resources getmatch doesn't find them. – sosukeinu Apr 18 '23 at 15:16
"A Leaf Bundle is a directory at any hierarchy within the content/ directory, that contains an index.md file", "A Branch Bundle is any directory at any hierarchy within the content/ directory, that contains at least an _index.md file". Do you have the `index.md` file or `_index.md` file to make them be recognized as page bundle? Can you provide a minimal demo? – Zeke Lu Apr 18 '23 at 22:42
Yes, my directory does contain an `_index.html` at the same level as all of the other markdown files and the image files. .Resources.getMatch still does not find the images listed unless I include the full path from the root of `content/`. – sosukeinu Apr 21 '23 at 03:39
1

The document lists the file as `_index.md`. It does not mention `_index.html`. Maybe that's why it does not work? – Zeke Lu Apr 21 '23 at 03:49

score 0 · Answer 2 · answered Apr 18 '23 at 23:22

0

I discovered that the issue was the relative path pointing to the images. Hugo seems to need the full path to the images relative to the content/ directory. So, images needed to be referenced not as feature: image-name.jpg but as feature: /journal/image-name.jpg. after making this change, the images are found correctly.

answered Apr 18 '23 at 23:22

sosukeinu

379
4
16

`feature: /journal/image-name.jpg` works with `` because it's an absolute path now. It does not depend on the URL of the current page. But it will break if `baseURL` has subdirectory. And I think it will break the `congo` theme because it can not find the image with [.Resources.GetMatch](https://github.com/jpanther/congo/blob/02084066c7f64f256d3373bc0540c29b7a1ed313/layouts/_default/single.html#L4) now. – Zeke Lu Apr 19 '23 at 13:21
I believe you're correct that this breaks Congo's beauty and elegance of working with the images, but this is working for my purposes, and since I can't seem to get the . Resources.getMatch to work, I guess I'll just have to settle. Thank you for your help. – sosukeinu Apr 21 '23 at 03:40
If the `feature` parameter can not be used by the theme any more and it's only used by your own template, then it seems that you should choose another name. It does not make sense to stick to this name. – Zeke Lu Apr 21 '23 at 03:56

Hugo Image Set Path

2 Answers2