Locomotive provides plenty of features aimed to support international users. It's packed with multilingual admin interface as well as number of primitives that help to easily build complex multilingual sites.

## Multiple locales

First off, you have to declare the set of locales before teaching your site the new languages. Change the following settings in **config/site.yml**:

Make sure you update the locales as well in the back-office if the site has already been created.

From now now, you've got an access to all i18n features bounded by these two particular locales.

## Helpers

Once we declared the list of locales that we're going to support, the router will recognize their codes at the beginning of the url, otherwise it will use the default one. So any visitor who knows which locales are supported can see the site in desired locale just by placing its code in front of the url. Hm... Not really convenient, right? There should be some way to explicitly give user information on available locales. And it's there.

Meet the `locale_switcher`! This is a helper that produces the set of links to the current page for all supported locales:

Turns into...

There are some options available:

labeliso | locale | title- **iso**: Locale code as set in settings: de, fr, en, ...etc. - **locale**: Fancy name of locale: Deutsch, Français, English, ...etc - **title**: The page title translated to the target locale
sepString ("|" by default)String to separate links

The customized call might look like...

## URLs

A localized URL in Locomotive will follow this format:

The URLs in the the default locale doesn't include the locale.


If you use the `{% path_to <page_handle_or_page_or_content_entry> %}` liquid tag to print the fullpath of a page in your template, then you're all set.

The ``path_to` tag takes care about the locale and the kind of resource you're asking for.

## Translation of Strings

If you need to translate some pieces of template, translate filter comes to help. It just substitutes the key with associated translation according to current locale. Use it as follows in the template:

The place where you store the translations is **config/translations.yml**:

If your current locale is **en**, it'll appear like "_I'm translated string, yay_!" on the page.

## Translation of Content

The Locomotive's approach to translation of the content is amazing. It's really transparent. Every field can be translated, even files, which is extremely useful if you store images with captions or documents in different locales there. You may choose whether translate field or not on creation of content-type using localize option.

Once content-type is setup, it's really easy to manage translated content using admin interface. But you may want to see translated entries in development. If that's the case, just use locale codes as sub-keys as we did before. Say if you have content-type `thing` with localized field `description`, it'll look like following in **data/things.yml**:

## Site wide SEO parameters

In the config/site.yml file, you will find three keys that define site wide SEO optimization parameters:

  • seo_title

  • meta_keywords

  • meta_descriptions

Each of these parameters can be localized.

If your site is not internationalized, you would write there:

And you could then access these parameters in your .liquid files as follows:

Where to insert the preceding code snippet

A good idea would be to insert the preceding code snippet in the <head></head> section of your default.liquid layout (provided that such default.liquid layout is then extended by all the other layout and pages.

This way, the site wide SEO parameters will be automatically fed into all the pages of your website.

To learn more about page inheritance and layouts, check [page inheritance](🔗) and [layouts](🔗).

If you want to localize such parameters, modify your config/site.yml as follows:

If you want to access your parameters in your .liquid files, you have to create localized versions of your .liquid files. To do so, create a new file in the same directory as the original page and name it <name_of_initial_page>.<locale>.liquid.

For instance, if you have an `index.liquid` page that you want to localize, create a `index.fr.liquid`page in the app/views/pages folder.

Then, duplicate the original file's header (the zone included between the two sets of "---") in the new file and modify it to match locale parameters.

For instance, if you have an index.liquid file with the following YAML header:

and want to have an index.fr.liquid file, the YAML header of this file should look like this:

Now, if you have set a new site using the wagon site generator, open app/views/layout/default.yml. Your file should look like that:

Replace line 12 by the following lines:

Save this file.

Now create a new default.fr.liquid empty file in the same directory as the default.liquid file (in our case, this should be in app/views/layouts). Add the following code to your new file:

Save this file.

Create a new simple.liquid empty file and add the following snippet of code:

Save this file.

Now, if you have the Wagon server on, browse to http://localhost:3333. Inspect the file and you should see your SEO parameters rendered in your original language.

Following our example, if you browse to http://localhost:3333/fr and inspect the file, you should see your SEO parameters rendered in your target language (French in our exemple).

Localization of layouts

If any of your localized page extends another page or a layout, you need to duplicate all the pages and layouts that your localized page extends in your target language.

Note that each of these site wide SEO parameters will be accessible to the editors of the site in the back office of the Engine for them to personalize.

## Page SEO parameters

You have the opportunity to set the same SEO parameters for each page.

To do so, first add the following keys to the YAML header (the section between the two sets of "---") of any of your .liquid pages.

This will set page-wide seo parameters. You can then access these parameters using:

You also have access to the page title as follows:

Now, if, as mentioned [above](🔗), you have duplicated this page (and all its underlying layouts) for localization purposes, in the YAML header of the localized duplicated page, you can define your localized SEO parameters.

Building up on the exemple proposed [above](🔗), your index.liquid YAML header would look like that:

and your index.fr.liquid YAML header would look like that:

Open your default.liquid layout. If your followed the instructions in the section entitled Site wide SEO parameters [above](🔗), it should look like that:

Replace line 12 to 16 with the following snippet of code:

As you can see in the code, for each page, you then have access to four parameters which are defined in the YAML headers of your localized pages:

  • page.meta_description

  • page.meta_keywords

  • page.title

  • page.seo_title

Each of these parameters will be accessible to the site editors for them to personalize in the back-office in the Engine, under the advanced settings section of each pages

## TimeZones

Finally you may want to setup the timezone in **config/site.yml**:

Select your timezone directly in the back-office if your site has been already created.