multi-language site

[helmut2509]

I want to create a website with one version in german and one in english.

There is no point to translate isolated strings, I just want to translate the whole content of each page.

I have looked through the documentation, but I am a little bit confused about all the different translation features.

so what would be the best approach for my purpose?

[Wanze]

Hi,

Here you go: http://processwire.com/api/multi-language-support/multi-language-urls/

[helmut2509]

thanks for the advice, wanze.

I think, in the introduction of multi-language support there should be a kind of overview 

which approach has to be applied for which purpose.

[Wanze]

You're welcome.

It depends on your needs. But as written in the introduction, the easiest is to use the "Language Support Pages Names" module.

The great advantage is that you have one site tree for as many languages as you need. So in your case, each page of your site

is created once and then you add the content in german and english. The fact that you can also define which page is published

in which language makes it even more flexible 

[Philipp]

Quick 'n' dirty guide if you want a single page tree with the same content in different languages. The URLs will then look like example.com/en/my-article or example.com/de/mein-artikel

1:) Download and install ProcessWire

2:) Install the modules you find under the "Language" Tab. 

3:) Go To Setup->Languages and add new languages. Please note, that the default one is also the default language of your site*

4:) For every field type text or textArea change the Type to TextAreaLanguage or TextLanguage. (e.G. body with TextArea becomes body with textAreaLanguage). You fields should now have multiple tabs for each language, if you edit a page.

5:) Go to the root page (/) and look under "Settings" Setup an URL for every language, e.g. en,de,ru,... . Looks like this: http://take.ms/34Tq5

6:) Create pages and fill in the content. You can build a front end language switch as described in Ryans API Language page.

ProcessWire will take care of changing URLS (e.g. /en/example to /de/beispiel) and you can access the current language via $user->language;

*It's possible later to define another language as the default language.

[diogo]

And there you have it, the easiest multilanguage website in the history of CMSs

[pwired]

Philipp, that's a motivational post. Diogo, I want to see this happen.

I have quickly set up a test site here:   http://vh.totalh.net/vh/

to try this out. In the afternoon I have time to follow the steps

in Philipps post. I will report back in this thread.

[pwired]

Ok step 1 and 2 in Philipps post were easy.

After that I went back to Setup Languages Add New

Any combination of letters (a-z), numbers (0-9), dashes or underscores (no spaces).

I entered de (for deutsch) and clicked the Save button.

Now under languages I have default and de

If I click on de I see : Language Translation Files, Add files, json, zip

Translate New File  drag and drop files in here

Save

What are you supposed to do here ?

Step4. from Philipps post

I went to the body field and changed type from TextArea to TextAreaLanguagefield

This message came up:

Please note that changing the field type alters the database schema. If the new fieldtype is not compatible with the old, or if it contains a significantly different schema, it is possible for data loss to occur. As a result, you are advised to backup the database before completing a field type change.

I checked Confirm field type change

and clicked on Submit

I went to a page that has a body field , Home, clicked on Edit,

Under Body I see now 2 Tabs, Default and de

This looks good.

No time left for now, today my work starts at 10 - will try to find more time later on to continue.

[Philipp]

Thanks for trying it - it was just written from scratch here in the forum.

The guide was just simple and you should just try to follow the steps. Don't be confused with stuff like LanguageTranslationFiles or the FielChangeWarning.

That's the dirty part of the guide

[pwired]

Hi Philipp

I have a problem with Step 5.

Go to the root page (/) and look under "Settings" Setup an URL for every language, e.g. en,de,ru,... . Looks like this: http://take.ms/34Tq5

Home ?/....

What do you mean by the root page ? Do you mean the HOME page ? I went to the HOME page and looked for settings there:

home edit settings

Under Name I see there 2 Tabs: Default and de

but I do not see there URL FOR EVERY LANGUAGE

[Philipp]

The root page of all other pages, or called by it's path/name "/". Normally with the template "home". 

The URL for the home page ist the prefix for all language URLs. Normally, home doesn't have an url because it's url is the trailing slash /. 

[pwired]

Thanks for your reply Philipp

So,

When I go to home - Edit - Settings

Then, under Name    Any combination of letters (a-z), numbers (0-9), dashes or underscores (no spaces).

Tabs, Default and de

Under Tab de

I enter de, and I see popping up: de/

I click on Save

I guess this is what is meant by:  Setup an URL for every language, e.g. en,de,ru,... . Looks like this: http://take.ms/34Tq5

However I don't see anything cryptic like  http://take.ms/34Tq5

[pwired]

How can I accomplish a simple language selector ? Like 3 little country flags (english, german, dutch) on top of each page.

If a visitor clicks on a language flag, text changes into the chosen language. How would I link a language flag to the field

that holds the text in that language ?

[Soma]

Everything you need to know processwire.com/api/multi-language-support/multi-language-urls/

[pwired]

Everything you need to know processwire.com/api/multi-language-support/multi-language-urls/

Thanks Soma. Just went there and found this:

As an alternative, lets say that you wanted a <select> box language switcher that showed the current language

while enabling the user to select the page in another.

