Difference between #7 and #8 of
How to add a DropDown Language Picker (i18n) to the Menu

Revision #8 has been created by JQL on Nov 24, 2023, 9:03:39 PM with the memo:

More formatting errors & some typos
« previous (#7) next (#9) »

Changes

Title unchanged

How to add a DropDown Language Picker to the Menu

Category unchanged

How-tos

Yii version unchanged

2.0

Tags unchanged

i18n,AJAX,bootstrap,internationalization,bootstrap menu

Content changed

[...]
## Create the required Files

First you need to create a configuration file.

Decide where to store it (e.g. in the `./messages/` directory with the name `create_i18n.php`). Create the directory in the project then issue the following command from **Terminal** (Windows: CMD) from the root directory of your project:

```php
[...]
```php

 
./yii message/config --languages=en-US --sourcePath=@app --messagePath=messages ./messages/create_i18n.php
```
[...]
```

If necessary, change the root directory in `create_i18n.php` to point to the messages directory - the default is `messages`. Note, if the above file is in the messages directory (recommended) then don't alter this `'messagePath' => __DIR__,`. If you alter the directory for `create_i18n.phpmessages` to, say, `/config/` (not a good idea) you can use the following:

```php
[...]
```

Note: you should always use the `'sourceLanguage' => 'en'` as it is, usually, easier and cheaper to translate from English into another language. If the `sourceLanguage` is not set it defaults to `'en'`.

Add the following to the `'components' => [...]` section:
[...]
```php
   'Home' => 'Accueil',    'About' => 'À propos',
```
[...]
The `key` is the ICU language code in lowercase (with optional country code in uppercase) e.g.

> French: `fr` or French Canada: `fr-CA` > > Portuguese: `pt` or Portuguese Brazil: `pt-BR` The `name` is the name of the language *in that language*. Fe.g. for French: `'Français'`, for Japanese: `'日本の'`. This is important as the user may not understand the browser's current language.

In `/config/params.php` create an array named `languages` with the languages required. For example:
[...]
### 4. Call `LanguageHandler.php` from `/config/web.php`

"Call" the `LanguageHandler.php` file from `/config/web.php` by adding the following to either just above or just below `'params' => $params,`

```php
[...]
'encodeLabels' => false, // Optional but required to enter HTML into the labels for images
'items' => $items, // add the languages into the Dropdown
],
 
```
 The code for in `main.php` for the NavBar should look something like this: ```php
 
 NavBar::begin([
'brandLabel' => Yii::$app->name, // set in /config/web.php
'brandUrl' => Yii::$app->homeUrl,
[...]
Internationalisation should now be working on your project.


 
---
 
 
## Optional Items

The following are optional but may help both you and/or the user.
[...]
There are two steps:

1.**A.** In `/config/web.php uncomment` the following line:

```php
[...]
```

2.**B.** Create a TranslationEventHandler:

In `/components/` create a file named: `TranslationEventHandler.php` and add the following code to it:
[...]
```

If there is a missing translation, the text is replaced with a message similar to the following text:

> @MISSING: app.Logout (John) FOR LANGUAGE fr @
[...]
This is very useful and recommended as it aids the User to locate the correct language. There are a number of steps for this.

1.**a.** Create images of the flags. The images should be 25px wide by 15px high. The images **must have** the same name as the language key in the language array in params.php. For example: `fr.png` or `en-US.png`. If the images are not of type ".png" change the code in part 2**b.** below to the correct file extension. Place the images in a the directory `/public_html/images/flags/`. 2.**b.** Alter the code in `/views/layouts/main.php` so that the code for the "NavBar" reads as follows:

```php
<header id="header">
<?php
NavBar::begin([
[...]
1 0
1 follower
Viewed: 71 033 times
Version: 2.0
Category: How-tos
Tags: AJAX, bootstrap, bootstrap menu, i18n, internationalization
Written by: JQL
Last updated by: JQL
Created on: Nov 24, 2023
Last updated: 11 months ago
Update Article
Revert to #7 | Revert to #8

Revisions

View all history