Jump to content
helmut2509

multi-language site

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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  :)

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 15

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 /. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

.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.

Share this post


Link to post
Share on other sites

.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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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  :) 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By joeck
      I am struggling with an issue where my language switcher with flags sometimes doesn't show the flag.
      It works in the default language (german):

      but when the site is in english the german flag is not shown (path to image is not found):

      I don't really understand why it works if the site is shown in german but not in english..
      Code for language switcher:
      // remember what language is set to $savedLanguage = $user->language; $languageImage = $savedLanguage->image->url; echo "<li><a href='#' class='dropdown-toggle' data-toggle='dropdown'><img src='$languageImage' alt='$savedLanguage->title'> <span uk-icon='icon: chevron-down'></span></a>"; echo "<div class='uk-navbar-dropdown'>"; echo " <ul class='uk-nav uk-navbar-dropdown-nav'>"; foreach($languages as $language) { //go through all languages // if user is already viewing the page in this language, skip it if($language->id == $savedLanguage->id) continue; // if this page isn't viewable (active) for the language, display root page $viewable = true; if(!$page->viewable($language)) $viewable = false; // set the user's language, so that the $page->url and any other // fields we access from it will be reflective of the $language $user->language = $language; // output a link to this page in the other language $path = $language->image->url; $pagePath = $page->url; if(!$viewable) $pagePath = $pages->get(1)->url; echo "<li><a class='uk-text-medium' href='$pagePath' alt='$language->title'><img src='$path' alt='$language->title flag'> $language->title</a></li>"; } echo " </ul>"; echo "</div>"; echo "</li>"; // restore the original language setting $user->language = $savedLanguage; Language template:

      image field is configured as automatic (array if multiple)
      in language page (both german and english) only one image is saved
      html output of language switcher dropwon (image couldn't be loaded):

      html output when image can be displayed:

    • By happywire
      [solution]
      =========================================================
      Using devilbox to develop locally.
      Installing the Beginner, Intermediate and Blank sites from the setup menu works perfect.
      The sites load, all pages load, can access the admin panel, all fine.

      However when installing the Multi-language site, the one I can pick during the setup procedure, things do not work.
      The English Home page works.
      The English About page,
      https://wiremultilang.loc/en/about/ tells me
      Same for the English Sitemap,
      https://wiremultilang.loc/en/site-map/ .
      I have allowed all cookies and can see them when checking in the browser cookies and site data, using Firefox 65.0.1 64-bit on Ubuntu 18.04.2 LTS.
      Clicking "German" on the Home page,
      https://wiremultilang.loc/de/ , shows me the German version of the 404 page.
      Clicking "Finish" on the Home page,
      https://wiremultilang.loc/fi/ , shows me the Finish version of the 404 page.
      What could be the issue here?
      Thank you for your guidance or any help you could supply.
    • By FireWire
      Hey everyone,
      I'm pretty experienced with pagination and haven't seen this before. I have my pages pulled using $pages->find, which is working fine however using renderPager() generates pagination where the links do not work. Here are some details.
      All templates needing pagination have pagination enabled in the admin. URL Segments are not enabled. Clicking on the "Next" or numbered links merely reloads the current page. The link href values are properly being output with the urls being /page2, /page3, /page4, etc. Manually entering the paginated urls has the same effect of reloading the current page with no new content. Pages are being returned from the ->find function properly and with the proper limit. A few other details:
      ProcessWire v3.0.98 Multi-language is enabled, 2 languages implemented. Pagination does not work on either language Have very few modules installed (few enough to list), none of which I could see interfering: ProFields, ProDrafts, ListerPro, DB Backups, Cronjob DB Backup, Upgrades, Upgrade Checker, Force Password Change, Markup Sitemap XML I'm stumped. For the sake of being overly-thorough, here's the code:
      <?php $articleTemplates = [ 'template_news_article', 'template_news_video', 'template_news_press_release' ]; $searchParams = [ 'template=' . implode('|', $articleTemplates), 'sort=-published', 'limit=' . $pages->get('template=template_news')->list_count ]; $articles = $pages->find(implode(',', $searchParams)); echo $articles->renderPager(); ?>  
    • By swampmusic
      Trying to figure out work flow for translators on a new website and have hit a brick wall.
      Site was launched in Spanish, now the translators want to add in other languages.
      I presumed that when you tick the "active" language checkbox on settings for the home page, then the new language would not appear on the public facing website, but translators would be able to work with the pages in the admin and view their work.
      Finally, once all translation had been completed, we could activate the language from the home page.
      I have searched thru the forums and found older articles from 2015 here.
      https://processwire.com/talk/topic/11100-disable-a-language-on-a-multilanguage-site/ https://processwire.com/talk/topic/10467-allow-translators-to-work-on-hidden-language/ This seems a really messy hack, or did i miss something ?
      Does anyone know if there has been an update within Processwire since 2015  to make this better/easier, or other articles explaining how to achieve it ?
      We were looking for a solution that the client can use from within Admin. Not via .htaccess or similar that would require tech skills.
      Many thanks for reading 🙂
       
    • By Sanyaissues
      Update: The render behavior of the profile is correct. My mistake was to use TextLanguage in the fields  when i just need the user to see labels according of his language (that can be achieved with the text field type).
      Hi,
      I'm using LoginRegister to allow users to edit their users profiles in the front-end, and some of the user fields are type TextLanguage (to allow multiple languages).
      The problem is that when I render the Profile Edit, the inputfields shows in all the installed languages. That doesn't happen when I render the login or register forms.
      How can i prevent that the TextLanguage inputfields render in both languages?
      My code
      <?php $user->language = $languages->get("default"); $input->get->profile = 1; $profileForm = $modules->get('LoginRegister')->set('renderStyles', false)->execute(); ?> and later... <?= $profileForm ?> The output for an multilanguage inputfield:
      <div class="InputfieldContent "> <div class="LanguageSupport" id="langTab_Inputfield_profile_firstname" data-language="1029"> <label for="Inputfield_profile_firstname" class="LanguageSupportLabel detail">English</label> <input id="Inputfield_profile_firstname" class="InputfieldMaxWidth" name="profile_firstname" type="text" maxlength="2048"> </div> <div class="LanguageSupport" id="langTab_Inputfield_profile_firstname__1031" data-language="1031"> <label for="Inputfield_profile_firstname__1031" class="LanguageSupportLabel detail">Spanish</label> <input id="Inputfield_profile_firstname__1031" class="InputfieldMaxWidth" name="profile_firstname__1031" type="text" maxlength="2048"> </div> </div>  
×
×
  • Create New...