Konzern Theme: Creating a Multi Lingual Site
During the last few months, many user asked me - and also in the RW user forum - how to create a multi-lingual site in RW. The general answer was: this can't easily be made. I worked on a solution to this some times ago (for a private project) and have now implemented this in the Konzern theme. Even it isn't a light-weight feature (you have to do some work on your part) I think my solution is the easiest possible solution to create multi-language support in RapidWeaver sites.
The theme comes with four main languages and could be expanded to your needs, which I'll talk about later. Included or let's say "preinstalled" are: english, french, german and italian.
To start, you should first install the Multi Lang RapidWeaver Snippet. To do so, simply double click the included "multilangjs.rwsnippet" file.
Site Structure for a Multi-Lingual Site
To create a multi-lingual site you need to structure your site a special way:
As the home page (1) you should create a splash page with general information and the language links that lead the user in the language section
The different language sections have to be placed in their own folder (pages) (2) with the following names:
english: en
french: fr
german: de
italian: it
spain: es
The folder names in the page inspector -> General Section have to match the strings above (e.g. en). The file names should be "index.html"
The subpages have to be structured identical, as seen above (3). The names in the page drawer can be different (and should be, as that's what the user sees!). Also the content is translated in these pages. But - and this is the crucial thing: their folder and file names have to be identical!
You have to type the file and folder names in the page inspector->general section
This is the hardest part of the whole thing but once you got the idea, it is very easy. I have included an example multi-language RW site project, you can inspect, to see what exactly I mean.
The Multi Lang Snippet
To finish the multi language support you simply have to drag n' drop the Multi Lang JS Snippet [1] into the JavaScript field [2] in the page inspector. You can adjust the language you want to use by deleting the languages you don't need. To do so, make sure you delete the whole line with the language you want to delete.
If you have set up your site structure correctly and added the snippet, small flags should be displayed at the top of the main content. When you click on one of them, you will be redirected to the "twin" page in the selected language.
Important:
It seems IE/Win doesn't like a comma on the last line of the language definition [3]. So make sure you haven't accidentally set one.
How to Add other Languages
To add language support for other languages you have to take several steps:
1. Creating the language image
Use a graphic app to create an identical language button as the ones already installed. To make it easier I have included a Photoshop template you can start from. Save your image as a PNG8 image and name it as:
LANGCODE.png
where LANGCODE will be the two-letter code of your chosen language (e.g. "en" for "english" -> en.png)
2. Copy the language button in the theme
You now have to add your created image to the theme file. To do so, control-click on the theme in the theme drawer in RW and choose "Show Contents" from the pop-up menu. You will be redirected to the finder. Now, copy the image to the following folder in that window:
Contents->js->languages/images
3. Adding support for your language to the CSS file
This is probably the trickiest part but it isn't very hard.
- Control-click on the theme in the theme drawer in RW and choose "Show Contents" from the pop-up menu (same as in step 2)
- Go here: Contents -> js-> languages
- Open the file "language.css" in any simple text editor
- Add your language to the following line:
#langNav ul li a.de, #langNav ul li a.fr, #langNav ul li a.en, #langNav ul li a.it, #langNav ul li a.es {
display: block;
}
e.g.
#langNav ul li a.de, #langNav ul li a.fr, #langNav ul li a.en, #langNav ul li a.it, #langNav ul li a.es, #langNav ul li a.no {
display: block;
}
- Add another style rule for the bg image. To do so, simply copy/paste one of the language rules:
copy/paste:
#langNav ul li a.fr {
background-image: url(images/fr.png);
}
change:
#langNav ul li a.no {
background-image: url(images/no.png);
}
3. Add your language definition to the js snippet (javascript field)
Copy paste a whole line from the code from the Multi Lang Snippet you have already placed in the page inspector and change the values to your language (e.g. 'no' : 'Norwegian').
4. Add your language pages to the RW project
Now, if everything has been made correctly, you should see your language on that page