SitePicker Alternative, Feature request

Questions
#1

Hello

I find the SitePicker component a little limited. The “name” of the site is used as the text. Using this as text for the site picker might not be optimal, especially if the text is long.

As a consequence, to use the language, i.e., “German”, “English” as the name of the site. Not really nice.

That is not satisfactory. I’ve also tried adding the country’s emoji, which didn’t work.

Therefore, an additional field specifically for the Sitepicker would make sense.

How can I do something myself? Instead of the Sitepicker, could I build something myself using the code/markup generated by the Sitepicker?

Thanks!

sitepicker
sitepicker963×144 5.68 KB

#2

Quick reply using AI:

Short answer: yes — and you don’t even need to override a partial. The sitePicker component doesn’t require you to render its markup at all.

Just write your own markup

Attach the component and loop over sitePicker.sites yourself. This is what the official docs actually show:

twig

[sitePicker]
==
{% for site in sitePicker.sites %}
    <a href="{{ site.url }}" class="{{ this.site.code == site.code ? 'active' }}">
        {{ site.code|upper }}
    </a>
{% endfor %}

Each site is a System\Models\SiteDefinition, so you get site.id, site.name, site.code, site.locale, site.timezone and site.theme, plus site.url from the picker. this.site gives you the currently active one for the “selected” state. Octobercms

So you already have two fields that are not the long name: code (e.g. german, english) and locale (e.g. de, en). Most people just use locale.

If you prefer the {% component %} tag, the partial override path is themes/yourtheme/partials/sitePicker/default.htm — standard component partial override, nothing special about SitePicker.

Short labels + flags without touching the database

Map it in Twig and keep the site names readable in the backend:

twig

{% set labels = { de: 'DE', en: 'EN', fr: 'FR' } %}
{% set flags  = { de: '🇩🇪', en: '🇬🇧', fr: '🇫🇷' } %}

{% for site in sitePicker.sites %}
    <a href="{{ site.url }}">{{ flags[site.locale] }} {{ labels[site.locale] ?? site.code|upper }}</a>
{% endfor %}

Two things about your emoji attempt:

  • If you stored it in the site name and it vanished or errored, your DB is almost certainly utf8 (3-byte) rather than utf8mb4. Flag emoji are 8 bytes and get stripped or rejected.
  • Even when they save, flag emoji do not render on Windows — Chrome and Firefox on Windows show DE as two letter boxes. If flags matter, use SVG icons (e.g. flag-icons) keyed off site.locale instead of emoji.

If you really want a dedicated field

Add a column to system_site_definitions in a plugin migration, then extend the form:

php

// Plugin.php boot()
Event::listen('backend.form.extendFields', function ($widget) {
    if (!$widget->model instanceof \System\Models\SiteDefinition) {
        return;
    }
    $widget->addFields([
        'picker_label' => [
            'label' => 'Site picker label',
            'type' => 'text',
            'span' => 'auto',
        ],
    ]);
});

Then {{ site.picker_label ?: site.name }} in your markup. One caveat: site definitions are cached, so clear the cache after the migration or the new attribute won’t appear on the frontend.

Not sure which attributes your install exposes? Drop {{ dump(sitePicker.sites) }} in the page with debug mode on and read them off directly.

1 Like
#3

Hello

Thank you very much for detailed information.
With this, i can easy create my language switcher.
We decided to have to simple buttons instead of a drop down which makes it easier anyway.

Cheers

2 Likes