Inserting custom image in header

Using Themes
1

I want to insert an image in the header section of the Ananke theme underneath the description. I figure I need to copy the site-header.html file into my layouts/partials folder and edit it, but just inserting a simple <img src="/images/custom.jpg"> line doesn’t seem to work.

2

What does that mean?

3

The image doesn’t show and even the img tag doesn’t show in the page source. I’m inserting it in the same container as where the site title and descriptions go.

  <header>
    <div class="pb3-m pb6-l {{ .Site.Params.background_color_class | default "bg-black" }}">
      {{ partial "site-navigation.html" . }}
      <div class="tc-l pv3 ph3 ph4-ns">
        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
          {{ .Title | default .Site.Title }}
        </h1>
        {{ with .Params.description }}
          <h2 class="fw1 f5 f3-l white-80 measure-wide-l center lh-copy mt3 mb4">
            {{ . }}
          </h2>
        {{ end }}
        <img src="/images/custom.jpg">
      </div>
    </div>
  </header>
4

Assuming this structure:

static/
└── images/
    └── custom.jpg

Override the theme’s partial with this file:

layouts/partials/site-header.html

And do this:

<img src="{{ `images/custom.jpg` | relLangURL }}">

That will resolve correctly if you are serving your site from a subdirectory, or if it is a multilingual project, or both.