Guess It's gonna be a busy week.

[pwired]

Can I put this code in head.inc ?

<select onchange='window.location=$(this).val();'>
<?php
foreach($languages as $language) {
$selected = '';

// if this page isn't viewable (active) for the language, skip it
if(!$page->viewable($language)) continue;

// if language is current user's language, make it selected
if($user->language->id == $language->id) $selected = " selected=selected";

// determine the "local" URL for this language
$url = $page->localUrl($language);

// output the option tag
echo "<option$selected value='$url'>$language->title</option>";
}
?>
</select>

[helmut2509]

Quick 'n' dirty guide if you want a single page tree with the same content in different languages. The URLs will then look like example.com/en/my-article or example.com/de/mein-artikel

1:) Download and install ProcessWire

2:) Install the modules you find under the "Language" Tab. 

3:) Go To Setup->Languages and add new languages. Please note, that the default one is also the default language of your site*

4:) For every field type text or textArea change the Type to TextAreaLanguage or TextLanguage. (e.G. body with TextArea becomes body with textAreaLanguage). You fields should now have multiple tabs for each language, if you edit a page.

5:) Go to the root page (/) and look under "Settings" Setup an URL for every language, e.g. en,de,ru,... . Looks like this: http://take.ms/34Tq5

6:) Create pages and fill in the content. You can build a front end language switch as described in Ryans API Language page.

ProcessWire will take care of changing URLS (e.g. /en/example to /de/beispiel) and you can access the current language via $user->language;

*It's possible later to define another language as the default language.

Hi Philipp, I followed your instruction step by step, added two languages (german as default and english), the language prefix (en) and created a dummy home page for both languages.

But when I viewed them, I saw only the german (default) page,  even when viewing the english page. Also there was no language prefix (en) in the url.

So what is wrong or missing here?

...ah , I just found out, that I have to add the language prefix (en) manually in the browser address bar. Viewing it from the backend does obviously not work...

[pwired]

Helmut

If you put this code in your template file:

    <select onchange='window.location=$(this).val();'>
    <?php
    foreach($languages as $language) {
    $selected = '';
    // if this page isn't viewable (active) for the language, skip it
    if(!$page->viewable($language)) continue;
    // if language is current user's language, make it selected
    if($user->language->id == $language->id) $selected = " selected=selected";
    // determine the "local" URL for this language
    $url = $page->localUrl($language);
    // output the option tag
    echo "<option$selected value='$url'>$language->title</option>";
    }
    ?>
    </select> 

In the backend you can click on view page.

Then you can easy click in the language selector on a letter combination de, du (deutsch, dutch)

to change language of loaded text stored in a field. I have got that working now.

The only thing is that only default is visible in the selector and de and du are

invisible. Probably because de and du are in white color and the background is

also in white color. So next step is to find out how to change the color of de and du

not sure if that is the case. Or maybe I have to put a css background to the language selector.

[pwired]

.styled-select{
    background:rgba(256,256,256,0.7);
}

<select class="styled-select" onchange='window.location=$(this).val();'>

doesn't work !  the letter combinations de and du are still not visible.

[helmut2509]

.styled-select{

    background:rgba(256,256,256,0.7);

}

<select class="styled-select" onchange='window.location=$(this).val();'>

doesn't work !  the letter combinations de and du are still not visible.

I have implemented Ryans language switch without problems...it works fine. Look at the generated HTML sourcecode!

[Philipp]

You should be able to change title to TextLanguage field type. This should help.

[lsag]

Hello. following this thread, i'd like to create a laguage switcher, that instead of showing the language titles (that i can do already), to show the respective image flag. what i did so far:

1. created in the languages page template, a flag image field
2. in my template, iv' put this in the template

<?php
$currentLanguage = $user -> language; // remember language
foreach ($languages as $language) {
                        
  echo "teste ". $language -> id . " ";
                    
  $user -> language = $language;
  if ($language -> id == $currentLanguage -> id) {
      continue;
    } else {
      $b;
      $pg=$pages->get("/".$language);
                            
      if($language -> bandeira){
      $b =  "<img src'".$language -> id."' />";
    }else{
      $b =  $language -> title;
    }
  echo "<li><a href='" . $page -> url . "'>" . $b . "</a></li>";
  }
}
                    
$user -> language = $currentLanguage; // restore language
?>

this gets me the name of the file for both languages, but how can i get the entire url, and then show the image?

cheers to all of you

[Jan Romero]

Try changing it to:

$b = "<img src='".$language->bandeira->url."' alt='"$language->title."' />";

You may have to use bandeira->first()->url, if your image field allows multiple images.

[pwired]

How many languages you have ? Just put some language flag images directly in the assets folder

and link them up with <a><img> - - - </></a> instead of a breadcrumb language nav. Just install

the language profile in pw 2.5.0 and there you see Ryan's language switcher code.

Modify it to your hearts content   

[adrianmak]

I have implemented Ryans language switch without problems...it works fine. Look at the generated HTML sourcecode!

What is the language switch implementation from Ryans?

Could you show me the way?