Multi language website without duplicating

Hello,
about this I have been thinking of this before, whishing actually,
would it be possible to have two or more includes/blocks in the same page in two or more languages so that the desired language (text-blocks) can be called by a button so the whole site switches to that other language? So that you don’t have to duplicate or triplicate :worried: a whole site?
That would be so nice!
Mary

1 Like

Good idea for “true” bilingual / multi-lingual sites.
Will look at adding this in the future!

1 Like

I did a bilingual site (English and Italian) for an interior design company a couple of years ago but ended up duplicating the English content (pages and blocks) and manually linking between them using a language switcher in the header.

If I were to do it again I would probably try and drop the need for language specific pages and just swap the blocks based on the set language. You could redirect the user to the correct language using a few lines in the htaccess file and load all of the language related content via includes stored in Pulse.

2 Likes

Yes! That is exactly what I meant Tim, that would be great, and so much easier to maintain. So that could be done with htaccess? Wauw, never thought of that, I was thinking of js…but I’m gonna search for this!
The html lang=“nl” in the head section set to “en” is not important in most cases since the translation is only for the English/American people who actually live in our city, and there are a lot of them! If it is important then it’s better to duplicate the site offcourse.

So lets say I have this

RewriteRule ^blocks/(.*)$ /blocks/engels/$1 [R,L]

How in earth’s name could I link to that, and back…
(and I already tried a lot, time for a break!)

This is a great idea

And wire it up with the language switcher plugin?
https://www.pulsecms.com/store/plugins/select/

@TimPlumb + @mary - I feel a blog tutorial coming on if you get this hooked up. Quite a few others would love this. Having dynamic page links would also be really beneficial, rather than hard coded.

Cheers for all these ideas!

Hi @Mary,
Here’s a very quick example of one way i can think of doing this. I’ve used Pulse Classic as I know you are still using version 3 (rather than 4). While putting this together I found a small usability bug in Pulse which I’ll post separately.

Here’s the example;
http://multi-lang-classic.pulse-style.com
You can also download the source files here;
https://dl.dropboxusercontent.com/u/795566/Pulse/multi-lang-classic.zip

You can switch between English, French and Dutch versions of the home page by clicking on the language links in the top right corner of the page. I’ve only included the home page but you could easily extend this to control the rest of the site.

How does it work?
Magic mainly but there are a few little bits of code that together pull this off.

.htaccess
The following new line when added to the .htaccess file looks for a page URL that ends in a dash and a sequence of characters.

#language rewrite
RewriteRule -([^-]*)$ ?l=$1

So for example a URL of http://www.example.com/file-en will have the en part extracted and silently added onto the requested page as a query string (a GET variable called l - for language).

Template (or page) code
In the page (I used the default Pulse template) I’ve added a single line of PHP to look for the query string we appended in the .htaccess file. Here’s the code;

$lang = (isset($_GET[‘l’]) && !empty($_GET[‘l’])) ? $_GET[‘l’] : ‘en’;

This sets the variable $lang to the chosen language or defaults to en (English) if the value is missing.

Later on the in page we can start to pull in the content from our blocks. Here we simply append the $lang variable to the path of the block we are requesting;

<?php include("pulsepro/data/blocks/$page/$page"."_"."$lang.html"); ?>

This will pull in a block called;

home_en.html for English
home_fr.html for French and
home_nl.html for Dutch

Block Management
Now all you need to do is make sure that your blocks are stored in the right location and called the right thing for the preferred language.

To switch between languages you just need to append the chosen language to your page URL. The benefit of this system is that the pages are all bookmark able and can be easily accessed via the browser history.

I hope this helps.

2 Likes

:gift:
Magic indeed… but what if the url ends in a .php…?
I think that I use the includes in pulse classic in a different way…how come you don’t have a .php at the end of your url’s…
I have to look at this thouroughly tomorrow :wine_glass:
Thanks a lot for sharing this.

@Mary Here’s a very brief example of a static page (rather than a Pulse template) to do the same sort of thing;
http://multi-lang-classic.pulse-style.com/samplepage.php?l=nl

You’ll notice that I’ve appended the language as a query string to the page URL (?l=nl for example). What I really want to be able to do is call a page like this;

samplepage-nl.php

and have the .htaccess file redirect the user to

samplepage.php?l=nl

The problem I’ve got at the moment is that if I add a condition for static pages then the dynamic stuff I added earlier breaks. What I want to find is a set of rules that will allow both static page and template redirection in a single .htaccess file.

Enjoy the :wine_glass:

2 Likes

I just noticed that even that last static page example needs a bit more work as the .htaccess file is passing the user to the Pulse template page rather than keeping them on the static page.

