Locales and translations in the Frontastic studio

There are 2 different ways that you can manage different languages for your sites in the Frontastic studio but these will have been decided when your project was set up. For more information, see the setting up a project article.

Firstly, you can have multiple projects set up, each 1 with its own language. This means that you'll usually have to write each language separately for each project. Developers may have put some logic into the code that could minimize this but you'll need to talk to them as it varies from customer to customer. The Frontastic team can also set up a sync feature which means you don't have to rebuild certain things for each locale (for example, page folders or Frontastic components), by default everything is synced so if you don't want this to happen, please contact our Support team.

The other way to do this is to use a single project with multiple languages. This way, the structure and pages are shared across all languages but you need to input the different translations if you're not using an automatic translation. If you want to show different pages for different locales though, you'll need to talk to your development team to build the overrides into your code.

You could also combine both setups if you'd like to. Below is an example of that setup:

• Project 1 = English Website (en_GB)
• Project 2 = Swiss Website (de_CH, fr_CH, it_CH) with a similar page folder tree as the English website, but different pages in three different languages

Managing different languages

Some copy will be automatically translated, but it's dependent on what your development team has enabled or not.

In certain Frontastic components, the Frontastic component settings will have certain fields that are translatable and it's here that you'll need to add the different copy for each language.

If you think a certain Frontastic components should be translatable but it isn't, talk to your development team about adding that field to your Frontastic component schema.

Let's look at an example of how you would edit text for different locales within the same project. Here, we'll add an ALT text to an image banner Frontastic component that's only in the default language, plus we'll add a caption to our image for each locale.

Firstly, click on the image banner Frontastic component to open the settings panel and expand the Image section:

Then input an ALT title in the default language. In this example, German is the default language (the first field) but we can still write in whichever language we like:

By leaving all the other languages blank, this default will pull through to all locales.

Then input a translation for each caption:

You can see that as you click on each, it shows you the default for the caption before you enter the translation.

These captions will now display to your user depending on their locale. If you remove the translation, it will revert to the default caption. If you remove the caption altogether, it will show as empty unless a caption has been set in the Frontastic component schema. It'll never go to an alternative language that isn't the default: