Breadcrumb: set logo for top page link

Hello,

the breadcrumb official example has no comments in its code.
After days, I see for help.

In my breadcrumb, I would like to use site’s logo for main page link as in web.dev bredcrumb so it looks like:

Site’s Logo > Section Name > Actual page title

Thanks a lot for your time,
JB

Assuming your logo is located here:

assets/
└── images/
    └── logo.png

layouts/partials/breadcrumbs.html

<ol  class="nav navbar-nav">
  {{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ol>

{{ define "breadcrumbnav" }}
  {{ if .p1.Parent }}
    {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 ) }}
  {{ else if not .p1.IsHome }}
    {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
  {{ end }}

  {{ $anchorContent := .p1.Title }}
  {{ if .p1.IsHome }}
    {{ with resources.Get "images/logo.png" }}
      {{ with .Resize "x50" }}
        {{ $anchorContent = printf `<img src=%q width=%v height=%v alt=%q>` .RelPermalink .Width .Height "Logo" | safeHTML }}
      {{ end }}
    {{ end }}
  {{ end }}

  <li{{ if eq .p1 .p2 }} class="active"{{ end }}>
    <a href="{{ .p1.Permalink }}">{{ $anchorContent }}</a>
  </li>
{{ end }}
1 Like

Thank you very much !
You are awesome

To share extended Bootstrap 4 classes + custom Titles for Sections:

{{ define "breadcrumbnav" }}
  {{ if .p1.Parent }}
    {{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  }}
  {{ else if not .p1.IsHome }}
    {{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 )  }}
  {{ end }}

  {{ $anchorContent := .p1.Title }}
  {{ if .p1.IsHome }}
    {{ $anchorContent = printf `<img src="/favicon.svg" width="24px" height="24px" alt="Logo de RecoMédicales" aria-label="Accueil">` | safeHTML }}
  {{ end }}

<li {{- if eq .p1 .p2 }} class="breadcrumb-item active" aria-current="page"{{ else }} class="breadcrumb-item"{{ end }}>
  {{ if ne .p1 .p2 }}<a href="{{ .p1.Permalink }}">{{ end }}
    {{ with .p1.Params.breadcrumbTitle }}{{ . }}{{ else }}{{ $anchorContent | truncate 25 }}{{ end }}
    {{ if ne .p1 .p2 }}</a>{{ end }}
</li>
{{ end }}

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.