Search code examples
imagetemplatesframeworkshugo

How to add an image in Hugo's front matter

I am trying to add an image in Hugo's front matter to be displayed when it's called in my HTML. The current scenario that I'm working with is that I have a list page listing projects and a single page that is of a single project.

In my .md file I would like to reference the location of the corresponding image to be displayed on both locations (list and single page).

I am not sure how to do this. I've tried using ".Params" I have found in other posts, but I am unable to show the image on the webpage.

I have my images in the static folder under a sub-folder named images

This is my current setup:

<div class="projects">
    {{ range .Pages }}
    {{ with .Params.featured_image }}<img src="{{ . }}">{{ end }}
    {{ end }}
</div>

The "range pages" is to loop over all of my project pages and display the name, title and description. I took out the name and description for brevity.

and my .md file for each individual project page:

---
title: "Text Based Adventure"
description: "A simple text based adventure game that gives a nod to the 80s style terminal games"
draft: true
featured_image : “images/textAdventure.png”

---
Solution

  • I'm not sure if the webpage you're referring to is list.html or single.html

    single and list page

    According to your setup's syntax,

    {{ range .Pages }}
    ...
{{ end }}

    there is no way to use it in single.html, but only in list.html. Although both list.html and single.html are Page Variable, the difference is their range Pages. Pages may have something, but single.html will definitely not have something.

    I'm not sure if you understand the difference between list.html and single.html. I'll describe it in unorthodox vernacular,

    • list.html: like a folder
    • single.html: like a file in a folder.

    suppose your files, like below,

    • posts/lesson1.md
    • posts/lesson2.md

    When you visit those URL,

    • http://localhost:1313/posts/ # rendered page is list.html
    • http://localhost:1313/posts/lesson1 # rendered page is single.html
    • http://localhost:1313/posts/lesson2 # single.html

    Image

    If your image location is images/textAdventure.png

    then the picture is located in static/images/textAdventure.png

    drafts

    Your drafts is True so you need --buildDrafts or -D to see the page when you run.

    do not rely on other themes

    The last thing I want to emphasize is that front matter only provides some variables to the template. Template implement is the key. If you are a beginner in Hugo, I suggest that you do not rely too much on the themes provided by others and suggest that you try it yourself first before you consider quoting someone else's theme.

    If you are very clueless after reading the official documents, you can first consider watching simple tutorials video and then go to the official documents to get into the situation