I hear what @alexandros suggests about using a theme with that calls the Pages range.
That said, I like the way the Hugo Flex theme otherwise structures content, and I’d invested too much time in customizing its appearance with my own CSS to readily abandon it for another theme.
So… I’d had the same problem as @agargara. I could not figure out how to get relative links to generate differently for the main page.
Here is my solution, for anyone who runs into this problem in the future.
First, my content is organized using page bundles. For example:
The a-peculiar-form-of-torment folder represents my first post.
I then created my own shortcode, named figure.html. Here’s what it looks like (I’m overriding the core Hugo figure shortcode):
{{ $imgname := .Get "imgname" }}
{{ $title := .Get "title" }}
{{ $caption := .Get "caption" }}
{{ $alttext := .Get "alt" }}
{{ $width := .Get "width" }}
{{ $height := .Get "height" }}
{{ $img := $.Page.Resources.GetMatch $imgname }}
<figure>
<img src="{{ $img.Permalink }}" alt="{{ $alttext }}" width="{{ $width }}" height="{{ $height }}"/>
<figcaption>
<h4>{{ $title }}</h4>
<p>{{ $caption }}<p>
</figcaption>
</figure>
Here’s what it looks like when I use that shortcode from my content file, index.mmark in the a-peculiar-form-of-torment folder:
{{< figure imgname="boards-joined.jpg" caption="A strong join between the boards is helpful to be certain they remain perpendicular." alt="Angle irons are used to join the two boards together at a 90-degree angle." width="169" height="200">}}
You can see that in this case, I chose to omit the title attribute.
The image will then render regardless of whether the user is on the “main” or landing page of my Hugo site, running the Hugo Flex theme, or whether the user reads the article through the Archive, where I collect my posts.
Finally, I also have the baseURL parameter set in my config.toml file, like this:
baseURL = "https://russellgordon.ca"
All of this works through the use of permalinks, but if anyone with more knowledge than I can clearly describe how to make this work using relative links, I’d love to learn how.
