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:

image