OptimIT

Recently, while working on a Liferay integration project, we came across an interesting problem related to the web site localization.

It was our task to migrate the existing application to a portlet running under the Liferay portal. The existing application was localized in three languages (English, Spanish and French) whereas the Liferay portal contained static content in English language only. To support targeted languages, Liferay theme integrated the Google Translate Gadget which ultimately enabled portal localization (translation to Spanish and French). 

To integrate the Google Translate Gadget inside the Liferay theme, all you need to change is the Velocity template portal_normal.vm and add the following code:

<div id="google_translate_element"></div>
<script> function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'fr,es,en',
    gaTrack: true,
    gaId: 'xxxxxxxxxx',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

This solution worked perfectly well before the application integration. Upon language change, Google Translate Toolbar was initialized and all Liferay content was translated to the selected language. In this solution, Google Translate select box was the locale change initiator and the standard Liferay localization mechanism was not used at all.

The real challenge here was how to integrate the trilingual application within the monolingual portal which was already using Google Translate for localization.

In order to solve this challenge, we decided to use the combination of techniques:

• using standard Liferay localization mechanism as a primary language indicator
• invocation of Google Translate by setting standard GoogleTranslate “googtrans” cookie
• preventing translation of particular part of pages by using the “notranslate” css class.

Basically, instead of having Google Translate selector inside the theme, we used the out-of-the-box “Language” portlet inside the Liferay theme as a locale change initiator. As a consequence of language change in Liferay Language portlet, Google Translate Toolbar would be then invoked relying on the value of standard GoogleTranslate “googtrans” cookie which indicates a currently selected language in the Google Translate Toolbar. The value of this cookie is set based on the selected language in Liferay. This way, the language change is always driven by Liferay.  If the current language was French or Spanish, Google Translate would be invoked and if current language was English, nothing would happen.

Apart from the Liferay theme changes mentioned before, it is necessary to add css “notranslate” class to all elements which should not be translated. Particularly, in our situation, this was applied on migrated application which was trilingual and it was using standard Liferay localization mechanism.

Here are the technical changes that needed to be done for this integration:

1.  It is necessary to configure available locales in Liferay portal administration section in Control Panel (Control panel ->Portal -> Portal  Settings -> Display Settings):

• Available languages field –  the list of locales defines icon order in a Language portlet
• Default language field – set to default language (in our situation “English (US)”.

2. Changes in Velocity template portal_normal.vm file inside the Liferay theme:

• adding the Language portlet inside the header of portal:

$theme.language()

• googleTranslateInit function modification – detection of Liferay language, setting the googtrans cookie

<script>
function googleTranslateElementInit() {
         /* getting the currently active locale
            from the themeDisplay object */
   var lang = '$themeDisplay.getLanguageId()';
         var lId = 'es';
         if (lang == 'es_ES'){
             lId = 'es';
         }else if (lang == 'fr_FR'){
        lId = 'fr';
    }
    /* Setting the "googtrans" cookie for automatic
    language detection in GoogleTranslate Toolbar */
          document.cookie="googtrans=/auto/" +lId;
          new google.translate.TranslateElement({
              includedLanguages: lId,
              gaTrack: true,
              gaId: 'xxxxxxxxx',
              autoDisplay: true,
              multilanguagePage: true
           });
      }
</script>

For this solution to work it was necessary to invoke Google Translate Toolbar only with one available language –which is currently set on Liferay. This ensures synchronization between the GoogleToolbar and the Liferay localization mechanism in a way a user can change the portal language only using the Liferay language icons.

• adding the condition for GoogleTranslate script load:

#if ($themeDisplay.getLanguageId() != "en_US")
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
#end

• Adding “notranslate” class on div element which we do not want to translate (in our situation, the div surrounds the migrated application):

<div class=”notranslate”>
       …migrated application content…
       <!—The usage example of liferay-ui:message tags used in Liferay localization mechanism -->
       <liferay-ui:message key="your-message-key" />
</div>

The described technique enables the introduction of new languages to the Liferay portal even if the existing portlets and web articles are not fully translated. The supported translations should simply wrap their content with “notranslate” class, while the default language content should not use it. Then the Google Translate Toolbar can be used to translate all the page parts that are not available in the selected language.