Static images
Introduction
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.
Disclaimers
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.
Images
It is said that a picture speaks a thousand words, or similar: en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words – 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’ (www.elearningworld.org/images) and ‘WebP’ (www.elearningworld.org/webp), I’ve already discussed about copyright and using the ‘WebP’ (en.wikipedia.org/wiki/WebP) format for images on a web page. Here I’ll be manually converting my images to WebP format with Paint.Net (getpaint.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 www.markdownguide.org/basic-syntax/#images-1 and www.w3schools.io/file/markdown-images, we’ll see that the format is:
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 gohugo.io/content-management/organization and gohugo.io/content-management/page-bundles then we can create an ‘images’ folder within in the posts folder (where we have the index.md file), such as ‘content/posts/sng/images’ and put out image in it. Then we can have markdown like:
which will create:
Images in the markup
Looking at gohugo.io/content-management/page-resources 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 (gohugo.io/templates/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 (github.com/gjb2048/hugo-elw/blob/Nov_2023/themes/elw/layouts/partials/list-item.html) that is a partial called from our ‘list.html’ layout (github.com/gjb2048/hugo-elw/blob/Nov_2023/themes/elw/layouts/_default/list.html):
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
{{ range .Pages }}
{{ partial "list-item" . }}
{{ end }}
</div>
then we need to tell the code what ‘thumbnail’ is in the front matter of the posts ‘index.md’ (github.com/gjb2048/hugo-elw/blob/Nov_2023/themes/elw/layouts/partials/list-item.html) file:
---
title: "Sir Nigel Gresley"
description: "Class A4 Pacific Sir Nigel Gresley"
summary: "A steam engine"
date: 2023-09-24
resources:
- name: "thumbnail"
title: "Sir Nigel Gresley"
src: "images/760D_7762-sng_sm.jpg"
params:
alt: "60007 Sir Nigel Gresley at Powderham, Devon"
tags: ['Train', 'Steam engine', '60007']
draft: false
---
within the ‘resources’ section. Then we’ll get:
You’ll notice that the markup contains Bootstrap classes and structure to generate ‘Cards’ (getbootstrap.com/docs/5.3/components/card/, 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: gohugo.io/content-management/static-files – this is different to the ‘assets’ area (gohugo.io/getting-started/directory-structure) 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/index.md’, you can state:
Again we need to reference gohugo.io/content-management/organization 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:
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?
Upcoming
In the next few posts about Hugo, I intend to look at ‘Shortcodes’, integrating Bootstrap into our markup, render hooks and using different languages.
Conclusion
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 themes.gohugo.io.
You can get all of the code for this post from: github.com/gjb2048/hugo-elw/tree/Nov_2023.
What do you think please?
- Moodle 4 Security – A Review – 16th April 2024
- A little bit #fab – 16th March 2024
- Static framework – 16th February 2024
