How it works

There are two main concepts to cover before implementing the multi-language feature.
- Key phrases
- Translated phrases.

A key phrase is the one you define into the template as a phrase to be translated. It could be any literal phrase but you have to identify it into the template with a proper syntax.

For example: {`Awesome images!`}.

[!] Important Note: The characters before & after the curly brackets are grave accent, otherwise known as backticks, rather than a single quote.

The second one, is the phrase that corresponds to a key phrase in a specific language code.
- For example: {`Increibles imÃ¡genes!`} means {`Awesome images!`} in es_ES.

The key phrases aren't associated with any language in particular. It actually could be set in any language you choose, but is recommended that it matches your default (main) language, because when a template is rendered into the browser, our theming system will identify the language of the user, and if that language is supported by your setup, it will show every translated phrase into the corresponding language. However if it is not, our system will display the key phrase as it is.

Setting Up a Multi-language template

This section will describe the process of create multi-language templates.

First you'll define and create the key phrases. Then you'll manage the languages to support, and finally adding the translation of the phrases of each language in the appropriate section

1. Defining Key Phrases

The first thing you have to do is define the phrase to be translated into the template you will be supporting.

First, choose your template in the Widget Design tab, and enclose every literal phrase into braces and grave accents.
- Example: {`KEY_PHRASE`}. By literal, it means phrases with out variables, for example, Look at $gallery_name.

Syntax matters!

Every single character counts. Even the punctuation, i.e, {`Hello world`} differs from {`Hello world.`}. So, it's important to make the key phrases the most atomic as possible.

For example, you can leave out the untranslated parts outside, like: {`Hello world`}. (notice the period outside the braces)

2. Creating Key Phrases

Every time you Save and Preview a template, our template system looks for the new key phrases and fills them out into the list of phrase to be translated in our DB. This is important because you'll not see the new phrases to be translated until you Save and Preview the template.

After this step, you'll see the rendered template exactly as it was before, because we aren't translating anything yet, but you will see the phrases to translate as we move further.

3. Using the language variable in templates

For widget wall and slider: this.lang
For uploader and viewer: {$lang}

4. How the user language is identified

Once you've created the phrases, you've got to define the languages do you want to support and translate. For that, go to the Widget Design Tab, locate the LANGUAGE tab. Then click on + ADD LANGUAGE.

Enter a language code and click on Save.

Language and Locale Designations

Code convention of the language have 5 characters maximum and it's recommended that the naming convention follow the locale convention: language_COUNTRY (example fr_CA) or just language (for
example fr). You can choose the name convention however you see fit, but it must match with the language detection.

5. Setting up the Translated Phrases

The final part is the translation.

Go to the Widget Design Tab, and CONFIGURE the language in the Language section below. A list of all key phrases you've defined previously will appear at the left side. You have to complete the translation for all of the *key phrases in the language you selected.

Repeat this step for every language you define. Remember, every key phrase that remains untranslated, will be displayed as the original text.

Rendering a multi-language template

Once a template has been configured to support multi-languages, the appropriate language will be shown to the end-user according to the language identified for the end-user. The user language is determined by one of several techniques, described below, in respective order.

This is the simplest way to render a template in a given language. This is the preferred technique if you currently know the language that you want to display the template, or for testing purpose. It consist on add the variable data-lang="REGION CODE" to the widget code.

Example:

<div id="olapic_specific_widget"></div>
<script type="text/javascript"
    src="//photorankstatics-a.akamaihd.net/static/frontend/latest/build.min.js"  
    data-olapic="olapic_specific_widget"
    data-instance="xxxyyzz"
    data-apikey="aabbcc"
    data-lang="fr_CA">
</script>

Accept-language header

If any query string is received (e.g., http://www.example.com/gallery?lang=en_US), our system will try to identify the user language from the Accept-Language header, which is the language configured by the end-user in the browser.

Please note that this information is saved into the user session. So, it could take a while to see the changes after browser reconfiguration.

Implementing multi-language support