Search code examples
htmlimagehugogitlab-pageshugo-shortcode

Add image to webpage which uses hugo framework

I want to post an image onto my blog (yes that simple!)

My website is hosted on GitLab Pages and uses the Hugo framework (v0.23). I forked my webpage from here, https://gitlab.com/pages/hugo (thus my blog folder structure is the same).

My content publishes fine and is stored here: home/content/post

I created a folder which stores images here: home/content/post/images

When I insert an image into a post the image won't publish. I've tried using the relevant short code in the post (below) with no luck:

  1. {{< figure src="image/image_name.png" title="image title" >}}
  2. {{< figure src="/image/image_name.png" title="image title" >}}

where:

  • the image is stored here: home/content/post/images/image_name.png
  • the post is stored here: home/content/post/post_title.md

I suspect the problem is the new images folder I added is somehow not "seen".

Please help!

Solution

  • The problem was easily fixed, I was pointing to the wrong pathway. D'oh!

    {{< figure src="../image/image_name.png" title="image title" >}}