Hi guys, I'm working at a website that, among the other things, the client has requested to be multilingual. The way I envisage it to work is this: if you browse the site from, say, Italy, you get the italian version (with the option to change the language to english of course), otherwise, from anywhere else, you get the default english version, but again with the option to change the language to italian if you wish to (with the option to be able to increase the number of languages). I'm planning to keep only one URL (www.mysite.com) regardless of where you browse from I'm not using any CMS or anything, and that's why I'm not sure what the best way to proceed is. I know that some platforms are offering some nice plugins just to solve issues like that, but I don't want to be using Wordpress or whatever only for that reason (and besides the site is almost ready and I really don't want to re-do the whole thing with wordpress). My site has no CMS at all and I'm not using any funky platform. Can anybody help me thinking of a good solution (got to admit I'm not particularly good in the subject)? Also any advice in general is appreciated
IMO detecting the users' language set in his/her browser is a more user friendly way to redirect, then based on the location.
That sounds good to me. Is that implemented clientside or server side? How does that work in practice? Like, do I effectively need two sites with the same URL or two different ones?
thanks
I did something similar in the past for a client with PHP and .htaccess. There are ways to have all your languages in the page(s), but I had subdirectories like so www.example.com/en/, www.example.com/de/ etc. but this can also be subdomains of course. I will look for the necessary scripts and will post back.
Okay, here's what I had!
The language nav is like so:
<?php
echo '<ul class="lang-nav">';
if ($thisLanguage=='it') echo '<li class="current"><a href="#">IT</a></li><li><a href="' . $en. '">EN</a></li>';
if ($thisLanguage=='en') echo '<li><a href="' . $it. '">IT</a></li><li class="current"><a href="#">EN</a></li>';
echo '</ul>';
?>
.htaccess redirect to the subdirectories with 'en' as default:
#language redirects
RewriteEngine on
RewriteCond %{HTTP:Accept-Language} ^it [NC]
RewriteRule ^$ /it/ [L,R=301]
RewriteRule ^$ /en/ [L,R=301]
On the pages itself at the top before the doctype you will have the following PHP.
Let's say page.php in 'en' subdirectory will get this:
<?php
$thisLanguage = 'en';
$en = '/en/page.php';
$it = '/it/pagina.php';
?>
and the Italian version, pagina.php, in 'it' subdirectory gets this:
<?php
$thisLanguage = 'it';
$en = '/en/page.php';
$it = '/it/pagina.php';
?>
It's all very simple as you can see and to see it working in its full glory :) visit the following website:
http://armada-amsterdam.com/
You can have a number of choices.
1. Create multiple versions of the site in different folders - this not recommended as a change to HTML has to be repeated in each version. It's a pain.
2. Set up your pages like templates with placeholders for translatable text - you then need to store these strings in separate files. The usual way is to have localization folders so that you just include the file required. THere are many ways to do this including .po files using GETTEXT / XGETTEXT A few blog posts on this. There are many translation/localization sites out there that provide a very useful service. These enable you to get translations collaboratively. E.g. https://poeditor.com/
3. You could also do as above and have every single string parsed via a conditional. This is OK but it depends upon the complexity of the site. It may also be slow.
Most implementations from CMSes etc have a localization folders containing strings (usually as arrays). But as I mentioned it depends on the complexity and how often you envisage updating these pages. E.g. http://ardpont.co.uk/cy/index.php (my tutoring site is a one-page scroller) I saw no point in creating string files - just two versions of the same page. If I had multiple pages and multiple languages, I'd definitely have gone for option 2.
Thanks guys, really useful. I reckon I should've said that the site I'm working at is a very small one, in fact it's a one page website. I had a look at both the examples and I quite like gentlemedia approach as it seems easy to extend if I want to add more languages in the future. The thing is that I have absolutely no experience with .htaccess redirect and the like, so I will probably need to do some readings and probably ask for more help later
Presumably the .htaccess redirect file goes onto the server correct? And that server has to Apache software running on it?
Also, just so I understand the whole thing correctly, and how the html files are arranged, sorry it might be obivous to you but I know only very basic php:
-On your site you use effectively 3 subdomains, en nl and de.
-then you have a .htaccess redirect file which contains (in my case would contain) only this, and this file sits where exactly, in the root folder?
#language redirects
RewriteEngine on
RewriteCond %{HTTP:Accept-Language} ^it [NC]
RewriteRule ^$ /it/ [L,R=301]
RewriteRule ^$ /en/ [L,R=301]
-there are no html pages as such, all your pages are in .php extension because they all contain their own small language-specific php script
-each php page contains its own language version, so all the content is effectively duplicated in the relevant language, except for the navigation?
So the folder structure can be summarized like so:
-root
-xxx.htaccess
-en
-english.php (containing english specific content + english php scrip)
-ita
-italian.php (containing italian specific content + italian php scrip)
-css
-css files
-js
-js files
-images
-image files
That's so I understand the gist of it, then I'll try to implement this and probably will have more questions
Yes, .htaccess is for Apache servers, but there will definately be a web.config equivalent for IIS. The pages are indeed in PHP, but converting these little snippets to ASP won't be such a hassle I guess.
The directory/file structure you have shoul do the job, but there comes nothing in front of .htaccess. You just save the file in your editor like this and place it indeed in the root directory. As for your onepage website, you will have only an index.php file in your language direcories which then gets something like this:
<?php
$thisLanguage = 'en';
$en = '/en/';
$it = '/it/';
?>
I do have to agree with Diafol. This method is still maintanable if you have 2 languages and not so many pages. If there are more and lots of pages, then I also go now for another solution.
On a side note... if a client wants his/her website in lots of languages, then I ask them if they're able to reply to emails he gets in all these languages. This makes them think and most of the time we end up eventually in only 2 or 3 languages :)
Cool, well I think apache and php will be fine as most providers don't have ISS servers from what I understand. As mentioned the site is pretty small, in fact here it is http://antonioborrillo.co.uk/agency_test/home.html so you can have a better idea of what I'm doing. In terms of languages, I think for now it's two of them, but we could have more in the future.
I'll start implementing your solution gentlemedia - it might take a few days depending how much time I've got at the moment, but i leave this thread open, and post back if I run into problems
HI sorry, one question. I have my two php pages now, each sitting in its own subfolder (en and it) and each of them with the relevant language php script (placed before the DOCTYPE), as you said above, so something liek this:
home.php (this is the english version where you can see the script and the actual language navigation, div with a class of languageSelection). The home.php inside the subfolder "it" is similar with the version of the php script supporting the italian language and the translation
<?php
$thisLanguage = 'en';
$en = '/en/page.php';
$it = '/it/pagina.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website test</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../tablet.css">
<link rel="stylesheet" type="text/css" href="../mobile.css">
<script src="../jquery-1.11.3.min.js"></script>
<script src="../script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<!-- burger menu -->
<a href="#" class="burgerMenu"><img src="../images/burger_menu.png" alt=""></a>
<!-- logo -->
<a href="#" class="logo"><img src="../images/logo.png" alt=""></a>
<!-- navigation -->
<div class="navigation">
<a href="#">Home</a>
<a href="#" data-item="service">What we can do for you</a>
<a href="#" data-item="contact">Get in touch</a>
<a href="#" data-item="showcase">Our work</a>
<div class="clear_floats"></div>
</div>
<div class="languageSelection">
<ul>
<li class="selected"><a href="#">en |</a></li>
<li><a href="#">it</a></li>
</ul>
<div class="clear_floats"></div>
</div>
</div>
There is another script though, this one:
<?php
echo '<ul class="lang-nav">';
if ($thisLanguage=='it') echo '<li class="current"><a href="#">IT</a></li><li><a href="' . $en. '">EN</a></li>';
if ($thisLanguage=='en') echo '<li><a href="' . $it. '">IT</a></li><li class="current"><a href="#">EN</a></li>';
echo '</ul>';
?>
Where should that go? I couldn't see that on your website (the example)
thanks
As you have a single page website, then rename home.php to index.php. Like this your URLs just become www.example.com/en/ and www.example.com/it/
index.php in 'en' folder will get this:
<?php
$thisLanguage = 'en';
$en = '/en/';
$it = '/it/';
?>
and index.php in your 'it' folder this:
<?php
$thisLanguage = 'it';
$en = '/en/';
$it = '/it/';
?>
That last script you're talking about is the language nav and just place it where you want it to appear on your page. I believe in your languageSelection div? Then style it with some CSS.
Ah OK, got it, sorry I think I misunderstood the first time around, and hardcoded my language menu rather than building it dynamically as you wanted me to do it :-).
Sure thing will do that and rename the files, will post back later.
Thanks again for your help.
I think that haas worked pretty well http://antonioborrillo.co.uk/agency_test/test/en/index.php thanks for all your help. Just one thing though: the url will obviously change at some point, but when it does and will look something like www.mysite.com/index.php or do I have to include the "en" and "it" directories?
Indeed it works! One thing is I see that you point to the index.php file in your language variables or not? I believe you have a structure like this $en = '/en/index.php'; but that can be just like this $en = '/en/'; The request will automaticaly open the index file.
Not sure what you mean with url change at some point! If you don't have multiple languages, than you don't need the language directories.
Ah OK, I will amend the link and remove the page name.
About the url change, I meant the one I have now isn't what I will have when the site is launched, but nevermind, not to worry. One thing I've just realized is that I need to add another page, the darn privacy policy page, and that will have to be in two languages, do you think it is OK to take the same approach and have two privacy.php pages, one inside the "en" and one in the "in" directory and use the language script approach to get one or the other?
One more thing: the privacy div currently displayed on the top of the page is generated by a script (cookies.js). Since I have two versions of the pages, I also have two versions of the cookies.js (sitting in the respective folde "en" and "it"), one generating the english cookie message the other one generating the italian cookie message, so depending on which script I'm in, I will provide the relevant link (en/privacy.php for the cookies.js inside the "en" folder and it/privacy.php for the cookies.js inside the "it" folder)
Are you likely to use more than due lingue? Se possibile, this approach could be difficult to expand upon.
Difficult to say at this stage, i think it might go up to three, but no more than that. Seen what's involved and considered the size of the site (not one page but two now because of the darn privacy policy that I haven't added as yet) I'm quite happy with this approach, but yes, I see your point, should the number of the languages grow, this approach is unsustainable
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.