Translate your Drupal 8 site with TMGT!

Flags

One of the great improvements in Drupal 8 is in its multilingual capabilities. This brief tutorial shows you how to configure D8 to build a multilingual site that contains English and Spanish versions of content which has been automatic translated. We’ll do this by combining Drupal 8’s out of the box language capabilities, modules from the contributed Translation Management Toolkit, and Microsoft’s online translation services. The best part about it - it's all built using the front end, and is well within the capabilities of most site builders. To see the effect of this in action you can visit http://larcomb.es for a Spanish language version of this site.

Like most problems it makes sense to break this down into smaller tasks, so first we'll look at setting up Drupal's multilingual capabilities, then we'll add translation capabilities. 

Add Spanish as a language to your website.

This initial step is super easy! First login to your site as an administrator, then simply goto admin/config/regional/language and click ‘Add language’. From here select ‘Spanish’ and click ‘Add language’. Now your site is setup to use Spanish, lets enable content to be available in multiple languages. 

Configure the 'Article' content type to be translatable.

Again, this is fairly simple with Drupal 8's new multilingual functionality. We simply need to tell our site which Entity types, and Fields within, should be made available to translation. In our example we can simply set the 'Title' and 'Body' field on the 'Article' type. To do this go to /admin/config/regional/content-language - from here you can select which Entity types can take part in translations. Clicking on ‘content’ will enable language settings for content types - this then opens up a UI where you can select which content types and fields you wish to make translatable.

Content language page

Configure the site to deliver Spanish content to requests

In order to send the correct language content to our visitors, we want to ensure that requests to http://example.com/es result in Spanish content being delivered. Again this is extremely simple to setup. In fact Drupal offers a number of alternatives for serving multilingual content. Most common amonst these are:

  • URL (eg example.com, example.es, example.fr) or (example.com/en, example.com/es, example.com/fr)
  • Session (eg example.com?language=es or example.com?language=fr)
  • Browser language code (where the browser can send information in its headers to the server to request particular languages)

For our site we'll select the URL variety. Just go to admin/config/regional/language/detection, under "Part of the URL that determines language” select “Path prefix”, then enter ‘es’ under ‘Spanish (es) path prefix’, then ‘Save configuration’. Any requests now coming into example.com/es will use the Spanish translation of the content, if available.

Language detection

So now weve got a site which contains Articles which are available in English and Spanish and the correct version is delivered based on the URL being requested. The next step is to build the translated content. We’ll do this using the Translation Management Toolkit - this is a collection of modules which provides a workflow around content translation, and the facility to use third party services for automated translation.

Sign up for the Microsoft Translator Services

NB We’re concentrating on the MS translator service here, but there are many other translation services available, some machine-based, some human-based. You’re encouraged to check out the range of other services that can plugin to the tmgmt at https://www.drupal.org/project/tmgmt

Sign up for the microsoft translator - http://datamarket.azure.com/dataset/bing/microsofttranslator - there is a free trial available and the pricing tier only kicks in if youpass it more than 2 million characters per month. Once you’ve signed up you’ll need to create what Microsoft calls an ‘Application’ but for our purposes is our website. Go to https://datamarket.azure.com/developer/applications/ to create a new application. In the following step you’ll need the contents of the ‘Client ID’ and the 'Client secret’ fields.

Configure Translation Management Tool

First install the tmgmt module (https://www.drupal.org/project/tmgmt) to enable the base Translation Management Tool, followed by the tmgmt_microsoft module (https://www.drupal.org/project/tmgmt_microsoft). You’ll need to configure the Microsoft translator with your account details, so go to admin/tmgmt/translators/manage/microsoft to edit the Microsoft Translator provider. It’s quite straightforward to do this - in the Microsoft Translator Plugin Settings just enter your ‘Client ID’ and ‘Client secret’ from the previous step, and in the Remote Languages Mappings ensure ‘en’ is selected for English, and ‘es’ for Spanish. Click ‘Save’.

Translate some content!

We're now ready to translate some content! Go to /admin/tmgmt/sources - this is where you can see at a glance which content has been translated, and select content for translation. To translate content, tick the checkbox next to the title of the content to be translated and click the “Request translation” button.

Request Translation

This creates a new translation job and takes you to the Job Overview page where you can configure the job. The Microsoft translator doesn’t require any additional settings so click ‘Submit to Provider’ to send your Article to the Microsoft for translation!

Translation Job

The translation process is almost instantaneous and you’re returned to the Translation Content overview page, hopefully with messages that your Article has been submitted, accepted and translated, and a green tick should appear under the ‘Spanish’ column in the list of content, indicating that a Spanish language version of that content has been created.

Received Translation

So there you have - a multilingual site with fully automated translations using Drupal 8's out-of-the-box multilingual functionality with automated translation services.

Header image courtesy flickr user america_rugbier: https://www.flickr.com/photos/65764319@N00/14639817455