Create picture for navigation bar

1

This is two questions in one. The best way to explain is to first get a visual of my site at https://jarss.github.io/TAONAW/

I have a nav-bar at the left, and I want to place an image between the title of the site and the descriptive text below it. This should be done through sidebar.html in my theme, from my understanding. The title is {{ .Site.Title }} and the text directly below is {{Site.params.description}}.

OK, so I tried a simple HTML <img src> and couldn’t get it working with a relative path when I run Hugo server locally. I tried absolute path too, then when that didn’t work I tested my HTML with just a three-line HTML file that called the image from an absolute local path. That worked, finally.

So now, I took the absolute path that worked, with the “file:///” and placed that within the <img src> just to see what would happen and… no image. Hugo seemed to open a tiny little bit space between the title and the description text, as if something got in there, but it’s not my image. I also didn’tt get a broken image link icon this way (I did previously with all the other attempts)

Here are my questions:

  1. is using plain HTML to place an image is the best way to do so in Hugo, or is there a shortcode for that? search in Hugo docs brings me to Image Processing, which tells me what I can do with an image once it’s already there.
  2. How do I place an image with a relative path to the Hugo site so that when I push it, Hugo will show it? I got images to work through a post, but this is the main site’s sidebar.

Thanks, sorry this is confusing I’m still trying to figure out what is exactly the problem I’m having.

1 Like
2

Figured it out.

After creating additional links, realized that correct way to refer to the site root is with {{.SiteBaseURL}}. A patch can be added to this, so you can write {{.SiteBaseURL}}/images/image.png.

Since images in Hugo, especially for something like generic images in the theme are placed in the /static directory (this I also figured out by looking at other images in the theme, and where they’re located), I went ahead and placed my image in static. Once there, you do not need to specify the directory anymore, so it will simply be:

{{.SiteBaseURL}}/image.png. Nice.

1 Like
3

Since your image is located at static/image.png you can also reference it in your layout (templates, partials) like below.

Relative path:

{{ $img := "image.png" }}
<img src="{{ $img | relURL }}">

Absolute path:

{{ $img := "image.png" }}
<img src="{{ $img | absURL }}">

If you want to reference that image in your content, you can create shortcodes.

relImg.html shortcode:

{{- $img := .Get 0 -}}
<img src="{{ $img | relURL }}">

Then call it like: {{< relImg "image.png" >}}

absImg.html shortcode:

{{- $img := .Get 0 -}}
<img src="{{ $img | absURL }}">

Then call it like: {{< absImg "image.png" >}}

2 Likes