Dave Chakrabarti Footnotes in Technivism

Built-in website translation into other languages has always been something I've been interested in. For true translation (including content translation) a website has two options: human translation, and automatic translation through a language engine.

Human translation is the most effective, but also the most laborious. Drupal offers an option to allow users to translate website content into other languages, and also allows users to specify in their profiles which language they'd prefer to see the site in. As mentioned before, this is a time-consuming process. Do I have friends who are willing to translate every article I post to my site?

Unfortunately, the alternative lags way behind in accuracy, though it can provide a serviceable solution in some cases. I got an email recently from Taran Rampersad outlining some work he'd done on using Google's translation engine to translate Drupal content automatically, and decided I'd look into it as a possibility. Usability testing from a native Spanish speaker indicates that the translations produced range from the humorous to the painfully inaccurate, raising questions as to whether users who don't speak English will be able to use the site effectively.

Language translation can only improve with time, so I assumed it would still be worthwhile to take Taran's work and create a Drupal block for it (I felt this was a more elegant implementation). This is the block you can currently see in the upper right corner of my site.

Note: I'd strongly suggest a disclaimer in this block explaining that the translations may be somewhat inaccurate, so your other-lingual users don't think you're nuts.

To build something similar for your own site, start by creating a new block. Log in to your site as admin, and click on "Administer" and then "Blocks". Click on the "Add Block" tab at the top.

Next, fill out the form to add a block with the following values:

Block Title: "Translations" (That's what I called mine; call yours whatever you want the block to display at the top, kind of like a block heading).

Input Format: PHP Code. (Yes, we're going to need to enter some code here, so make sure Drupal knows it).

Block Body: Taran's original code didn't work for me, so I had to edit it slightly. You may need to edit this further if you're not using phpTemplate as a theme engine.

The code snippet I used is in this text file. You can copy paste this directly into your "Block Body" field if you like; it should work for any phpTemplate based theme. Feel free to edit the code if you need / want to. Even novice users should feel free to edit the text before the actual code.

Block Description: I entered "Google Translation Options".

The rest of the fields don't matter much...you can set it to appear on specific blocks if you'd like to test it first, but I just had mine appear on everything, though I gave users the ability to turn it off if they're never going to use it.

The next part might seem a little more difficult, because we're going to be editing code, but hang in there...it's a lot easier than it seems. Find every place where I had "digitalraindrop.com" in the code you just pasted, and replace it with your own domain name. Put it in the same format, include the endine (.com or .org or whatever), and make sure you do it for every time I've entered my site's name, or some of your translations will be returning results from my site instead of yours.

Now, one last step. If you were brave and read through the code I posted while you were editing, you may have noticed that I'm referencing an image for each translation option. That's because I want those images to be the links (see the nice little flags on the top right corner of this page?). To make this work, we're going to need to upload the flag images to the "/images" directory.

I got the flag images from Taran's site (scroll down to the bottom...Windows users should select the flags bundle in zip format). Download them and unzip them somewhere convenient.

Now use an FTP program to upload them to your website, in a folder under the root directory called "images". You may have to first create an "images" directory under the root directory, if it doesn't already exist. Don't change the flag names, unless you have some pressing reason for doing so...and if you do, you'll have to edit the code above to refer to the right images. Similarly, you can put them in a different folder, as long as you edit the code to include the right path to the images.

That's it. You can use the same method to add other languages, as long as you can find a flag image somewhere and find a translation engine that will do it for you. I implemented this using the "Connections" theme based on the phpTemplate engine, and the method should work with any phpTemplate-based theme.

In closing, I'd like to point out that Drupal has a built-in system supporting human translation, and that this is still the only really effective way to produce polished content in another language. However, if you don't have the resources to develop alternative language versions of your site, this might work as an interrim solution. As translation engine technologies improve, the accuracy and usability of this kind of implementation will also improve, so this should become an increasingly practical system for translating online content.

Thanks to Taran for the original inline implementation and code, which formed the basis for this tutorial.