Panel: improve how to translate content#77
Managing translations in Kirby as an editor is not easy:
- It’s easy to forget which language you are currently viewing in the panel, especially if texts have not been translated yet. The labels are always in the same (the user’s) language so not much is changing when switching languages. A more prominent language visualisation is needed.
- Switching language requires two clicks because languages are hidden inside a select field. It would be better to have a tab-like interface here.
- It’s not clear if texts from the primary language are a live copy of the current primary version or if they are older versions that somehow have been stored. It would be great if text copies from the primary language were visually differentiated from other texts using a different color and/or an icon.
In general, it would be great if Kirby offered a side-by-side view of languages that could be used to translate content. Think of it as a split-screen with the primary language in a sticky panel on the left and the other languages in columns to the right. This view could make use of the mobile single-column panel layout.
Something we do with a custom extension that works out quite nicely is a toggle in the header and language tags on all translatable fields in the non-default languages.
I guess personally I would use it the other way around: put a language tag on all the non-translatable fields in non-default languages.
But looks really cool!
language labels before fields are a great idea
In our case the site is duolingual and we needed a way to make sure we understand that we are editing the secondary language – thus we added the labels there. The need came from the fact that the default language is copied to still untranslated secondary language pages and we were often mistaken which language we were editing as the panel still displayed everything in German although we were viewing the English version. So the idea was to focus on making English always look different.
Installs with multiple translations might require different highlighting.
Seeing which language you’re in is especially important with files fields that are translatable. You don’t see a difference there between languages.
Your 2 first points can almost be solved with : https://github.com/flokosiol/kirby-translations/pull/18
Point 3 (and 4) would be very nice to have.
I had a similar problem in an entirely different (non-Kirby) context. My solution was to add a toggle to every field. The languages turned green when filled. Might not be the perfect solution for Kirby, but I’ll leave a screenshot for inspiration ;)
One way to clearly differentiate languages in the panel is to add a few CSS rules based on the current language. Here is an example for Chinese language:
[data-language="zh"] .k-topbar,
[data-language="zh"] .k-topbar-signals {
color: #fff;
background-color: #a20303;
}
[data-language="zh"] .k-topbar a:link,
[data-language="zh"] .k-topbar a:visited,
[data-language="zh"] .k-topbar-signals a:link,
[data-language="zh"] .k-topbar-signals a:visited,
[data-language="zh"] .k-registration .k-button,
[data-language="zh"] .k-button.k-topbar-notification.k-topbar-button {
color: #fff;
}
[data-language="zh"] .k-input:not([data-disabled="true"]) {
border: 1px solid #a20303;
background-color: #fefbfa;
}
[data-language="zh"] .k-field-label {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABHElEQVR4AV2RhVHFMQzGi7uc4O4L8EZgDN4QnOLj4O5wirMALIC7S5M0NP8Urveq36W/fLWsM2Nc0rKNlMo+c7sjQoNopGCkc72qHR8u6zdvky6vzRWkqPKC3hbRWGREBnAoo+rT5WVJKEtzTvVFWZoehsh9Qn4v5fXA+xIIZ/1onbVe5zY1oR7kfZbdG32sE31DVhkxWroRNOF+/BgagE/IleM+090AGsaiFOZ2wtc+fO2Bi7w5oVkT5HI/pGf9OkFTBG+LAvmmribYCxASmJC9Bkuf+DovxmwDzdEoLSRoCJGjA2TSiOZ/B69kQT2sDYTSwQsYiYnkH+RTAHPq6vxato8iBPu/5xdvIkeS4OGso+gjY6HaqQhN3vQXOq5zMK6eaqcAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: left 5px;
text-indent: 20px;
}
[data-language="zh"] .k-languages-dropdown {
color: #a20303;
}
(in the code above a background image is used to add a flag in front of each label)
Panel styling reference: https://getkirby.com/docs/reference/panel/styling
https://getkirby.com/docs/reference/system/options/panel
It would be easier for users if the language switcher was in the topbar, always accessible, always at the same spot (permanence, consistency).
I was using Directus 9 lately and took a look at their solution to this problem. Basically, they allow you to switch languages using a dropdown. So nothing fancy. What is neat about it, though are the little progress bars indicating the translation status and the ability to view two translations side-by-side. I’ll leave some screenshots for inspiration :)