Translations

Most templates have some isolated texts which are not part of the content. Some examples:

• "Search" word in a button beside a input text field
• "Subscribe to our newsletter"
• "Log in", "Sign in" and similar.

Navigate CMS allows placing this kind of texts in a file (a JSON Dictionary) to ease the task of translating a theme. So, we can send just the dictionary to a translator to complete his job faster, as he/she never will see the full HTML file.

Additionally, the dictionary is used for the titles given in the theme definition. If we have a property declaration that will be displayed in Navigate CMS when editing a content, we can make the application put the translation of the title instead of a fixed text. For example, the property "facebook_url" could have the title "Your profile URL on Facebook" when using Navigate CMS in English and have "Dirección de tu perfil en Facebook" if the user has selected Spanish.

In the theme definition we declare the available dictionaries this way:

"languages":
{
    "language_code": "path to json dictionary from THEME ROOT",
    "en": "i18n/en.json"
}

The language codes are defined in the website configuration, and they are free so one can decide to use "eng" instead of "en" for the English language. We recommend using the 2-letters identifier for a language (ISO 639-1) to achieve maximum compatability.

Your theme can support any number of language codes; you can even define a dictionary for the "en" language code and the same dictionary file for the "eng" language.

JSON Dictionary

Let's see how a JSON dictionary looks like:

{
    "string_code": "Translated text",
    "read_more": "Read more",
    "send": "Send",
    "slideshow_pause": "Slideshow pause (seconds)",
    "address": "Address",
    "contact_form": "Contact form",
    "submit": "Submit"
}

As we can see, the "slideshow_pause" line is used as a title for an editable property. In Navigate CMS the field is shown like this example:

Using the dictionary in your templates

Requesting a translation of a text in your templates is easy using a nv tag. Let's take the original HTML code:

<a href="#">Read more</a>

we only need to replace "Read more" for a nv tag requesting that translation:

<a href="#"><nv object="dictionary" id="read_more" default="Read more" /></a>

0 Comments