Forum

Thread tagged as: Question, Suggestions, Discussion

Multilingual website: keeping templates clear and admin pages short

Hello,

I've been working on a multilingual website (4 languages with English as a fallback if no translation is available), and have been using the following conditional tags in templates:

<h1><perch:if id="lang" match="eq" value="en"><perch:content id="title-en" label="Title" type="text" size="l" title="true" required="true" order="1" /></perch:if><perch:if id="lang" match="eq" value="zh"><perch:if exists="title-zh"><perch:content id="title-zh" type="text" label="Title (Chinese)" order="8" divider-before="Chinese" /><perch:else /><perch:content id="title-en" type="text" /></perch:if></perch:if><perch:if id="lang" match="eq" value="ja"><perch:if exists="title-ja"><perch:content id="title-ja" type="text" label="Title (Japanese)" order="12" divider-before="Japanese" /><perch:else /><perch:content id="title-en" type="text" /></perch:if></perch:if><perch:if id="lang" match="eq" value="th"><perch:if exists="title-th"><perch:content id="title-th" type="text" label="Title (Thai)" order="16" divider-before="Thai" /><perch:else /><perch:content id="title-en" type="text" /></perch:if></perch:if></h1>

It works, but templates become pretty hard to parse, and admin pages are very long. I've now been asked to add 3 more languages, and it may be a good time to revise the template structure.

I wish there was a way to add tabs to the CMS, so that each language would be in a separate tab, which would drastically reduce the length of admin pages. Has anyone found a way to achieve this?

Thanks in advance for any suggestions/pointers to keep templates clear and admin pages short.

And here's how I create the dropdown functionality in /perch/addons/plugins/ui/_config.inc. Basically I'm just showing/hiding fields based on the titles of the dividers. So, if you need more fields, just add them between the Language: *** and EndLang dividers.

<!-- LANGUAGE SELECT -->
<script>
  $(function() {
    if ($('#languageToggle').length) {
      $('.divider:contains("EndLang"), h2:contains("Help"), .divider:contains("Language:")').hide();
      $('.divider:contains("Language:")').each(function() {
        if ($(this).is('.divider:contains("Language: English")')) { $(this).nextUntil($('.divider:contains("EndLang")')).addClass('displayToggle-en show'); }
        if ($(this).is('.divider:contains("Language: Chinese")')) { $(this).nextUntil($('.divider:contains("EndLang")')).addClass('displayToggle-zh'); }
        if ($(this).is('.divider:contains("Language: French")')) { $(this).nextUntil($('.divider:contains("EndLang")')).addClass('displayToggle-fr'); }
        if ($(this).is('.divider:contains("Language: Spanish")')) { $(this).nextUntil($('.divider:contains("EndLang")')).addClass('displayToggle-es'); }
        if ($(this).is('.divider:contains("Language: Portuguese")')) { $(this).nextUntil($('.divider:contains("EndLang")')).addClass('displayToggle-pt'); }
      });
      $('#languageToggle').change(function() {
        $("[class^='displayToggle-'], [class*=' displayToggle-']").removeClass('show');
        $('.displayToggle-'+$('#languageToggle').val()).addClass('show');
      });
    }
  });
</script>
<style>
  [class^='displayToggle-']:not(.show), [class*=' displayToggle-']:not(.show) {
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
    overflow:hidden !important;
    border:0 !important;
    display:block !important;
  }
  #template-help {
    padding-top:0 !important;
  }
</style>

...

Hope it helps!

Duncan Revell 78 points
Registered Developer

3 years ago

Field groups were added in Perch 3.1 - it could well meet your need:

https://docs.grabaperch.com/templates/groups/

Stéphane Mégécaze 0 points

3 years ago

Thank you Shane and Duncan, what I take from your suggestions is that my main template with all fields should be as simple as possible, clearly separating the inputs by language and using JS or the new field groups feature to keep the admin screen short.

The logic to display content in a specific language or fallback to default language would go in another template along with all the html markup.

Pondering whether I should keep using a single "markup" template for all languages with conditionals as shown above, or duplicate a simpler template with only the fields in the desired language (or fallback language), and pass the language as a template variable ('template' => 'post_list.'.$lang.'.html').

It means that any template update will have to be reflected in all language variation templates. How are you handling this?

Forum

Multilingual website: keeping templates clear and admin pages short

Stéphane Mégécaze 0 points

Shane Lenzen 18 points

Duncan Revell 78 points Registered Developer

Stéphane Mégécaze 0 points

Duncan Revell 78 points
Registered Developer