Help with flag for switching to another language

[buarle]

Hi @eddiesigner ,

I try to replace the search icon with a flag to switch to another language.

i.e:

On website example.de:

<a href="https://**example.com**"><img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" /></a>

What code do I need to use to replace the search logo one by one and keep the location n desktop and mobile version?

Thanks for your help.

Best buarle

[eddiesigner]

Hi,

I'm not sure if I understand fully what you mean, if you want to replace the search button with that link you can do the following:

1. Unzip the theme file

2. Open the file partials/header.hbs with a code editor

3. Replace the following code (line 22 - 24):

<button class="m-icon-button in-mobile-topbar js-open-search" aria-label="{{t "Open search"}}">
  <span class="icon-search" aria-hidden="true"></span>
</button>

with your link:

<a href="https://example.com" class="m-icon-button in-mobile-topbar lang-link-mobile">
  <img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" />
</a>

You also need to replace the following code (line 121 - 123):

<button class="m-icon-button in-menu-main js-open-search" aria-label="{{t "Open search"}}">
  <span class="icon-search" aria-hidden="true"></span>
 </button>

with your link:

<a href="https://example.com" class="m-icon-button in-mobile-topbar lang-link-desktop">
  <img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" />
</a>

4. Save your changes

5. Zip the theme folder and upload it again

You will probably also need to inject some custom styles for your link so the flag image looks better, I can't provide those styles since that depends of your liking, you can use the classes lang-link-mobile and lang-link-desktop for that purpose. You can inject your styles in the Ghost Admin (Settings --> Code injection --> Site Header), for example:

<style>
.lang-link-mobile img,
.lang-link-desktop img {
  width: auto;
  height: 32px;
}
</style>

I can't help you with keeping the location after you click that link, that's not that easy to implement, sorry. You can try to find help on StackOverflow or Google.

[buarle]

Hi @eddiesigner ,

thanks already a lot for that. One more cosmetical thing. When doing this on mobile the flag has kind of a lot positioning within the menu.

You can see that on https://www.praxis-aigner-stadler.de/home/

Is there a way to change that down next to the dark mode switch?

Thanks an best, Markus

[eddiesigner]

Hi @buarle, sorry for the late response 😅

You can inject the following code in the Ghost Admin:

<style>
  .lang-link-desktop {
    position: fixed;
    right: 70px;
    bottom: 36px;
  }

  @media only screen and (min-width: 48rem) {
    .lang-link-desktop {
      position: relative;
      right: auto;
      bottom: auto;
    }
  }
</style>