Featured Image
featured image summary absURL Hugo Forum
Searching for anything about the use of image and images in front matter with lists of images in the bundle, and found this. It isn’t relevant to the original search, but it is worth working through.
I would like to have a section on one page which displays post featured images (maybe specified in the front matter or the first image used in the post) together with a summary of that post. If this could be done to automatically pick up the most recent post in any given category, that would be marvellous. Can it be done?
Initial understanding
- new section (folder) in content to find any posts in blog with a featured image
- OR, is it a chunk of code at the bottom of single
- OR, a part of the home page
- has this got anything to do with bundles? Think not.
For anyone else who finds this and wants to know how I did it: in the .md file, you need to include this in the front matter:
+++
featured_image = “images/pic01.jpg”
+++
Then at the point you want to include it in the page, you add into the template
<a href="#" class="image featured">
{{if isset .Params "featured_image" }}
<img src="{{ index .Params "featured_image" }}"></a>
{{ end }}
In this case it’s a matter of taste (and space…), but I tend to use this construction for these conditionals (your code works fine, but “with” has less surprises in some cases, and it’s more compact):
{{ with .Params.featured_image }}
<img src="{{ . }}">
{{ end }}
Testing
- Insert {{ .Params.featured_image }} into the single.html template. This results in the display of the placeholder text if the parameter is present in front matter, or nothing at all if it isn’t.
- Add the 3 lines into the single.html template. Where the parameter is set, an attempt to display an image can be seen.
- Now to put an image address in the static folder into the placeholder text.
- Could not work out the relative address of the image, so added a pipe to absURL, and that will do for now.
- The featured image is now displayed on the single.html template page.
- This isn’t quite what the original question seemed to ask for, but the result is very useful!
Next steps
Hugo Forum • Featured images and bundles