I need to get my .htaccess books out. :slight_smile: …but first :beer:

That sounds like you’re very close…I’ve been staring at a few sites about htaccess too…
Then I decided to experiment with js (vanilla because that seems to be the thing at the moment, have a book here, js for absolute beginners, so…) anyway, what I wanted was just to add/remove a class by a click of a button that targets all the div’s to -for example- show/hide or get a 3d flip animation, or whatever css animation you can think of, so that the right language shows/pops-up.
In every div all the nl/en/de etc includes stacked on top of each other.
But.
That can only be achieved on an one-page site, cause else the visitor has to click the button again on every page,
ánd the text has to be inside an absolute positioned div so you need to have a fixed height…not good.:disappointed_relieved:
No wonder this is not done often…

If you wanted to do this with JS then I’d suggest setting a default language for the page (the most appropriate for you audience) and then set a cookie when the user clicks on one of the language links. You can set the cookie to stay alive for over a year so anytime the user returns to the site the cookie will be checked and the correct content shown.

The drawbacks of using JS and cookies are that it relies on JS and cookies (!) and you may have to look at how your pages load so you don’t end up with a flash on incorrect content as the page loads with English (for example) and then loads the cookie only to have to reload the Dutch blocks. Depending if you wanted the pages bookmarkable as well you could add a query string or hash to the URL.

Also rather than having your JS trawl through your page code looking for blocks to flip I might be inclined to simply apply a class style to the body element - - for example. You should then be able to use pure CSS to transition the items out of view and the new (French) ones in.

Good luck with this and be sure to share your work as you make progress.

…set cookies to flip alive for over a year or so…:balloon::rolling_eyes:
I guess you’re right…
It seems so simple, have all the nl/de/nl-includes on one page and just swap them…but it’s not.

Hi @Mary
Here’s a very simple example of what I had in mind.

The three language links at the top of the page call a simple JS function that adds a class style to the body tag. The CSS on the page then displays the correct text area by switching the display property between none and block.

You could extend this principle to do CSS transforms or transitions as you describe or add a library to handle animation effects for you.

:dizzy_face:
So…this

function changeLang(lang){
var body = document.getElementsByTagName(“body”)[0];
if(body){
body.className = lang;
}
}

is the only thing that does it?? …incredable. You with your simple examples, that’s the best there is!
Gonna try this as soon as I have fetched my catfood. I have been busy all day yesterday with all kinds of addclass removeclass etc, but I understand that you write js just like that too.
Did you know what I did this morning? Installed a google translate widget. :zipper_mouth: But got rid of it as soon as it started translating the surname…

Yes, that function simply looks for the body tag and applies a class style to it. The CSS does the rest. getElementsByTagName will return an array of elements so the [0] simply selects the first one in the array (there should only be a single body in the page after all). The if (body) just checks that we’ve a value in the variable before we go any further and finally the body.className simply adds the correct classname to the body itself.

This is quite a crude example as it doesn’t do much in the way of error checking and will wipe out any class styles already on the body tag but should illustrate the bare bones procedure of how to swap the panels over.

Apologies for the text in the French and Dutch panels as I relied on Google to translate these for me! :slight_smile:

Well I think its great! Only difficult to get used to this body.class but it works perfectly! I just can’t believe it can be done that simple. There is a dutch saying, ‘in de beperking toont zich de meester’ ,and google translates it like this: the less is the master…

http://localhost:8888/WebMary/talen.php

Tried opacity 0 instead of display block/none but I think display block and postition static might be better…see what happens if there is a image inside the div. And think of an animation… thank you so much.
(still no catfood in the house…)

Added a tiny opacity-animation, tried Michaels select-box but to make it complete :frowning2: nothing happens on click, also preview was a 404…maybe he is workin on it? Must be a minor thing.

https://www.webmary.nl/talen.php
(put localhost as adress in a earlier post, how…)

So I think for a one page scrollsite this ist just perfect, especially its simplicity!
I think its brilliant to just know (Tim) what it takes to make this work and with so little code! I am still impressed by that.
I am more than happy with this! Thanks a lot!!! :champagne:

This looks great @Mary well done.

It looks like the select box is looking for jQuery which doesn’t appear to be loaded and is throwing an error but other than that I think this works really well.

You well done!!! I only changed the pos. absolute to static since that can cause troubles on mobiles etc…I think.
I put in jquery, but there are so may libraries apparently that that one didn’t work…so I took it out again…but I will use plain en/nl anyway.

@TimPlumb - that language switcher is excellent and very fast!
Have you cooked up this kind of thing in Pulse 4 before?