# Add Translations to GeoNode Project

This section will demonstrate how to change the translations for the geonode-mapstore-client single-page application and the Django template. Let's start by limiting the list of languages to English and Italian by using the `LANGUAGES` variable

Edit the `settings.py` of the project

```cmd
vim /opt/geonode-project/my_geonode/src/my_geonode/settings.py
```

Copy this list to the end of the file

```python

LANGUAGES = (
    ('en-us', 'English'),
    ('it-it', 'Italiano'),
)

```

Wait for the reload of the GeoNode app and then refresh the browser page to see the new list of languages.

![Changed translations list](img/custom_theme_014.png)

## Update translation of the single page application

The MapStore single-page application uses json files to define translations.
We can override the default ones by adding a new set of translations in the GeoNode project.

Create a new directory called `mapstore` inside the static folder

```cmd
mkdir /opt/geonode-project/my_geonode/src/my_geonode/static/mapstore/
```

Create a new directory called `project-translations` inside the `static/mapstore/` folder

```cmd
mkdir /opt/geonode-project/my_geonode/src/my_geonode/static/mapstore/project-translations
```

Create a new translation file for the English language called `data.en-US.json`

```cmd
touch /opt/geonode-project/my_geonode/src/my_geonode/static/mapstore/project-translations/data.en-US.json
```

This file must contain two keys: locale and messages. The locale represents the language code, while the messages will contain all the translation messages we want to override or add. In this example, we will override the `View` message.

```json
{
    "locale": "en-US",
    "messages": {
        "gnhome": {
            "view": "Open"
        }
    }
}
```

Create a new translation file for the Italian language called `data.it-IT.json`

```cmd
touch /opt/geonode-project/my_geonode/src/my_geonode/static/mapstore/project-translations/data.it-IT.json
```

Similar to the English message, we will include the override for the `gnhome.view` message

```json
{
    "locale": "it-IT",
    "messages": {
        "gnhome": {
            "view": "Apri"
        }
    }
}
```

This is the expected structure of the files.

```
/opt/geonode-project/my_geonode/src/my_geonode/
|-- ...
|-- static/
|    |-- ...
|    +-- mapstore/
|         |-- ...
|         +-- project-translations/
|              |-- ...
|              |-- data.en-US.json
|              +-- data.it-IT.json
|-- ...
```

Finally, we need to include the new translations' paths to the `MAPSTORE_TRANSLATIONS_PATH` settings. All of the translations' paths will be used and merged (where the higher position in the list will override the previous one) 

```cmd
vim /opt/geonode-project/my_geonode/src/my_geonode/settings.py
```

Copy this list to the end of the file

```python

MAPSTORE_TRANSLATIONS_PATH = [
    '/static/mapstore/ms-translations',
    '/static/mapstore/gn-translations',
    '/static/mapstore/project-translations'
]

```

Here are all the original translations messages:

- [MapStore2](https://github.com/geosolutions-it/MapStore2/blob/master/web/client/translations/data.en-US.json)
- [geonode-mapstore-client](https://github.com/GeoNode/geonode-mapstore-client/blob/master/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json)

Wait for the reload of the GoeNode app and then refresh the page. See how the view button has changed to open.

![Replacement of view label with open](img/custom_theme_015.png)

## Update translation in Django templates


Create a new snippet template to override the jumbotron section or override it if it exists

```cmd
mkdir /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/
touch /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/hero.html
```

Edit the `hero.html` template

```cmd
vim /opt/geonode-project/my_geonode/src/my_geonode/templates/geonode-mapstore-client/snippets/hero.html
```

Copy this snippet into the `hero.html` template where the title and description are wrapped inside the translation block

```html
{% load i18n %}
<div id="gn-hero" class="gn-hero">
    <div class="jumbotron">
        <div class="gn-hero-description">
            <h1>{% trans "My Geonode" %}</h1>
            <p>{% trans "sharing my geospatial data, my maps and my apps" %}</p>
        </div>
        <p class="gn-hero-tools">
        </p>
    </div>
</div>
```

Now create a new locale folder inside the geonode project

```cmd
mkdir /opt/geonode-project/my_geonode/src/my_geonode/locale
```

Then run the following script to create the locale files

```cmd
workon my_geonode
cd /opt/geonode-project/my_geonode/src/
django-admin makemessages --no-location -l en_US -l it_IT -d django -e "html,txt,py" -i docs
```

Note: the flag `-l <locale>` can be used multiple times for each language supported in the project

The previous steps creates the file .po that could be edited.
Now we could edit the italian translations

```cmd
vim /opt/geonode-project/my_geonode/src/my_geonode/locale/it_IT/LC_MESSAGES/django.po
```

Inside the django.po file we will find empty string for each `msgstr` property that could be filled with the translation

```
msgid "My Geonode"
msgstr "Il mio GeoNode"

msgid "sharing my geospatial data, my maps and my apps"
msgstr "condividere dati geospaziali, mappe e applicazioni"
```

Finally we can compile the locale file to make them available to the django templates

```cmd
django-admin compilemessages
```

Refresh the browser page and switch to italian language to see the final result

#### [Next Section: MapStore Client Configuration and Development](103_CLIENT_DEVELOPMENT.md)