www.blogsome.com

[gmeurant]

Hi everybody,

My blog is located at http://geraldosan.blogsome.com . I am running a blog about my life in Japan, and I wanted to show it to my spanish and french friends out there, so I did it in a multi-language manner. When I mean multi-language, I mean that every post is written in both languages and for each user the blog reminds the language preference the user clicked on and shows all the post in only one language.

I came out with a rather simple solution to do that, using javascript and a special way to enter each post (each post is unique, I use just a text separator in my post to have both post languages in only one post). Now I wanted to update it to have support for the <!--more--> tag to show only an excerpt of the posts in the main page, but I guess I will do complicate a little bit more the javascript code.

I was wondering if someone was doing something similar in another blog, or had another solution for multi-language posts. Your feedback is also welcome !

[gmeurant]

Nobody ??

[danga]

Can you elaborate on how you created the multi-language feature, maybe we can help you better afterwards.

[gmeurant]

Basically, I have a set of layers (div) for each language and I show one set or the other depending on the language selection the user has made. When the user selects french or spanish, I set a cookie and a global javascript value to know what the current selection is and to set it back again when the user comes back to my page.

I maintain 2 arrays, one for each language, with the list of all the div objects that are on the page: when you change the language, both list are read and each div is set to "block" (show) or "none" (hide). That way you dont have to reload the page to show the post in another language, it's done instantly.

When I create a new post with the blogsome interface, I write the content in both languages , using a separator ("***"). First the french version, *** and then the spanish version.

Then, for each post, automatically some javascript code is inserted in order to take the content of the post, split it in 2, and put each version in a new div (in my case fr-ID and es-ID. The ID is a number I generate for the page, there is a counter and each post increments this counter to get the new ID). So in the end, I just have to write each post in both languages and nothing more, the javascript code does the job of creating and managing the layers in each page.

If some post content doesn't have the separator (I was lazy and only wrote the french version for example, or an eneglish version for everybody) then this content is shown. Again, if the browser doesn't allow javascript, we are in deep trouble but anyway I place the whole content of the post(with both languages and the separator) in a "noscript" tag: it's ugly but the user can still see the information.

If you want more details, you can go directly to the page and check the source code or I can post it here also. I uploaded a javascript file using the .jpg extension and the rest of the javascript code is in the wordpress files. I don't know if my explanations were clear or not, I hope you understands !

[robg]

I searched everywhere on the net but geraldosan.blogsome.com has the only elegant solution I found for making posts switch between languages with just a click! Geraldo, you must be a genius!
So I admit i felt free to try to copy your solution. I uploaded your js.jpg and embedded everything of your source code which looked relevant to me in my index.html. Unfortunately, I am just to stupid to understand how everything works precisely. The browsers freak out already when the "function setCookie" starts, saying there's an unknown var. I am also confused about how each post is supposed to split automatically into two div's.
Does anyone understand how Geraldo has worked this out? Can anyone describe in a few steps where which code goes? Thanks in advance for considering this difficult issue. It would be a huge relief, cause automated translation tools are painfully ridiculous.
Robert

[gmeurant]

Thank you for your comment, Robert.
In order to make it work, you need to edit your index.html page, and also the post.html template where another part of the job is done.
I will help you in implementing this functionality if you wish to, just give some time to format and comment a little bit the code I wrote, so that you can understand it better.

Also feel free to ask questions !!
What about your problem ? which javascript variable is undefined ?
Did you copy also source code of my index.html ?
Don't forget also that you have to use the {ldelim} and {rdelim} tags to replace all { or } that may appear in your javascript source code inside your index.html.

Regards,

Gerald.

[gmeurant]

Today I was thinking a little bit and rather than managing only 2 languages in a blog, why couldn't we write in 3, 4 or more languages ?
After some work, I created a library quite simple to use, that allows a blogsome blog to become multilanguage.

I created a new blog to show what can be done using that library. For now it's still in alpha stage, but I will test it and think about how to make it easy for anybody to use this library. For now, you can easily add as many languages as you want, and create one posts for all the languages.

If you think of some feature that would be useful, feel free to comment them here or on my blog (geraldosan.blogsome.com) and I will try to implement them if it's feasible

[robg]

Gerald, thank you for helping! Yes, I did copy the js-parts of your index.html to mine and I got a bit further already: check out http://robg.blogsome.com. When selecting a language in the sidebar, the text in the sidebar changes, i.e. the cookie and js on the index.html work So the problem with undefined js var is solved (I learned to use the {literal} tag to help Smarty understand that a js is following).
{ or } doesn't appear in the applied java scripts.
I think that now only the post.html remains to be altered. As I understood, a javascript split("***")-function splitting the div into an array of two div's must be applied, but where do I put it? It must somehow be related to {the_content}, but I don't see how to do it. Also, I dont understand how (and why) every post gets it's own ID.
Below you see my current post.html. I appreciate all your advise! Greetings,
Robert

[robg]

Ah, I just read your last reply... I think it's fantastic that you are working on this! I really do not understand why multi-language posts like you do them on your blog are not common on the web (yet). So many people travel, move and have aquaintances and friends at several places in the world and want to stay in touch with them. It can also be quite interesting to read blogs of people who we dont know and whose native language we dont speak. So I'm really astonished there's apparently not a single blogging platform that has integrated such a feature! I am sure this will spread fast once it gets known.
Personally, two languages is enough for me. Most people I know speak either german or english, but I can imagine that many people would like 3 languages.
Regarding the "more..."-feature, I would also (just like you have already suggested before) find it great to have multilanguage abstracts of posts. I guess it would be easy to do if there was an abstract.html. But it would be up to the guys running blogsome to create that.
It would be nice to have multilingual post-headlines also, but that's probably difficult... Anyway, I can live with uni-lingual headlines for now.
Greetings from Berlin,
Robert

