Better discriminability for languages in the panel

Hi,

I have a bilingual site (German and Englisch) and everything works fine but sometimes while edition the content in the panel I edit a field in the wrong language. Example: I edit page A (has both languages) in english and then switch to page B (only in German) but with “EN” selected in the top bar. The panel uses the german content to pre-fill the english content and this is sometimes confusing.

So I wonder if you like to add a language specific class or data-langugage attribute to the <body> tag in the panel so one can use a custom CSS to use different colors for the top bar for instance.

Best,
Tobi

6 Likes

+1

@tobiasweh, have you found a solution for this in the meantime? So far, all I was able to do is change the color of my language buttons with a custom css for the panel to make them more prominent, but it’s not good enough. I’d like to hide some fields in the non-default language too.

Instead of hiding them, you could at least make them read only using the translate option? Then they will not get translated…

1 Like

Awesome! :astonished: Thanks @texnixe

I keep my +1 for @tobiasweh’s suggestion though. Could come in handy for the reason he explained.

Nope … but I didn’t searched for it, though :wink:

You may wanna have a look at my Translation Plugin.

It displays the translation status for all languages and you are able to delete single translations without deleting the whole page.

@tobiasweh @daizumi

As an alternative to the suggestions above, I made a plugin a while ago:

github.com/jenstornell/kirby-panel-flags

It will add a flag to the left of the language selector.

For some people it’s easier to spot if the flag is wrong, than if the language letters are wrong. It’s an extra help to show visually what language is selected.

There is a discussion of that a flag is a country and not a language and I agree, it’s not. For me personally I only use swedish, english and german and it’s fine to show them as flags in the panel. I even show them as flags on the frontend on my site (ekobyn.com). But if you need to switch between Kongo (french) and Australia (english), flags might not be the best idea, on the frontend at least.

About the original suggestion @tobiasweh

I think it’s a great idea to add a language html class to the body element. No plugin would be needed to style it and my plugin would require no field.

I even added an issue: https://github.com/getkirby/panel/issues/1016

I wonder what you would do with flags for a site in Switzerland for example, three languages but three times the same flag? Or three different ones for each language?

In that case I would not use flags at all. :slight_smile:

But you exclude German speaking people in Austria or Switzerland with your Deutschland flag? Or all Americans with the Union Jack?

I can only speak for myself. For me the flags in my panel have saved me many times from writing in the wrong page language, it’s that simple. :slight_smile:

But it might not be the best solution for everyone, I already agreed on that.

Fair enough and of course everyone is free to do as they like :slight_smile:. I don’t understand why you use them on the frontend, though. I still think it is important to see the implications of using flags and avoid them whenever possible unless you are really target countries rather than languages.

But in any case, I agree that an option to style different languages differently makes sense, and it shouldn’t be a big deal to add a language class to the html or body element.

@flokosiol, pretty neat! Will keep it in mind for future projects. Might make more sense if I had more than two languages and/or text fields.

Thanks, @jenstornell! This will solve my problem for now. :slight_smile:

As for the language vs flags discussion (@jenstornell, @texnixe), that’s why I was looking for a way to apply custom styles to the whole page based on language, to e.g. change the background color of the whole site based on the language you’re at. Colors would still be arbitrary but in a less explicit country-based way.

1 Like

Fair enough and of course everyone is free to do as they like :slight_smile:.

Agree!

I don’t understand why you use them on the frontend, though.

I target the countries as well. For example the swedish version contains swedish prices + swedish currency SEK.

But in any case, I agree that an option to style different languages differently makes sense, and it shouldn’t be a big deal to add a language class to the html or body element.

Agree!

We don’t agree on everything, but I like that we do agree on the most important thing in this post, which is the solution to this problem, to simply add a class to the html/body element. Maybe just leave it with that. :slight_smile:

1 Like

I know the whole translation option discussion is yet unsolved, but to make it a little bit more complicated: how about adding a visual cue (e.g. color) to a field which had no value for this language so far and has just been pre-filled from the default language? This way you would also be more aware that you editing a different translation, not your main one when suddenly all/most of your fields are e.g. highlighted in lilac.