Translating your Roller blog (2)

This is a continuation of my previous entry about roller blogs and their internationalization - Translating your Roller blog. I'll go into more detail about the select box code for switching languages and the associated javascript.language select box (1)

The select box I've shown in my last article displays the text "Select language:" by default. We may prefer it to display the currently selected language.

The code for such a modification is getting slightly more complex, since we need the select box to update upon page reload, so there are more places in the templates that we need to touch. Basically there are 3 changes:

  • remove the "Select language:" option from the select box
  • create a javascript function to update the selected value
  • add this function to page Onload event

Step 1 - Select box code

This is how the modified select box code can look like (I'm still modifying the sidebar template from theme Adept):

<!-- language selectbox -->

<div class="sidebar-sect default-expanded">
<div class="sidebar-sect-title">
<h2>Select language:</h2>
</div>
<div class="sidebar-sect-content">
<form action="">
<select id="langselect" onchange="location.href=value;">
<option id="lang_en" value="http://blogs.sun.com/<YOUR_BLOG_HANDLE>/">English</option>
<option id="lang_cs" value="http://blogs.sun.com/
<YOUR_BLOG_HANDLE>/cs/">Česky</option>
</select>
</form>
</div>
</div>

A few things are changed - the default entry is removed, select and option tags now have a specific id. This is important.

Note: replace <YOUR_BLOG_HANDLE> with the name of your blog.


Step 2 - Javascript function to grab the current language

There are clearly many ways to do this. This is the code I added to the very beginning of the sidebar template:

<script type="text/javascript" language="JavaScript">
<!--
function getLanguage() {
    language = "en";
    fixed = "http://blogs.sun.com/<YOUR_BLOG_HANDLE>/";
    index = location.toString().toLowerCase().lastIndexOf(fixed.toLowerCase());
    if (index == 0) {
        index += fixed.length;
        language = location.toString().substr(index).split("/");
        language = (language[1] == null) ? "en" : language[0];
    }
    langOption = document.getElementById('lang_'+language);
    langOption.selected = true;
}
// -->
</script>

Note: to use this on a different blog, you need to update the fixed value accordingly.

It grabs the current language from the current URL (location) and defaults to English if the expected part of the URL is empty. It works even with Roller categories, since they're added to the end of the URL (e.g. http://blogs.sun.com/hnhn/cs/category/Personal).

Step 3 - Creating the Onload event

Last, we need to modify the Weblog template by adding our function to the Onload event of the body tag. Simply replace:

<body class="weblog">

by

<body class="weblog" onload="getLanguage()">

Now, that's it. When you select a language from the select box the page should automatically reload and display the language you selected in the select box.

language select box (2)

Some more comments

1/ I'm no javascript expert, but this works for me well. I have my doubts on browser compatibility and possible other issues I've missed, so if you have any comments on how to improve it, please let me know.

2/ Roller has an issue associated with this way of publishing translated blogs - it's the Recent Entries information on the right side of the page. When you publish an article in English with its translation to 5 more languages, you'll get 6 new Recent entries. It would be nice if it only could display recent entries from the one selected locale.

I looked around a bit, but I don't think Roller takes this into account. This is the template code responsible:

#set($entriesList = $model.weblog.getRecentWeblogEntries("main", $numEntries))

In Roller source this leads to getRecentWeblogEntries():

apps/weblogger/src/java/org/apache/roller/weblogger/pojos/Weblog.java:
    /\*\*
     \* Get up to 100 most recent published entries in weblog.
     \* @param cat Category path or null for no category restriction
     \* @param length Max entries to return (1-100)
     \* @return List of weblog entry objects.
     \*
     \* @roller.wrapPojoMethod type="pojo-collection" class="org.apache.roller.weblogger.pojos.WeblogEntryData"
     \*/
    public List getRecentWeblogEntries(String cat, int length) {

I see no option to limit by locale, so this looks like a nice request for enhancement to me.

3/ This whole solution silently expects you to get your translation from an external source and publish it under corresponding locale. If you're considering automated translation, you might want to go and read Wayne Horkan's weblog: eclectic.


Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Solaris l10n & i18n, locales, keyboards, fonts and related topics.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today