Sorry, we don't support your browser.  Install a modern browser

Panel: improve how to translate content

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.

4 years ago
2
Changed the title from "Improve translation process" to "Panel: improve how to translate content"
4 years ago

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.

4 years ago
2

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!

4 years ago
1

language labels before fields are a great idea

4 years ago
2

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.

4 years ago

Installs with multiple translations might require different highlighting.

4 years ago

Seeing which language you’re in is especially important with files fields that are translatable. You don’t see a difference there between languages.

4 years ago

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.

3 years ago

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 ;)

2 years ago
2

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).

2 years ago

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 :)

2 years ago
1