Static images


In my last previous about using Hugo to create a statically generated website, I stated that the next part we would ‘adding images to your posts and site’, so here goes!

If you’ve not read my previous post, then please do so that this one will make sense.


Names / logos can be trademarks of their respective owners. Please review their website for details.

I am independent from the organisations mentioned and am in no way writing for or endorsed by them.

The information presented in this article is written according to my own understanding, there could be technical inaccuracies, so please do undertake your own research.

The featured image is my copyright, please don’t use without my permission.


It is said that a picture speaks a thousand words, or similar: – and by adding images to our site we can enhance the communication of the message that we are giving to the user.

In previous posts of ‘Images’ ( and ‘WebP’ (, I’ve already discussed about copyright and using the ‘WebP’ ( format for images on a web page. Here I’ll be manually converting my images to WebP format with Paint.Net (

Images in the content

Adding an image to the content comprises of two elements, the image as a resource that the content can use and the reference to it within the content itself, the markup.

If we look at and, we’ll see that the format is:

![alt attribute value](URL “title attribute value”)

Which Hugo will generate as an ‘img’ tag, such as:

‘<img src=”URL” alt=”alt attribute value” title=”title attribute value”>’.

Next we need the actual image itself, the file. Looking at and then we can create an ‘images’ folder within in the posts folder (where we have the file), such as ‘content/posts/sng/images’ and put out image in it. Then we can have markdown like:

![60007 Sir Nigel Gresley at Powderham, Devon](images/760D_7762-sng.jpg "Sir Nigel Gresley")

which will create:

Sir Nigel Gresley post using Hugo

Images in the markup

Looking at we can reference resources, specially here an image, that are in our page bundle within the markup that we employ to create our site. The layout files. This can be useful if we want to be creative and enhance our lists (, such as the list of posts so that they have a ‘thumbnail’:

This was achieved by having the code of:

{{ with .Resources.GetMatch "thumbnail" }}
    <img class="w-100" src="{{ .Permalink }}" title="{{ .Title }}" alt="{{ .Params.alt }}">
{{ end }}

in the ‘list-item.html’ file ( that is a partial called from our ‘list.html’ layout (

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
{{ range .Pages }}
    {{ partial "list-item" . }}
{{ end }}

then we need to tell the code what ‘thumbnail’ is in the front matter of the posts ‘’ ( file:

title: "Sir Nigel Gresley"
description: "Class A4 Pacific Sir Nigel Gresley"
summary: "A steam engine"
date: 2023-09-24
- name: "thumbnail"
  title: "Sir Nigel Gresley"
  src: "images/760D_7762-sng_sm.jpg"
    alt: "60007 Sir Nigel Gresley at Powderham, Devon"
tags: ['Train', 'Steam engine', '60007']
draft: false

within the ‘resources’ section. Then we’ll get:

Posts page

You’ll notice that the markup contains Bootstrap classes and structure to generate ‘Cards’ (, that might be the subject of a future post.

Site images

When you need to use files that are for the site and not intended to be specific to anything else, then you can use the static files area: – this is different to the ‘assets’ area ( which is intended for files that could be processed.

Within the ‘static’ folder you can organise things, such as creating an ‘images’ folder. Then reference from a site page, such as ‘content/’, you can state:

![A model of a Sheep](images/sheep.jpg "Sheep")

Again we need to reference to understand this.

If you want to use a static image in a post for example, then that markdown won’t work as Hugo won’t be able to find the file in the ‘images’ folder of the post. However, if we change it to:

![A model of a Sheep](/images/sheep.jpg "Sheep")

thus adding a forward slash in front of ‘images’, that is stating that the link is relative to the path of the site and not the post. Now it will work!

What else?

Have a look at the ‘Posts’ and ‘Terms’ list pages, how were the images added to them?


In the next few posts about Hugo, I intend to look at ‘Shortcodes’, integrating Bootstrap into our markup, render hooks and using different languages.


I hope that you’ve been able to understand how to add images and the various places that they can be. Perhaps now have a go at creating your own site, possibly using one of the freely available themes from

You can get all of the code for this post from:

What do you think please?

Gareth Barnard
Latest posts by Gareth Barnard (see all)

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

Add a reply or comment...

%d bloggers like this: