Tab labels in "Site" view of the panel are always displayed in default language

Kirby 3 Solved ✅
,
1

When I started to create my first “real” Kirby site based on the starter template I created, I noticed something strange:

This is the first time I chose a different language than English for my panel user account. I picked German. Basically, everything works fine. In my blueprints, I included English and German labels for everything.

But there is one place in the panel where German labels are ignored: The tab bar of the “site” view:

localhost:8000/panel/site
localhost:8000/panel/site1434×536 10.1 KB

All other system and field labels are in German, as you can see in the screenshot.

While the “pages” and “site settings” tab are defined directly in the site.yml, the “uploaded files” tab has its own blueprint.

#===============================================================================
# site.yml
#===============================================================================

title: Site

tabs:
  #Pages tab
  pages:
    label:
      en: Pages
      de: Seiten
    icon: list-bullet
    sections:
      pages:
        type: pages
        label:
          en: Pages
          de: Seiten

  # Site Settings tab
  siteSettings:
    label:
      en: Site Settings
      de: Website-Einstellungen
    icon: settings
    sections:
      # [… Rest of “site” tab configuration …]

  # Uploaded files tab
  uploadedFiles: tabs/uploaded-files


#===============================================================================
#tabs/uploaded-files.yml
#===============================================================================

label:
  en: Uploaded Files
  de: Hochgeladene Dateien
icon: file

sections:
  uploadedFiles:
    type: files
    label:
      en: Files
      de: Dateien
    layout: cards

Interesting enough: The “uploaded files” tab is also included in the default page blueprint. When I open any page that uses the default template, the German tab label is displayed, just as is should be:

grafik
grafik1452×349 10.1 KB

This is not a big thing and surely not a dealbreaker. But does anyone have an idea what I might be doing wrong?

2

You are not doing anything wrong, it’s a misunderstanding on how label translations work.

The labels are part of the interface, so if your Panel interface language is German, so will be the labels, i.e. they appear in the user language, not the translation language.

3

I know. And I’m speaking of the user language. When I set the user language to German, all labels are displayed in German, except the tab labels of the “site” view.

4

Hm, I cannot reproduce this issue. When copying your example into site.yml in 3.9.6.1 Starterkit, I get this:

Screenshot 2023-09-22 at 11.51.11
Screenshot 2023-09-22 at 11.51.112510×346 8.88 KB

What’s your Kirby version and which plugins do you have installed?

5

Obviously the Colors plugin is the source of this problem. When I delete it, the correct tab labels are displayed. Since I rely on this plugins additional functionality, I will just open an issue in the repo and live wih it.

6

Looking at the issue, this doesn’t seem to be the cause.

I’d recommend you consider what you do in your config. All this logic doesn’t belong there in my opinion, and instead of creating config variables, this logic would rather belong in custom site methods.

7

Indeed, the problem must have been something in the code section of my config.php which I wrote to retrieve the color information that was stored in a structure field directly in the “Site” content.

I took the bugs as an opportunity to rebuild the whole functionality around creating a color palette (with variants for light and dark mode, as well as matching contrast colors for each) and making these colors available as a select field in the panel.

Now, selectable colors are defined directly in config.php by referencing Tailwind CSS utility classes. With the help of a small plugin, I make this information available as an additional page method. This allows me not only to retrieve it in templates and snippets using option(), but also to provide these colors as a dynamic option list in the panel using the query property of select fields.

This has several advantages over the previous solution – not to mention that it does not produce any problems in the panel:

  1. Defining a color palette is not a task for website editors, and therefore doesn’t really belong in the panel anyway.

  2. The color values themselves do not have to be defined in two places anymore. Only Tailwind CSS utility classes are referenced in config.php. Brand colors that go beyond Tailwind’s own default colors are defined centrally in tailwind.config.js and can then be referenced in config.php in the same way as Tailwind’s default colors.

  3. In the templates and snippets, I can now directly output the Tailwind CSS utility classes responsible for the color selected by the website editor. The previous detour via additional CSS custom properties is no longer necessary.