[gmeurant]

Hi Rob,

I am preparing a library creating a library that I hope will help users set their multilingual blog on blogsome.
I packed all the code I could for now in a javascript file and try to minimize the changes in the blogsome templates.
I think it's now quite easier to use, and you can use any combination of languages.
I successfully migrated my blog to this new library, so if you want to see it in action,
just visit my blog.

You can download the library at : http://geraldosan.blogsome.com/images/msjl.js.jpg

Please read the following instructions to know how to install and use it,
you already know almost everything but I wrote explanations for everybody.
For now, if you have issues using that library, post your questions here, and I will try to answer them.
I plan to add some more features; when it's done, I will also set up a page on my blog with instructions.

INSTALLATION INSTRUCTIONS
-------------------------

In template "index.html"
------------------------

1. Just before the final </head> tag, import the library:

<!-- Multilingual Support Javascript Library -->
<script src="/images/msjl.js.jpg" type="text/javascript"/>

</head>

2. After the beginning of the section <!-- Begin .post --> and before
{$content}, insert the initialization code. You define there the
languages you would like to use in your blog.

<!-- Begin .post -->

<!-- Multilingual Support Javascript Library initialization -->
<script type="text/javascript">
//<!--
// Add the languages you want to handle
msjl_addLanguage("fr");
msjl_addLanguage("es");
msjl_addLanguage("en");
msjl_addLanguage("jp");

msjl_init();
//-->
</script>
<!-- Multilingual Support Javascript Library initialization end -->

{$content}

<!-- End .post -->

3. Put some code on your page to allow the visitors choose their language. Their choice is stored in a cookie, so the next time they visit the site, they will see it in the same language. You can use simple links with javascript code:

<a href="javascript:msjl_setLanguage('fr');msjl_setLanguageCookie('fr',365)">Français</a>
<a href="javascript:msjl_setLanguage('es');msjl_setLanguageCookie('es',365)">Español</a>
<a href="javascript:msjl_setLanguage('en');msjl_setLanguageCookie('en',365)">English</a>
<a href="javascript:msjl_setLanguage('jp');msjl_setLanguageCookie('jp',365)">日本語</a>

In template "post.html"
-----------------------


For a newly installed blog, the content block is:
<div class="post-body">
<div>
{the_content}
</div>
</div>
Replace the content block with the following code:

<!-- BEGINNING OF THE Multilingual BLOCK -->
<div id="content-{the_ID}" style='display: none'>
<textarea id="text-{the_ID}" rows="1" cols="41">{the_content more_link_text="More..."}</textarea>
</div>

<script language="javascript" type="text/javascript">
//<!--
var original_content= document.getElementById("text-{the_ID}").value;
msjl_createLayersForContent(original_content, "{the_ID}" ,"storycontent");
//-->
</script>
<!-- END OF THE Multilingual BLOCK -->


The idea is that you have to call the javascript function "msjl_createLayersForContent", passing 3 parameters : the original content of your post, the id of the post, and the style you want to apply to your layers.
To pass the original content, I use a textarea html object containing the post text, with an id related to the post number, but you can use whatever you like.

THAT'S ALL FOR THE INSTALL PART !!

How to write your posts
-----------------------

-Write your post beginning with the first language you defined.
-When you finish writing the content for the first language, insert the separator *** (it can be changed in the library if needed)
and write the text for the next language.

Ex:

Hi there, this is my first multilingual post !!
***Bonjour, c'est mon premier post !!
***Hola, este es mi primer post !!

-If only one content is defined (no *** at all), then it will be used as a common text for all languages.
-Also, if you defined 3 languages, let's say "english","french","spanish" and you write only 2 contents,
the spanish part will be filled with the content for the first language, in that case "english".

For interested users, I would appreciate your feedback and your comments !!

Happy blogging

From Tokyo,

Gerald.

[robg]

It's working! On Internet Explorer 7 and on Flock. I did everything as told and just edited lines 19 and 20 of the js.jpg ('en' and 'de').
There's just one thing I want to make clear for others: When editing the post.html, only {the_content} must be replaced by the new code stated above in Geraldo's last post (after step 3). The rest of the old code is to remain.

Geraldo, you should post a howto in the blogsome.wiki: http://blogsome.wikia.com/wiki/ I would be happy to translate the howto and the comments in the code into German, so natives with poor english could understand.

Thank you for putting effort into this! You created something really useful. It will bring and keep people in the world closer together and help understanding each other. *sniff*

Robert

[gmeurant]

Thank you for being my first beta tester
I tested the library quite fast in IE7 and Firefox 2, it's working ok.

I am back to work here, so I don't have much time for now. I am thinking about implementing more features anyway, like multilingual titles or excerpt.
I have a working prototype for titles, but it has some drawbacks like for example your multilingual title appearing as is in RSS feeds. The same happens with the text, but as far as I was concerned, it was not a big deal if people are visiting your blog when they see something new in the RSS feed.
Is there some way to control what is send to the blog's feed ?

Maybe there is some other solution, like leaving the title in only one language, and including an additional title for each language in the text for the post, using some enclosing tags. Something like:

(-title-)This is my alternative title.(-/title-)This is the text of the post.***
(-title-)C'est un titre alternatif.(-/title-)Ceci est le texte du post.***etc.

and displaying in the blog the alternative title only (use only the normal title as a reference).

Ideas are welcome !

I will put something on the unofficial blogsome wiki, as you recommended, but I need to learn more on blogsome as well to make the library easier to use. Thank you for your proposition of translating the explanations and the comments

Gerald.