Kookaburra language selector question

Backlight 4, 5 & 6 Support
#1

Hi all,

I created a multi language menu with some menu items e.g.
<div data-lang="de">ÜBER MICH</div><div data-lang="en">ABOUT ME</div> etc.
The default language selector shows up and is working.
but instead of opening a fancybox modal where I can select the language I would like to stay with an old school drop down menu.

Therefore I added a new menu item with
<svg width="18" height="18"><use xlink:href="#globe" /></svg> in the “NAME” field
and two languages in the “Link to” fields.

I thought if dissabling the “Abbreviate Language Names” in the Advanced Setup the default “Language box” will hide, but didn’t.
Is that a bug? or how to create a drop down language selector menu?

Thanks in advance and best regards,
Oliver

#2

There is current no option to hide the language selector. You could use custom CSS to do so.

html .language-select-button { display: none !important; }

Bear in mind, however, that the feature has several benefits in the way that we have implemented it:

  • appears in both desktop and mobile navigation
  • appears in the cookies acceptance notice
  • in the cookies acceptance notice, is immediately accessible via keyboard navigation
  • the button + modal implementation is fully keyboard accessible
#3

Thank you Matt, makes sense so I’ll be happy with that.
Another question: How can I create a multilangual Page-Title? :thinking:

#4

That, I don’t think is possible. At least, not within the feature set.

You could probably use some JS, though. Let me think on it …

#5

Ok, thank you Matt :upside_down_face:

#6

PHPlugins function:

		function scripts() {
			echo <<<HTML
				<script>
					const translatePageTitle = (() => {
						if (typeof pageFrontmatter === "undefined") return;
						const titleParts = document.title.split(" - ");
						titleParts.splice(0, 1, pageFrontmatter.title[document.documentElement.lang] || titleParts[0]);
						document.title = titleParts.join(" - ");
					})();
				</script>
HTML;
// do not indent line above
			return false;
		} // END /**/

Remember, you can’t double up on hooks, so if you’re already using the scripts hook, then just copy the JavaScript and add it to your existing function.

Then, on each page you want this to run on, you need to add this frontmatter to your page content:

<script>
  const pageFrontmatter = {
    title: {
      de: "Galerien",
      en: "Galleries",
    },
  }
</script>

<h1 data-lang="en">Galleries</h1><h1 data-lang="de">Galerien</h1>

You don’t need the H1 tags; I’ve included them for the sake of example.

Title tag override question
#7

Dear Matt, that is very very close to what I mean - THANK YOU :smiley:

COMPANY_NAME - PAGE_TITLE

But Company Name should be always the same, and Page Title should change to the specified language :grin:
:pray:

i see, nothing’s impossible :wink:

#8

Ah, the code that I wrote assumed the default title configuration.

So, I think just change this bit:

titleParts.splice(0, 1, ...

To:

titleParts.splice(1, 1, ...

Only the 0 is changing to a 1.

#9

:partying_face: :partying_face: :partying_face:
That did it - ure genius :flushed:

Thx again Matt!