Replacing site title with a logo image

support
1

Hello, I want to replace the site title with a logo image, but I’d like to give users the option to choose between the logo image and the text title. What’s the best way to implement this feature?

This is the default behavior:

<header>
   <h1 class="site-title><a href="/">My New Hugo Website</a></h1>
</header>

When the option to display a logo image is enabled, I want the site title to be hidden from view but still accessible for text browsers for SEO purposes, like so:

<header>
   <h1 class="site-title visuallyhidden"><a href="/">My New Hugo Website</a></h1>
    <a href="/">
       <img class="logo-img" src="/images/logo.png" alt="">
    </a>
</header>

Then use this CSS:

.visuallyhidden {
  position: absolute;
  padding: 0;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

I’m just unsure how to configure this in the config.toml file to allow users to enable or disable the feature. Should I include something like this under params?

logo        = "site-logo.jpg"

Is this a good approach? Also how can I check this in the template? should I use a with conditional? I mean do something if the value of logo defined, but something else if logo is empty or not defined at all.

logo        = "site-logo"

I tried this in my header.html partial and it seems to work:

{{- $logo := .Site.Params.logo }}
<header>
  {{- if $logo }}
  <h1 class="site-title visuallyhidden"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
  <a href="{{ .Site.BaseURL }}">
      <img src="{{ .Site.BaseURL }}/images/{{ $logo }}" alt="{{ site.Title }}">
  </a>
  {{- else }}
  <h1 class="site-title">
    <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
  </h1>
  {{- end }}
</header>

Would it be better to create a new partial for the “logo” something like partials/logo.html and import it as a cached partial in the partials/header.html? Right now I’m putting everything inside partials/header.html. Maybe there will be a navigation bar as well in the header.

I was thinking about putting this in the header.html partial :

{{ partials.IncludeCached "logo.html" . }}

where the logo should be, regardless if it’s an image or text.

I would be grateful for any suggestion. Thank you.

2

I would do something like this.

site configuration

[params.logo]
path = 'images/logos/logo-transparent-bg.png' # in assets directory
alt = 'Welcome to ABC Widgets'

assets directory

assets/
└── images/
    └── logos/
        └── logo-transparent-bg.png

template

{{ with site.Params.logo.path }}
  {{ with resources.Get . }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ site.Params.logo.alt }}">
  {{ else }}
    {{ errorf "Unable to find %s in assets directory" . }}
  {{ end }}
{{ else }}
  <h1>{{ site.Title }}</h1>
{{ end }}

link to home page

There is never a good reason to reference the baseURL site parameter. This will (hopefully) be removed in a future release.

Instead, do this:

{{ site.Home.RelPermalink }}

Or this if you need an absolute URL:

{{ site.Home.Permalink }}
3

Thank you. The alt text should be always the name of the website {{ .Site.Title }}. In that case, does it worth having a separate section just for the path?

[params.logo]
path = 'images/logos/logo-transparent-bg.png' # in assets directory
4

I’d keep the alt parameter so you can override, and modify the code accordingly to fall back to the site title if the alt parameter isn’t defined.

5

Thank you a lot! I really appreciate all your help on this page. It means a lot to me.

Taking your suggestion into account, I tried this: {{ site.Params.logo.alt | default site.Title }} and it works.

Here’s the full template:

<header>
  {{ with site.Params.logo.path }}
  <h1 class="site-title visually-hidden"><a href="{{ site.Home.Permalink }}">{{ site.Title }}</a></h1>
  <a href="{{ site.Home.Permalink }}">
    {{ with resources.Get . }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ site.Params.logo.alt | default site.Title }}">
    {{ else }}
      {{ errorf "Unable to find %s in assets directory" . }}
    {{ end }}
  </a>
  {{ else }}
  <h1 class="site-title">
    <a href="{{ site.Home.Permalink }}">{{ .Site.Title }}</a>
  </h1>
  {{ end }}
</header>

Since this template doesn’t change, I imported it with caching in the baseof.html using: {{ partialCached "header.html" . }}. It works. I just hope I’m doing it the proper way.

6

Looks good to me.