Thrinacia translation capabilities with angular-translate

This tutorial shows you how to translate your site from one language to another or add additional languages using the Thrinacia platform.

NOTE: This is Part 1 of the tutorial on translation. You can refer to the next tutorial HERE.

To start, you will need access to the front end source code. You can follow this quick guide to access the front end source code via SFTP:

First, you will have to retrieve the credentials to sign in. Find the credentials by going to nexus.thrinacia.com go to your project by clicking on the dropdown menu at the top right corner of the page which says “Jump to a project.“. Choose your project.

Click on the wiki tab, then on the portal information link.

You can use the above information to access the necessary files via SFTP.

Next, you will need an SFTP client such as FileZilla.

Once you download your SFTP client, you can enter the necessary info into the client to access your files. For this example, we are going to be using FileZilla.

First, click on “File“, then on “Site Manager“.

Site manager option in the file drop down menu

Next, click on the “New Site“ button, then add the info into the necessary fields.

Add the host, port 22, the protocol which is SFTP, the logon type make sure it asks for the password, then click on connect. You will then need to enter your password.

Click on “Ok“.

Note if you would like to upload files using SFTP, you can locate the file you would like to upload by navigating in the local site section to find the file, right-clicking, then click on upload. This will upload the file into the remote site file that you are currently in.

You can also upload files by dragging and dropping them into the remote site section.

That is how to use SFTP. Now that you can enter your site via SFTP, you can now edit the text that you would like by doing the following.

Start translating the website

For translating your website using Angular Translate you need to create a new folder inside the angapp/views/translation folder. This folder will contain all your JSON data for translating into new language.

PLEASE NOTE that if you do not create such folder and use default “en” folder (our core translations) then your translation changes will be LOST after we send automatic update to website since we need to update these from time to time. This is why its IMPORTANT to create custom translation folder, store your custom translation files there and then reference it within app_local.js configuration file (found in “angapp” directory) under “PREFERRED_LANG” option.

For example if you want to translate the site to French or any other language follow the steps:

Go to the angapp/views/translation directory. There you will see folder by name of ‘en’ already created. This folder contains json file for translating to English.

IMPORTANT: Create a new folder by any name, for example ‘fr’ for translating to French, and copy all the files from the ‘en’ folder you want to change to the new destination folder.

WARNING!! When you are creating a new folder, the name must be 2 characters or less. For example, you can name the folder ‘fr’ The translations will NOT be shown if your name is over 2 characters. For example, ‘lang’ will not display the changes.

Open the login.json file from the new folder you copied files into. This file contains all your translation for the login page. It’s a key-value pair format; left part key and the right is the value. Example : “login_page_login”: “Log in”,

{ "login_page_text": "Si vous avez déjà un compte veuillez vous identifier pour continuer." }

Now you have to change the right part to the desired language. Do this for the whole file.

Remember, don’t delete the commas or the double quotes or it will break the file. The last line has no comma.

"wrong_email_sent":"Les informations de votre compte sont introuvables.",
  "account_confirmed": "Votre compte est confirmé, veuillez vous connecter avec votre."
}

Do this for all the files in the folder where you want to change.
After that open the app_local.js file and change the ‘PREFERRED_LANG’ constant to the name of folder you created. In our case, we’re changing it to ‘fr’. The default language is set here to English, which will be a fall-back language for translation if it can’t be found in the preferred language. If you don’t specify preferred language than the default language will automatically be chosen.
```
//define the default and prefered language
app.constant( 'LANG', {
  DEFAULT_LANG:"en",
  PREFERRED_LANG:"fr"
});
```
Reload your website and you are good to go.

Please note: For those that would like to edit the translations for the sedra wiget, the translation files can be found under the following: webui/angapp/widget/translations. Be sure to follow the same process for updating widget folders/files as per above.

If you have any questions or would like to know more about the process please contact us. Learn more by watching the following video: