site logo

[rharige]

In the site configuration config.toml can you add image logo property next to the title / copyright / enableEmoji etc?

[jpanther]

Thanks for the suggestion. This is definitely something that I could add.

[jpanther]

This is included in v1.3.0 and you can now set the logo parameter in the theme configuration. Refer to the documentation for full details.

[eioe]

I would like to have my logo show up next to the title (both in the top left of te page) - instead of replacing it. Unfortunately, I'm only starting out with Hugo (and also with HTML & CSS), so I only got half the way:

Logo and name both show. But I would like the name to be directly next to the logo (with some margin). Could someone give me a hint how to achieve this?

here's the code of my modified header.html:

 <header
  class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral"
>
  {{/* Site logo/title */}}
  <div>
    {{ if .Site.Params.Logo -}}
      {{ $logo := resources.Get .Site.Params.Logo }}
      {{ if $logo }}
        <a href="{{ "/" | relLangURL }}">
          <img
            src="{{ $logo.RelPermalink }}"
            width="{{ div $logo.Width 8 }}"
            height="{{ div $logo.Height 8 }}"
            class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
            alt="{{ .Site.Title }}"
          />
        </a>
      {{ end }}
    {{ end }}
  </div>
  <div>
      <a
        class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
        rel="me"
        href="{{ "/" | relLangURL }}"
        >{{ .Site.Title | markdownify | emojify }}</a
      >
    {{ partial "translations.html" . }}
  </div>
  {{/* Main menu */}}
  {{ if .Site.Menus.main }}
    <nav>
      <ul class="flex flex-col list-none sm:flex-row">
        {{ range .Site.Menus.main }}
          <li
            class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
          >
            <a
              class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2"
              href="{{ .URL }}"
              title="{{ .Title }}"
              >{{ .Name | markdownify | emojify }}</a
            >
          </li>
        {{ end }}
        {{ if .Site.Params.enableSearch | default false }}
          <li
            class="ltr:text-right rtl:text-left ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
          >
            <button
              id="search-button"
              class="text-base hover:text-primary-600 dark:hover:text-primary-400"
              title="{{ i18n "search.open_button_title" }}"
            >
              {{ partial "icon.html" "search" }}
            </button>
          </li>
        {{ end }}
      </ul>
    </nav>
  {{ end }}
</header>

[jpanther]

Hey @eioe, thanks for the question. This is purely a CSS thing because the header flex box is set to justify between the child elements. As a result, because you have two separate div elements for the logo and title, the browser is adding spacing between each item. The fix for this is to simply wrap the logo and title in another div element. By doing this, the flex box will treat them as one single child item.

{{/* Site logo/title */}}
<div>  <!-- wrap everything in a div -->
  <div>
    <!-- site logo-->
  </div>
  <div>
    <!-- site title -->
  </div>
</div>

[jpanther]

Further to the above, Congo v2.4.0 includes a new header.showTitle parameter that allows the site title to be shown alongside the logo without requiring any manual code changes.

[lschierer]

Currently the logo cannot accept SVG files, I get the following error:

ender of "page" failed: "/Users/lschiere/src/schierer/HP_Stuff/themes/congo/layouts/_default/baseof.html:32:9": execute of template failed at <partial $header .>: error calling partial: "/Users/lschiere/src/schierer/HP_Stuff/themes/congo/layouts/partials/header/basic.html:5:9": execute of template failed at <partial "logo.html" .>: "/Users/lschiere/src/schierer/HP_Stuff/themes/congo/layouts/partials/logo.html:7:27": execute of template failed at <$logo.Width>: error calling Width: this method is only available for raster images. To determine if an image is SVG, you can do {{ if eq .MediaType.SubType "svg" }}{{ end }} render of "page" failed: this method is only available for raster images. To determine if an image is SVG, you can do {{ if eq .MediaType.SubType "svg" }}{{ end }} failed to render pages: this method is only available for raster images. To determine if an image is SVG, you can do {{ if eq .MediaType.SubType "svg" }}{{ end }} 

I'm not sure how hard it would be to extend this partial to support the additional graphic type, but it would be nice to have.