Header Locale Selector

Customization Theme component

AI-generated summary

The discussion centers around the “Header Locale Selector” theme component by Ahmed_Gagan, which adds a language dropdown to the site header for multilingual users. Users praise its utility, with Heliosurge calling it “amazing” and suggesting mobile responsiveness and flag alternatives like country codes. khenmu recommends making it more prominent with flags. Some users report issues: volanar claims it doesn’t work, but Arkshine clarifies it was never broken — a misunderstanding with another component — and confirms it works on the latest Discourse version. A PR was merged to fix minor issues Arkshine. fahmi_fareed shares code to restrict locales (e.g., only ‘en’, ‘ar’) and optimize performance, which Arkshine affirms requires using available_locales in the theme’s settings. Later, joshhabka reports a new issue, while nat notes Discourse’s built-in content localization may render this component redundant. The component remains tagged as broken despite working, due to initial confusion.

1
:information_source: Summary Header Locale Selector adds a language selector for the users to the site header.
:eyeglasses: Preview Preview on theme-creator.discourse.org
:hammer_and_wrench: Repository Link GitHub - Ahmedgagan/header-locale-selector · GitHub
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This theme component adds an available language drop-down to the site header. It will be very helpful for the user’s who are not familiar with the default site language.

Note: This feature is only available for logged-in users.

Sponsor

Special thanks to @Richard_Millington for sponsoring this component.

13 Likes
One-click language changer
Interface language selection in header?
Any way to recommend locale to users based on location?
Discourse Language setting. Kazakh language :pray: :pray:
How do I get certain header features to also show when logged-in
Update or Replace Header Locale Selector for New Discourse Header (widgets-end-of-life) – Is Built-in Support Available?
Blank page because of header locale selector
Allow admins the option to show the header language switcher even for logged-in users
One-click language changer
2

Having this be more prominent & including flags could really help people on multi-language forums.

Awesome addition to the ecosystem. :+1:

5 Likes
6

This is an amazing fantastic feature! It is my recommendation the Team should consider adding this component minimally as a pre installed theme-component in core!

Thank you very kindly for releasing this!
:vulcan_salute::star_struck::+1:

2 Likes
7

I have small feature request.

Would it be possible to have drop down link able to adjust on mobile?

Screenshots_2023-01-22-15-28-34
Screenshots_2023-01-22-15-28-34794×387 89.9 KB

If I enable the chat plugin it is going to be very crowded. Perhaps even have it configurable to use flags on Desktop with mobile using the 2 letters similar to wasvit earlier windows? Been Awhile. lol

Though scaling might work to be similar on size as the search mag glass

8

Just s9me feedback from one of members.

Great component

the selection of languages with the flags is cool, unfortunately contains some errors. Croatia has not received a flag.
Catalonia is a part of Spain.

Also can you share sime code to reduce flag size on Mobile?

9

Would it be possible to have an option to use the country code instead of the flags? Similar to keyboard language on Windows.l?

ie en es etc.. The flag is huge on mobile. Or an option to shrink the flag size.

Even a css overide would be handy. Thanks

1 Like
List of countries dropdown field
10

Yes, this switch needs to be modified to match the general style of discourse. He’s terrible now

1 Like
11

Screenshots of the current appearance for reference:

Desktop:

image
image1372×506 32.5 KB

image
image1371×478 36.2 KB

Mobile:

image
image393×383 27 KB

image
image393×474 24.5 KB

12

This component does not work for me. Is there anything else to do besides turning it on and selecting a template?

image
image1053×551 29 KB

13

It needs at least a partial rework. If someone want to contribute and send PRs to fix various things, it’s welcomed :slight_smile:

1 Like
14

Tagged as broken for now

15

The component is broken, but marked as compatible with the latest version
https://github.com/discourse/discourse-locale-switcher/commit/52ec812157d4d3ffec2a5de9eb4cc4a5e2476cae

16

@volanar That’s not the same component.

1 Like
17

I’m removing the broken tag.

To begin with, the component was never broken!
There was a misunderstanding about another Discourse theme component that Volanar reported as broken.

I tested the component, which still works on the latest Discourse version.
However, it still requires some updates to modernize it, resolve a deprecation, and fix minor issues so it will work well on the latest Discourse version.

I went ahead and I made a PR (sponsored by @Richard_Millington) :+1:
https://github.com/Ahmedgagan/header-locale-selector/pull/3

6 Likes
20

The PR has been merged; thanks, Ahmed. :+1:

4 Likes
21

how use 2 or 3 lang and remove others lang ?
btw i optimized code for locale-selector.js:

import Component from "@ember/component";
import { action } from "@ember/object";
import { inject as service } from "@ember/service";
import { ajax } from "discourse/lib/ajax";
import { userPath } from "discourse/lib/url";
import { isTesting } from "discourse-common/config/environment";

export default class LocaleSelector extends Component {
  @service currentUser;

  get availableLocales() {
    // Cache filtered locales for performance optimization
    if (!this._filteredLocales) {
      const allLocales = JSON.parse(this.siteSettings.available_locales);
      this._filteredLocales = allLocales.filter(locale => ['en', 'ar'].includes(locale));
    }
    return this._filteredLocales;
  }

  @action
  onChangeLocale(value) {
    this.set("currentUser.locale", value);
    ajax(userPath(`${this.currentUser.username_lower}.json`), {
      data: { locale: this.currentUser.locale },
      type: "PUT",
    }).then(() => {
      if (!isTesting()) {
        location.reload();
      }
    });
  }

  defaultItem() {
    const currentUserLocale = document.documentElement
      .getAttribute("lang")
      ?.replaceAll("-", "_");

    return (
      this.content.find((val) => val.value === currentUserLocale) ||
      this.content.find((val) => val.value === this.siteSettings.default_locale)
    );
  }
}

after test it discourse keeping freeze
any idea?

22

available_locales has this structure:

[
  {
    name: "English (US)",
    value: "en"
  },
  ...
]

So in your code you will need to use locale.value. :+1:

23

@Ahmed_Gagan It appears there is a new issue with this theme component:

24

Just a note here that this theme component is not needed any more, and is supported by core in the site settings listed above. (Docs)