Google Translation AJAX API Integration with LinguaPlone

There is no Plone product which translates the content of page into the different language when multi-lingual site is created using the LinguaPlone by the content editor / translator.

So we have created a Plone Product that gives an option to content editor / translator to convert the English content to other languages so they get translated content to start with the conversion of site to another language.

We have used the jquery-translation plug-in (http://code.google.com/p/jquery-translate/ )  to achieve this functionality as there is a limitation of 5000 characters per request in Google AJAX API for translation.

How it works?

It can be installed using the buildout or just copy the product in the ‘products’ folder and restart the Plone.

Go to the Site Setup -> Add-on Products, check this product from the “Products available for install” section and hit Install button to install the product to the specific plone site.

Now go to the any page which you want to translate, select the language from ‘translate into …’ menu as shown below.

Plone - Translate Content

After selecting the language one will see the split screen as below with the original content in left and in right side, it will get translated.

After installing the Google Translation product to this site, “translate using google” button will be visible in this LinguaPlone template.

Click on the “translate using google” button to translate the content which is there in the left side.

Translated content is auto filled in the right section for title, description & content fields. You can see in the below screen that content has been translated using the Google AJAX API and populated the respective fields in the right section.

Save the page and now you have the translated page created in few seconds.

How did we create Google Translation Plone Product?

• Create your Plone 3 Theme product folder structure using the Paster command or you can use this website to create one http://paster.joelburton.com/.
• If you use the paster.joelburton.com then here are the values you can fill to create product.

Click on the Generate button to create the product, it will display the links to download the created product as zip or tarball.

Download and unzip it, you will have the following folder hierarchy.

• Copy the “translate_item.cpt” & “translate_item.cpt.metadata” file from the LinguaPlone product installed on your PC, these files are located in the LinguaPlone -> Skins ->LinguaPlone folder.
• Paste these files in the “GooleTranslationApp_Products_custom_templates” folder.
• Create a folder “GooleTranslationApp_Products_jsscript” in the skins folder.
• Download jquery-translation plug-in and put it in the “GooleTranslationApp_Products_jsscript” folder
• You also need to install the collective.js.jquery plone product as jquery-translate plug-in requires the jquery 1.3.2 version.
• Now open the translate_item.cpt file in any text editor and paste the following line whenever you want to display the ‘translation using google’ button on the LinguaPlone translation page.

<input class=”context”  onclick=”translate();return false” value=”Translate using Google” />

• Create a blank js file googletranslation.js in the “GooleTranslationApp_Products_jsscript” folder.
• Open this file in the text editor and paste the script below which actually translate the content into other language using the Google AJAX API.

function translate()

{

var fromLang = ‘en’;

var toLang = ‘en’;

var fromLangCol = document.getElementsByName(‘lp_translating_from’);

if(fromLangCol.length > 0)

fromLang = fromLangCol[0].options[fromLangCol[0].selectedIndex].value;

var toLangCol = document.getElementsByName(‘lp_translating_to’);

if(toLangCol.length > 0)

toLang = toLangCol[0].options[toLangCol[0].selectedIndex].value;

startTranslation(fromLang, toLang, ‘parent-fieldname-title’, ‘title’);

startTranslation(fromLang, toLang, ‘parent-fieldname-description’, ‘description’);

startTranslation(fromLang, toLang, ‘parent-fieldname-text’, ‘content’);

}

function startTranslation(srcLang, targetLang, srcId, targetId)

{

var sourceText = ($(‘#’+srcId)[0]).innerHTML;

if($.trim(sourceText) == ”)

return;

$.translate(sourceText,srcLang,targetLang, {

start:                     function(){    },

complete:           function(translation){

var objControl = ($(‘#’+targetId)[0]);

if(objControl == null && window.kupu)

{

editor = window.kupu

editor.resumeEditing();

var obj = document.createElement(“DIV”);

obj.innerHTML =  translation;

newtext = editor.getInnerDocument().firstChild.appendChild(obj);

editor.insertNodeAtSelection(newtext)

editor.updateState();

}

else if(objControl == null && window.FCKeditorAPI)

{

FCKeditorAPI.GetInstance(“text”).SetHTML(translation);

}

else

$(‘#’+targetId).val (translation);

},

error:                    function(){     }

});

}

• Open the skins.xml file from the Products -> GoogleTranslationApp  -> profiles -> default folder and add the information about the new folder we have created in the skins folder as below.

xml version=”1.0″?>

<object allow_any=”False” cookie_persistence=”False”

default_skin=”google_translation”>

<object name=”GooleTranslationApp_Products_custom_images”

meta_type=”Filesystem Directory View”

directory=”GooleTranslationApp.Products:skins/GooleTranslationApp_Products_custom_images”/>

<object name=”GooleTranslationApp_Products_custom_templates”

meta_type=”Filesystem Directory View”

directory=”GooleTranslationApp.Products:skins/GooleTranslationApp_Products_custom_templates”/>

<object name=”GooleTranslationApp_Products_styles”

meta_type=”Filesystem Directory View”

directory=”GooleTranslationApp.Products:skins/GooleTranslationApp_Products_styles”/>

<object

meta_type=”Filesystem Directory View”

directory=”GooleTranslationApp.Products:skins/GooleTranslationApp_Products_jsscript”/>

<skin-path name=”google_translation” based-on=”Plone Default”>

<layer name=”GooleTranslationApp_Products_custom_images”

insert-after=”custom”/>

<layer name=”GooleTranslationApp_Products_custom_templates”

insert-after=”GooleTranslationApp_Products_custom_images”/>

<layer name=”GooleTranslationApp_Products_styles”

insert-after=”GooleTranslationApp_Products_custom_templates”/>

<layer name=”GooleTranslationApp_Products_jsscript”

insert-after=”GooleTranslationApp_Products_styles”/>

</skin-path>

</object>

• Open the skins.zcml file located in the products folder and add the lines in bold below.

<configure

xmlns=”http://namespaces.zope.org/zope”

xmlns:cmf=”http://namespaces.zope.org/cmf”

i18n_domain=”GooleTranslationApp.Products”>

<!– File System Directory Views registration –>

<cmf:registerDirectory

name=”GooleTranslationApp_Products_custom_images”/>

<cmf:registerDirectory

name=”GooleTranslationApp_Products_custom_templates”/>

<cmf:registerDirectory

name=”GooleTranslationApp_Products_styles”/>

registerDirectory

name=”GooleTranslationApp_Products_jsscript”/>

</configure>

• Open the jsregistry.xml from the profile -> default folder and add the following content to register the googletranslation.js file

<?xml version=”1.0″?>

<object>

<javascript cacheable=”True”

compression=”safe”

cookable=”True”

enabled=”True”

expression=”not: portal/portal_membership/isAnonymousUser”

id=”jquery_translate.js”

inline=”False”/>

</object>

• Now all is done. Just put the complete package in the src folder of your Plone installation directory. Add the path in the buildout.cfg to install this product and restart the Plone.

You can follow the steps given in the starting of this article on how to use this product to see it working.