Multi Language Website - let's organize the options and how-to's into a tutorial?

[jwaldeck]

Hi Everone -

I'm still a quite new to PW (currently using mostly CMS Made Simple) and loving it due to amazing flexibility it offers!

My case is a little weird and despite being quite simple, I haven't quite yet figured out the best way to achieve this with PW. I have a simple website (6 pages only), that needs to offer content in two languages. The two versions have a similar sitemap, but not quite the same. In one of the languages there won't be the news section, the rest will be the same - but we would like to keep the structure independent from each other, so other pages can be added on each separately.

Taking this in consideration, the "two roots" approach would probably the best one and I've been looking on how to do that in the last couple of days and found a lot of scattered information in the forums, for example:

• Using two separate roots: http://codeordie.posterous.com/multi-lingual-sites-with-the-processwire-cms
• Multi language Page names/URLS: http://processwire.com/talk/topic/2979-multi-language-page-names-urls/page-3
• etc...

Can someone help by pointing me out to one doc that has it all - if there is one? I've also looked around on the tutorials section, but wasn't too lucky. In my opinion, this doc should be something like this, should live withing Tutorials and stay fresh as Ryan develops new modules:

===========================================================

Approach 1)

Multilingual website with Same Pagetree

a) How to install: this would be a great example http://processwire.com/talk/topic/2979-multi-language-page-names-urls/?p=33412

b) Language Switcher code examples:

Some code examples on how to do that

c) Conditional static elements (for templating purposes):

If en then -> ... show this
else -> show this...

d) Special Cases:

• Hide page from tree in specific language (hide from menu and backend if possible)
• Remember what language user chose (cookie?)
• Static content blocks that are diferent based on language and aren't based on templates (ie: editable footers)

Real examples:

• http://www.tripsite.com

Approach 2)

Multilingual website with Separate Pagetrees

a) How to install: this would be a great example http://codeordie.posterous.com/multi-lingual-sites-with-the-processwire-cms (haven't found any reference in PW's forums) and it would be good to have an example that doens't need YAML.

b) Language Switcher code examples:

Some code examples on how to do that

c) Conditional static elements (for templating purposes):

If "en" then -> ... show this
else -> show this..

d) Special Cases:

• Hide root reference form urls (en/about-us --> /about-us)
• Remember what language user chose (cookie?)
• Static content blocks that are diferent based on language and aren't based on templates (ie: editable footers)

Real examples:

• ?

===========================================================

Could somene help me getting this doc together to publich it in the tutorials section?

I appologize if this got a little confusing.

Thanks!

jw

[diogo]

Welcome to the forum jwaldeck. You're right that the multilanguage methods documentation are a bit dispersed on the forum (ok, a lot). It's a great idea to write this document. Right now i can't help you with this, but I can describe very simply, what i did in a site that wasn't built for multilanguage, and I had to add it very quickly http://museudoresgate.org/.
 
Because the site is really small and I was in a rush, I just added a new page in english for each one of those that wanted to be translated. They were right there in the tree, next to the others, because I didn't wanted to change the structure that I had. I also didn't want "pt" and "en" in the url.
 
I created a checkbox "english" with the label "english page?" and made it global. I also created a page field for the portuguese pages with the label "corresponding page in english" only with pages with that checkbox checked (all english pages), and also made it "single page" and global.
 
The menus were build manually, so, I just had to check if($page->english) and render the correct items for each language. To link to the corresponding page in the other language I used the page field like this: <a href='<?php echo $pages->get("corresponding_page=$page")->url ?>'>PT</a> and <a href='<?php echo $page->corresponding_page->url ?>'>EN</a>

That's it! I only had to make sure that each english page is using the same template as the same portuguese page and fill it with the translations. Only thing that took more time were the hardcoded things that I had in javascript (don't tell anyone...)

[jwaldeck]

Hi Diogo, thanks for the quick answer! Oh my, this is yet another interesting approach, but it kind of defeats the reason behind the use of a CMS, which is to give our clients the ability to change structure and add content (and menus if necessary) as they go, trying to avoid hard coded snippets as much as possible.

