[SOLVED] How to include a PNG image in site header

support
1

Hi I’m trying to include a PNG image in the site header, the image is in the content folder with all the .md files. This is my single.html:

   { partial "header.html" . }}
    
<div class="header">
  <h1>{{ .Site.Title }}</h1>
  <img style="position: absolute; top:24px; right: 32px" src="dove.png" alt="peace dove" />
</div>
<div class="content">
  {{ .Content }}
</div>

{{ partial "footer.html" . }}

but dove.png does not appear - just the alt “peace dove” tag

How can I get the image to appear?

Thanks
David

2

Hi there

the simple way is to put the image in static folder, the example below if you have images folder inside the static folder.

<img style="position: absolute; top:24px; right: 32px" src="/images/dove.png" alt="peace dove" />

alternative way is create a configuration for the header image in your config.toml

[params]
  logo = "/images.dove.png"

then use {{.Site.BaseURL}}{{ .Site.Params.logo }} in your image src

hope that helps

1 Like
3

Hi Yudy, Thanks for reply - I put the image as you sugested, but no change (no image)

folders
folders.png190×520 25 KB

and the line is now:

  <img style="position: absolute; top: 24px; right: 32px" src="/img/dove.png" alt="peace dove" />
4

Where did you put the image?

├───archetypes
├───content
├───data
├───layouts             
├───static
│      └───images (the image should be here)
├───themes

the image should be somewhere inside the static folder

5

see my last post

6

check the image case extension, .PNG or .png

1 Like
7

Thanks, that worked - the devil’s in the detail