Banners not displayed

support
1

I added a banner to my blog post by setting:
banner: “/banners/pic.jpg”

and saved the pic.jpg image in the folder “/static/banners”

When I start the server by typing “hugo server -D”, the website works great and banners of the posts are displayed correctly.

Then I compiled the site by “hugo -D -t hugo-travelify-theme” and uploaded everything on Github pages.
The site works fine and even the images in the posts are displayed correctly. The banners however are not displayed at all, not even a broken image icon is shown.
What am I missing here?

I am new to webdesign and Hugo, I am using Travelify theme and Hugo ver. 0.33.

Regards,
jp

2

Look at your page source on a Github page with the broken banners, and see where the server is expecting them. I suspect it’s a path issue. Share your source for more help.

3

He says that not even a broken image icon is shown!

1 Like
4

Oops. I mis-read. Thanks.

It would help to see your source.

5

Thank you for your input.
The strange thing is, I put the banners in the folder “banners” in the static folder alongside with the folder “img”, where the other images were put.
I load the images with " ![my img] (/img/pic.jpg) " and banners with banner: “/banners/pic_banner.jpg”.

However, I resolved this by putting all the banners in the root directory and setting simply:
banner: "pic_banner.jpg"
It’s not a nice solution but it works, so it seems to be a path issue after all (?).

Regards,
jp

6

@pribossek This should work, will you please share your repository link?

I am sure this is Human error!

7

The static folder is an analogue for the root of the site, so, storing a banner as static/banners/mybanner1.jpg means it will be available at http://mysite.com/banners/mybanner1.jpg. It’s definitely a path issue. If you figure out how to share your repo, we can look at the code and let you know what is broken.

By the way, you can put code/cmd snippets between backticks, or, code blocks between two lines with five tildes.

The inline version looks like:

...load the images with `![my img](/img/pic.jpg)` and...

Or put ~~~~~ on its own line, before and after your code block.