Adding Featured Images to a Hugo Blog
It took me ages to figure this out, but I’m happy now it’s done, even if the solution isn’t the most elegant. I wanted to display an image for each blog post summary on my home page — like a thumbnail or featured image or something.
I eventually came across page variables and file variables in the official Hugo documentation, and made changes to my site’s /layouts/_default/summary.html
file. Here’s the part of that file that I changed:
<div>
<img class="floatleft" src="{{ .Page.File.Dir }}/featured_image.png" width="200">
<div class="summary">
{{ .Summary }} ...
</div>
</div>
The part that I added (besides adding a new <div></div>
element) was the <img>
element, containing a reference to the current page’s directory {{ .Page.File.Dir }}/featured_image.png
.
Note that this is the directory of the page before it gets rendered to HTML. Doing this allowed me to reference a “featured_image.png” file for each page, as you can see in the following screenshot: