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

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

Answer 2

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.