Links to local pages in multilingual website

support
1

I have this dropdown language chooser in my header:

<nav>
 ...
 <div class="dropdown" style="position: absolute; float: right; top: 0; right: 0;">
  <button class="btn btn-secondary dropdown-toggle" id="dropdownLanguages" data-bs-toggle="dropdown" aria-expanded="false">
   <i class="fas fa-globe fa-lg" aria-hidden="true"></i>
  </button>
  <base href="{{ .Site.BaseURL }}">
  {{- $language := .Language -}}
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownLanguages">
   {{ range .Site.Home.AllTranslations }}
   {{ if eq $language .Language }}
   <li class="nav-item">
    <a class="nav-link active" href="{{ .Permalink }}">
     {{ $flag := printf "<img src=\"imgs/flag.%s.svg\">" .Language | safeHTML }}
     {{ $flag }}
    </a>
   </li>
   {{ else }}
   <li class="nav-item">
    <a class="nav-link" href="{{ .Permalink }}">
     {{ $flag := printf "<img src=\"imgs/flag.%s.svg\">" .Language | safeHTML }}
     {{ $flag }}
    </a>
   </li>
  {{ end }}
  {{ end }}
  </ul>
 </div>
</nav>

However, whenever I’m on a local page in a language (say Italian) and I click on a different language (say English) from this dropdown, it leads me to the home page of that language (English). What am I doing wrong?

2

You can use a little javascript for that,

{{ if .IsTranslated }}
        <select class="m-2 border-0" id="select-language" onchange="location = this.value;">
          {{ $siteLanguages := site.Languages}}
          {{ $pageLang := .Page.Lang}}
          {{ range .Page.AllTranslations }}
          {{ $translation := .}}
          {{ range $siteLanguages }}
          {{ if eq $translation.Lang .Lang }}
          {{ $selected := false }}
          {{ if eq $pageLang .Lang}}
          <option id="{{ $translation.Language }}" value="{{ $translation.RelPermalink }}" selected>{{ .LanguageName }}
          </option>
          {{ else }}
          <option id="{{ $translation.Language }}" value="{{ $translation.RelPermalink }}">{{ .LanguageName }}</option>
          {{ end }}
          {{ end }}
          {{ end }}
          {{ end }}
        </select>
        {{ end }}

Check this out for language swithcer

3

It turns out that the problem I had was that I was using .Site.Home.AllTranslations instead of .Page.AllTranslations. Thanks for the hint though :slight_smile:

4

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