djibe
1
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
djibe
3
Thank you very much !
You are awesome
djibe
4
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 }}
system
Closed
5
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.