Another long term problem that I see is SEO, since you're using the same global template, elements such as "<html lang="pt">" don't change when you change languages and this may confuse search engines.

Very smart approach though, tks a lot for sharing! Muito obrigado e parabéns pelo site, é simples mas muito eficiente (yep, I grew up in Brazil! )

Cheers!

jw
 

[diogo]

but it kind of defeats the reason behind the use of a CMS

For this site I took the approach on the fixed menu because it's so simple, but the cms has still an important role on this site. All the videos and authors are being saved as pw pages, and that's where the owner of the site can get all the information. Also, all the content of the pages is editable, so, the menu is the only thing that is not taking advantage of the cms capabilities.

Another long term problem that I see is SEO, since you're using the same global template, elements such as "<html lang="pt">" don't change when you change languages and this may confuse search engines.

Well, that's the problem of doing things in emergency... but to be fair, this won't take a long time for me to correct, so I should just do it. There you have it, done! took one minute with this code <html lang="<?php echo $page->english ? "en" : "pt" ?>">

edit: Thanks for the compliment on the site, você está sendo muito legal

[jwaldeck]

Tks Diogo!

Does anyone else have any idea on the best approach to develop a Multi Language site with different page roots, keeping it SEO friendly and totally manageable with the CMS? Tks!

[ryan]

Regarding Approach #1, I think you'd want to use the LanguageSupportPageNames module included with PW 2.3.0 dev branch. I'm responding to your special cases with that context: 

 

Hide page from tree in specific language (hide from menu and backend if possible)

You have checkboxes next to each language page name. This controls whether the page is published in each language.

 

Remember what language user chose (cookie?)

There is no need to keep track of this since the URL structure dictates the language. This also makes it very SEO friendly. ProcessWire takes care of setting the user's correct language for you, based on the URL. 

 

Static content blocks that are diferent based on language and aren't based on templates (ie: editable footers)

That's what code internationalization is for. For example, an editable footer:

<p id='footer'><?php echo __('Thank you for visiting. Copyright 2013 by Somebody.'); ?></p> 

The following is replying to approach #2, separate trees:

Hide root reference form urls (en/about-us --> /about-us)

The structure is up to you. Whether or not you start your root with an "en/" for your default language is based entirely on how you structure your site. So if you don't want to have "en/" (for example) for your default language, then don't built off a page called "en". 

 

Remember what language user chose (cookie?)

Also not necessary since structure would dictate language. You would examine the $page->rootParent to determine language and set it at the top of some common include file (like a head.inc or init.php): 

if($page->rootParent->template == 'language-home') { // or whatever your template is called
  $user->language = $languages->get($page->rootParent->name); 
} else {
  $user->language = $languages->get('default'); 
} 

Static content blocks that are diferent based on language and aren't based on templates (ie: editable footers)

The same about code internationalization above applies here. Anything static text you put in a __() function becomes translatable. If something is translatable then it is also editable, even for the default language if you want. 

If you still didn't want to have text originate from the template, then you could always create a settings page in each tree. I would probably just add my "footer_text" as a field in the language-home page. 

[jwaldeck]

Wow.. Ryan, you're awesome and so is your CMS... I'm really loving how friendly and easy and at the same time crazy powerful it is. The attention you give to each person or thread here is also admirable. Thanks a lot, and let me know if you need help with anything "design related", although you seem to have it covered (great deisgn and UI everywhere), I'd be more than happy to help!

Thanks again I'll try this approach and loop you in on how it went.

[choppingblock]

Hi,

i tried and started a first tutorial on multi language sites here:

http://processwire.com/talk/topic/3473-how-to-set-up-a-multilanguage-site-using-a-single-page-tree/

It probably doesn't cover all aspects, but may be a good start.

[dragan]

ahem, nothing to see here... I'm an idiot (post removed)

[Pitbull]

this is very useful thank you forum!!

[DramaQueen]

Also, you can read this article How to Make a Superb Multilingual Website.  There are some tips & tricks such as LTR&RTL, UI elements, dates, time zones, orthography and of course content.

Edited July 17, 2018 by kongondo
First post, spam (self-promotion) link removed