Permalink for images in the front matter

support
1

Hello everyone.

What I am trying to achieve is the display of an image as a background image.
The way it is handled currently is like so, in an html file in the layout folder

{{ range sort .Pages "Weight" }}
                {{- $imagePermalink := "" }}
                {{if .Params.images}}
                    {{- with partial "_funcs/get-page-images" . }}
                    {{- range . | first 1 }}
                    {{- $imagePermalink = .Permalink }}
                    {{- end }}
                {{- end }}
                    <a href="{{ .Permalink }}" class="overview-card" style="background-image: url('{{ $imagePermalink }}')">

So in my front matter I can reference the image like this in my _index.md

---
title: "Getting Started"
date: "2024-04-12"
summary: "Essential information to help you begin your journey"
type: "chapter"
images: ["images/GettingStarted.jpg"]
weight: 1
---

the folder architecture being this one for this page, with the images in the images folder at the same level as the _index.md

image
image644×457 13.1 KB
.

When I check in my browser for said image url I get what I desire.

background-image: url('http://localhost:1313/userguide/tutorialsandhow-tos/gettingstarted/images/GettingStarted.jpg')

But it only works when I am inside an _index.md. Let’s say that I want to achieve the same in another page, the Installation.md from the same directory above:

---
title: "Installation"
slug: "installation"
date: 2025-01-14
name: "Installation"
summary: Step-by-step instructions on how to install.
images: ["images/install.jpg"]
weight: 2
---

The problem is that the image is not displayed as it does not return me the correct link

background-image: url('http://localhost:1313/images/install.jpg')

Is there a way to have the same behavior as _index.md but in this Installation.md?

2

I guess that depends on your _funcs/get-page-images partial. Which you don’t show… In general, it’s easier and speedier to get help here by posting a link to your repository so people can see everything – not only what you deem relevant.

In any case, checking out the difference between branch and leaf page bundles might be worth a try.

3

The repository is a private repository that’s why I did not post the link.
_funcs/get-pages-images is defined here in HUGO : hugo/tpl/tplimpl/embedded/templates/partials/_funcs/get-page-images.html at master · gohugoio/hugo · GitHub

{{- $imgs := slice }}
{{- $imgParams := .Params.images }}
{{- $resources := .Resources.ByType "image" -}}
{{/* Find featured image resources if the images parameter is empty. */}}
{{- if not $imgParams }}
  {{- $featured := $resources.GetMatch "*feature*" -}}
  {{- if not $featured }}{{ $featured = $resources.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
  {{- with $featured }}
    {{- $imgs = $imgs | append (dict
      "Image" .
      "RelPermalink" .RelPermalink
      "Permalink" .Permalink) }}
  {{- end }}
{{- end }}
{{/* Use the first one of site images as the fallback. */}}
{{- if and (not $imgParams) (not $imgs) }}
  {{- with site.Params.images }}
    {{- $imgParams = first 1 . }}
  {{- end }}
{{- end }}
{{/* Parse page's images parameter. */}}
{{- range $imgParams }}
  {{- $img := . }}
  {{- $url := urls.Parse $img }}
  {{- if eq $url.Scheme "" }}
    {{/* Internal image. */}}
    {{- with $resources.GetMatch $img -}}
      {{/* Image resource. */}}
      {{- $imgs = $imgs | append (dict
        "Image" .
        "RelPermalink" .RelPermalink
        "Permalink" .Permalink) }}
    {{- else }}
      {{- $imgs = $imgs | append (dict
        "RelPermalink" (relURL $img)
        "Permalink" (absURL $img)
      ) }}
    {{- end }}
  {{- else }}
    {{/* External image */}}
    {{- $imgs = $imgs | append (dict
      "RelPermalink" $img
      "Permalink" $img
    ) }}
  {{- end }}
{{- end }}
{{- return $imgs }}
4

The installation page is not a page bundle, and therefor has no page resources. Make it a page bundle, e.g.,

content/
└── userGuide/
    └── turorialsAndHow-Tos/
        └── gettingStarted/
            └── Installation/
                ├── image.jpg
                └── index.md

https://gohugo.io/content-management/page-bundles/

Also, the embedded partial that you are using was created to support other internal templates (opengraph, etc.). It was never intended to be used outside of that context, which is why it is not documented.

5

Got it!

Thank you for your answer.

1 Like