Zen theme and images

Using Themes
1

I’ve read through the directory structure and content organisation at Hugo Documentation | Hugo , and an image relating to website content should go in /static/images, right ?

That is, local server , and reflecting the structure at hugo-theme-zen/static/images at main · frjo/hugo-theme-zen · GitHub

The content .md has ![Test post](images/testpost_image.png "Photo by ***** from Pexels")

Yet I cannot get it to display. I have tried changing the .md line to ![Test post](testpost_image.png "Photo by ***** from Pexels"), moved the image to a number of different paths, like exampleSite/content/documentation/images , gone through all the issues that contain the string “image” , read the docs on the site, etc,etc.

Still no image displayed. I checked the sites using the theme and yes, it can be done. Obviously something simple I guess. :slight_smile:

Cache ? I have Firefox set to clear cookies, cache, everything on exit. Have exited a few times, Ctrl-C on the local server, restarted that. The theme looks great and the installation went fine, no problems.

Considering the .md file content, I wonder where Hugo is looking for the image ?

hugo version

hugo v0.94.0-63B23660+extended linux/amd64 BuildDate=2022-03-10T09:46:36Z VendorInfo=gohugoio

As per GitHub - frjo/hugo-theme-zen: A fast and clean Hugo theme with css-grid and Hugo pipes support. - @frjo please :slight_smile:

Later … I ran this

hugo server --debug --source=exampleSite --themesDir=../..

nothing in the output that indicates the image not found though.

2

Looking at the generated HTML, the image is expected at http://localhost:1313/documentation/test-post/images/testpost_image.png , yet it is at http://localhost:1313/documentation/images/testpost_image.png

This is because as a local server there is no generated path http://localhost:1313/documentation/test-post/ , only http://localhost:1313/documentation/test-post.md

3

Put you images inside your root “static” directory. Everything there will be copied as is to the “public” directory. Lets say you put the “testpost_image.png” inside the “static” directory like this:

static/images/testpost_image.png

Then in your content:

![Test post](/images/testpost_image.png "Photo by ***** from Pexels")

1 Like
4

Looks like I had the image in the correct path.

Arr, missed the leading forward slash /

Thanks, as soon as the content path was modified, it all came good.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.