BUILDING MULTILINGUAL WEBSITES WITH DRUPAL 7

About us!

Getting to know you...

What are your multilingual needs?

What you need

Check• A fresh Drupal 7 instance installed locally• Download of module files

Previous experience• Familiar with Drupal site building?• Experience setting up content types and

Views• Optional: Experience creating a simple

glue module or custom theme?

What’s in the box?

What you have• Your local development environment• Your manual• Browser opened to drupal.org *

* You’re always logged in, right?

Resources: Code & files• Go to https://github.com/acquia/training/• Click “themes” download all files

What we’ll do today

Demos and presentations

Exercises in manual

Review and practice

What are we building?

ScheduleWhat we’ll do today

Schedule• Setting up a multilingual site, installing a

language• Making the user interface multilingual• Configuring multilingual content• Building blocks for many languages• Translation workflows for content + UI• Extending Drupal multilingual

MULTILINGUAL USER INTERFACES

Session 1

Multilingual Requirements

• aka i18n• Developing a website that enables

localization. • Separating elements that should be

localized so they can be specified for each locale.

Internationalization

• aka l10n• Process of adapting a website for a

certain locale including:• Text and graphics• Numeric, date and time formats• Currency• Time zones• Legal requirements

Localization

Translation• The act of translating the text of a website

into another language• Part of the localization process

• A website that displays information in multiple languages

• Involves internationalization of functionality and localization of content and settings

Multilingual Website

What kind of site are you building?

• How many languages do you need to support?

• Does the user interface need to be fully translated?

• Are there elements other than text that have to be ‘localized’?

• Do you have content in all languages? Is all the content translated?

Lots of reasons for multilingual websites

• Reach a wider audience• Search engine

optimization• Government regulations• Company policy

Personnel

• User-Interface Translators

• Content Translators

• QA for each Language

• Translation Manager

Resources

• Contributed Translations (localize.drupal.og)

• Machine Translation

Multilingual Resources

What is Multilingual Drupal?

Foreign-language site

Multilingual Site

Multilingual Site with Translation

Multilingual Modules• Core modules:

• Locale• Content Translation

• Contributed Modules:• i18n (Internationalization)• Entity Translation

• Others provide additional functionality

Installing a New Language

• Drupal out-of-the-box is in English• Text in modules and themes• Text stored in the database

• To change the language of Drupal you need to install another language

The Language of Drupal

Building a website in another language

Configuration > Regional & language > Languages

Installing Languages

Configuration > Regional & language > Languages

Installing Languages

Configuring a Language

Language Detection

English UI French UI

When you arrive on the site, which language to show?

Drupal Core is Language Aware

The t function is defined in bootstrap.inc. From the beginning of each page load, Drupal knows what language to render your site in.

Language Detection & Selection

Using the URL as the primary method of language detection

Path Prefix vs. DomainPath prefix: example.com/fr/user

Domain: exemple.com/user

Domain: fr.example.com/user

Path Prefix vs. DomainConfiguration > Regional & language > Languages > French

Configure the path prefix or domain for each language

Language Detection & Selection

The default language is used if there’s no language in the URL

Language Detection & Selection

You can also enable other methods of detection

example.com/user

Detection and Selection

Detection and Selectionexample.com/fr/user

Configuration > Regional & language > Languages

Choosing a Default

Switching Languages

Your turn• Install the French language on your site• Configure the Detection and Selection

settings• Add a language switcher to the site.

Types of Text in Drupal

Built-in interface (User-Defined)

Types of TextBuilt-in interface (Code)

Content

Variables

i18n Strings

Built-in interface (User-Defined)Built-in interface (Code)

ContentVariables

i18n Strings

i18n Strings

Translation Interfacesin Drupal

Translating Built-in Interface Text (from Code)

Built-in Interface (Code)

Using Translations from Localize.Drupal.org

Use Localize.Drupal.org• Each language has a project• Translators contribute translations in their

language• Some projects have better coverage than

others.

Localize.Drupal.org Project Page

What is a .po file?• Text file storing the

original text and the translations.

• A .pot file is a template file, containing only the original text to be translated.

Upload .po files to Drupal

Overriding Translations in Drupal

Overriding a Translation

Searching for the String

Editing the Translation

Testing the Change

Your turn• Download translations from

localize.drupal.org and upload them to your site

• Override a translation in Drupal

Use Localization Update

Localization Update

drupal.org/project/l10n_update

Localization Update

Translation Overview

Your turn• Use the Localization Update module to

pull in more translations from Drupal.org

Use Localization Update

Localization Update

drupal.org/project/l10n_update

Localization Update

Translation Overview

Your turn• Use the Localization Update module to

pull in more translations from Drupal.org

Use Localization Client

Use Localization Client

drupal.org/project/l10n_client

Sharing Your Translations

Add your API key from localize.drupal.org to contributeyour translations back to the community.

Demo!

Translating Built-in Interface Text (User-Defined)

User-Defined Text

Text entered via the Views UI

User-Defined TextText entered via the Flag UI

‘Recent Articles’

‘Articles récents’

Original Text French Translation

Added to the Views UI

Added via the Translate Interface UI

Drupal Database

User-Defined Text

Translate Interface

Add the Translation

Refresh the Translations

Source LanguageConfiguration > Regional and language > Multilingual settings > Strings

Configuration in the Default Language

Translating Variables

Translating Variables

Configuration > Regional & language > Multilingual Settings > Variables

Selecting Variables

Translating Variables

Your turn• Add a site title and slogan and translate

them.

MULTILINGUAL CONTENT

Session 2

What content experience are you building?

Fully Symmetric Experience

English Polish

Asymmetric ExperienceEnglishFrench

Mixed Language Experience

French

English

What about untranslated content?

Show Untranslated Content

EnglishFrench

Hide Untranslated Content

Content Translation Methods

Content Translation Methods

Node-Level Translation Field-Level Translation

Node 1(English)

Node 2(French)

Node 3(German)

Node 1

Title (English)

Title (French)

Title (German)

Image

Title (French)

Title (English)

Title (German)

Image Image Image

Node-Level Translation

• Content Translation module (Drupal core)• New node for each translation• Nodes are mapped together in a translation

set

Node-Level Translation

Translating Nodes

Node 1(English)

Node 2(French)

tnid = 1 tnid = 1

Node 3(German)

tnid = 1

Translation Set

Enabling Node-LevelTranslation

Translating a Node

Node PropertiesIndependent node properties per language

Use Cases• Asymmetric menus per language• Language-specific features (flagging,

sign-up, moderation)• Curation of content per language

• Everything is language-specific by default• Need to ‘synchronize’ data between

nodes• Too many nodes• Doesn’t work for modelling language-

neutral things (groups of people, products, data)

• Only works for nodes

Limitations of Node-Level Translation

Your turn• Configure basic pages on your site to use

node-level translation

Field-Level Translation

• Translation of fields instead of nodes • Entity Translation module (contrib)

provides the UI• Fields are translatable in core

Field-Level Translation

Translating Fields

A single node, with translations of certain fields.

Title (English)

Node 1

Title (French)

Title (German)

Body (English)

Body (French)

Body (German)

Image Author

Post Date Facebook Likes

Language Specific (Fields) Language Neutral

Setting up Field Translation

Setting up Field Translation

Translating the Title

Adding a Translation

Adding a Translation

Comment Filtering

• When does it make sense to show all comments regardless of language?

• Would you ever consider translating comments?

• Do comments have language neutral fields that are valuable to users who don’t speak the language?

Comment Filtering

Comment Filtering

Language Neutral Features

• Flags

• Voting Data

• Signups

• Nodequeue or Draggable Views Data

• Moderation / Scheduler settings

• Entity references

• Panels nodes’ layout

• Content Access

• Social Media Integration (Add This)

• Views Bulk Operations

Your turn• Set up field-level translation for articles• Translate some article fields and filter your

comments by language

Choosing a Translation Method

Event

Language-specific

• Title• Description • What to bring • URL

Language-neutral

• Image• Sign-up List• Sign-up Deadline• Published Status• Date/Time• Location• Organizer

Event

Issue

Language-specific

• Title• Description • URL

Language-neutral

• Bookmark (flag)• Status• Priority• Assignee• Comments

Issue

List Item

Language-specific

• Text• Alt text• URL

Language-neutral

• Order (Nodequeue, Draggable Views)

• Image• Published status

List Item

Planning Content Translation

Your turn: Planning Multilingual Content

Destination Page

Destination Name

Photos

UserBlog Posts

User Bookmarks

Articles

User Blog Post

Author Related Destination

Comments

Blog Content

Content Translation Methods

Node-Level Translation Field-Level Translation

Node 1(English)

Node 2(French)

Node 3(German)

Node 1

Title (English)

Title (French)

Title (German)

Image

Title (French)

Title (English)

Title (German)

Image Image Image

Questions to Ask• Will this content be translated?• If not, will it be displayed in other

languages?• Which translation method to use?• Which fields need translation/localization?• Are entities referenced from this content

type translated?

Your turn• Plan out the addition of destination pages

and user blogs to the GlobalTravel website

• Map out what field types/translation methods you’ll use the represent this content

• Report back to the group

Translating Other Entity Types

Translate Core EntitiesTranslation of entities from core modules

Translate Users

Permissions

Configure Fields Translate Users

Translate Users: Use Cases

• Team member profiles• Multilingual community site• Users who offer a service to users in more

than one language

Translate Users: Drawbacks

• Single permission for users (can translate any user entity)

• UI is not self-explanatory

Translate TermsConfigure Fields

Permissions

Translate Terms

Translate Terms:Use Cases

• Any vocabulary that is symmetric across languages:• Categories• Destinations• Medical Topics

Translate Terms:Drawbacks

• Time-consuming to use translation UI• Single permission for translating all

vocabularies• Alphabetical listings in Views will use

source language

Translate CommentsConfigure Fields

Permissions

Translate Comments

Translate Comments:Use Cases

• Travel website (machine translation of reviews)

• Government website (human translation of questions + answers)

Translate Other Entities

Entities need to have fields and include translation support in hook_entity_info()

Translation of entities from contributed modules

Product

Language-specific

• Title• Description • URL

Language-neutral

• SKU• Status • Image• Price• Quantity Remaining• Shopping Cart Status

Product

Translatable Commerce Product

Product

Product

Your turn

Translate categories using entity translation

Multilingual Views

French

English

Mixed-Language ViewsDo you want the viewto show untranslatedcontent?

Filtering by Language

Entity Translation Content Translation

Field Options in Views

Your turn• Create a view to display page nodes in

the current language only• Create a view to display articles

Translating the Homepage

Multilingual HomepageOptions:• Filter content to display in the current

language only• Make the default frontpage a multilingual

variable + create a page for each language• Set up a multilingual view at a single path

to use as the homepage

Multilingual Selection

Translate the Frontpage

Your turn• Configure multilingual selection options• Set up a the default frontpage as a

multilingual variable

MULTILINGUAL STRUCTURE

Session 3

Overview• What else in Drupal needs translation?

• Field settings• Blocks• Paths• Date Formats• Emails to Users• Menus

Text Groups

Menu

Blocks

Fields

Taxonomy

Translating Field Settings

Field Settings

/fr/node/add/article

Label

Description

Translating Field Settings• Field Translation module (i18n)• Translate field settings

• Label• Description• Options• Default Value

• Only core field settings

Translate Interface

Field Translate Tab

Translate Field Settings

Translating Options

Field Display Formatters

Change the formatter so the translated field value is displayed

Your turn• Translate field settings on your article

content type.

Translating Blocks

• Block Translation module (i18n)

• Make blocks translatable

• Display blocks only in certain languages

Translating Blocks

Translating Blocks

Translating Blocks

Translating Blocks

Translating Blocks• Create a translatable block for all

languages on your site.• Create a block targeting a specific

language.

Translating Paths

Path Translation

Pathauto PatternsCreate a pathauto pattern per language

Transliteration

Articles Récents = articles-recents

Transliteration

Articles récents = articles-recents

Your turn• Set up pathauto for multilingual content• Use transliteration for pathauto• Use the Path Translation module for the

Recent Articles view

Multilingual Navigation

Translating Menus• Menu Translation module (i18n)• Menu per language OR• Menu items per language

Translating Menus

Menu Link to a Node

Translating Menus

Menu Link to a Single-Language Pagei.e. Events View

Translating Menu Items

Menu Link to a Generic Pagei.e. Home Page

Translating Menu Items

Translating Menu Items

TRANSLATING CUSTOM AND CONTRIB MODULES

Session 4

Modules to Extend Drupal’s Multilingual Functionality

Adding Functionality

+Site MapContact Form Meta Tags

• Translation of form labels

• Recipients per language?

• What other language is involved?

Contact Form

Meta Tags

• How are meta tags attached to each node?

• Will translators have permission to add them?

Is this module multilingual-compatible?

Your turn• Take a sample module you’re considering

using for your current project.• How would you determine whether it’s

multilingual-compatible?

Your turn• What type of text does the module introduce?

• Does the module introduce data that will need to be translated that isn’t an entity?

• Does the module add variables to the system table?

• Does the module provide any new content types?

• How many of the built-in module strings are translated for French?

• Can you find any unresolved multilingual-related issues in the module’s issue queue?

Creating a glue module for a multilingual website

Using the t function

print t(‘Welcome to GlobalTravel’);

!variable

<?php $message = t("If you don't want to receive such e-mails, you can change your settings at !url.", array('!url' => l(t('My account'), "user/$account->uid"))); ?>

The $account variable includes HTML

@variable

<?php $title = t("@name's blog", array('@name' => $account->name)); ?>

The @name variable is run through check_plain

%variable

<?php $message = t('%name-from sent %name-to an e-mail.', array('%name-from' => $user->name, '%name-to' =>$account->name)); ?>

The %name-from and %name-to are emphasized text (wrapped in <em>)

Using Drupal.t in jQuery

var txt = Drupal.t("You are viewing the site in !language.", params);

Multilingual Theming

• Translate text that isn’t visible• Keep text out of images• Use selectors for languages (only when

absolutely necessary)• Keep text overrides in theme preprocess

functions/text files • Use the t function in the theme

Theming Tips

English French

Space Requirements

Right to Left LanguagesEnglish

Hebrew

Localizing Date Formats

What are date formats? • Friday, July 23rd, 2012 6:30pm• vendredi le 23 juillet, 2012 18:30• 07/23/2012 6:30pm• 2012-07-23 18:30

Date Format Documentation

http://php.net/manual/en/function.date.php

Define new formats

Localizing Date Formats

Date formats in Views

Your turn• Create a localized date format for French• Add dates to the Recent Articles View

User Language Preferences

User Language Preference

Set on Account Creation

Used in Language Detection

Language Preference for User Emails

TRANSLATION WORKFLOWS

Session 5

Translation Workflows

Cost of Translation• Time-consuming • Expensive• How can you speed up the process and

reduce the amount of text to be translated?

What are Translation Workflows?

Translator

Benefits of an External Translation Tool

• Translation teams are used to an external tool

• Tracks cost of translation• Provides integration with machine/

community sourced translations• Advanced tools (translation memory)• Integration with multiple translation teams

Benefits of an Internal Translation Tool

• Easy to set up• Add translations as you go• Less costly• Takes advantage of Drupal’s content

management tools• Easier to provide context

Discussion• Which approach would work better at

your organization?

Translation Workflows for UI Strings

Translation Workflow for UI Strings

1. Pull in contributed translationsfrom localize.drupal.org

2. Override translations +add translations of custom strings

Translator

Overriding/Adding Translations Outside of Drupal

Use POEdit to Translate

Translations Spreadsheet

Translating Outside Drupal

Translator

CSV Template

CSV with Translations

.po file for each language

Re-using Your Translations

Translating User-Defined Strings

User-Defined Strings• Strings added in the admin UI (not in

code)• For example: Views text

Other User-Defined Strings

• Block text• Menu items• Field settings

Translate Interface

Translate Tab

Translate Tab

User-Defined Strings

Challenges• Giving translators access to block/field/

menu configuration• Allowing translators to use all input formats• Changing the original values• Changing the default language

Translation Workflows for Content

Content Translation Workflow

Author Translator

1. Author creates a new node 2. Translators adds a translation

Translation Workflows for Content: Translating in Drupal

Translation Interface in Drupal

Node-Level vs. Field-Level Translation

Field-Level Translation Node-Level Translation

Creating a Translation Workflow from Scratch

• Permissions for translators• Rules and Flag to trigger translation

requests• Views for Translators

Permissions for Translation

• Content Translation: Translators need to be able to create content

• Entity Translation: Permission to edit the entity

• No granular translation permissions per content type (use i18n_access)

Challenges• Different UI for Entity Translation/Content

Translation (Confusing)• Professional translators need to learn

Drupal• Need to build system for reviewing

translations

Typical UI for Translators

Your turn• Set up permissions for translators• Create a view for translators

Translation Workflows for Content: TMGMT Module

Translation Management Tool (TMGMT)

drupal.org/project/tmgmt

Translation Management Tool (TMGMT)

Drupal

Translators

• Microsoft (Bing) Translator (machine)

• Google Translate (machine)

• Nativy (human)

• MyGengo (human)

• Supertext (human)

• One Hour Translation (human)

Microsoft Translator

Microsoft Translator

Requesting Translations

Choosing a Translator

Review Translation

Review Translation

Accepted Translation Appears

Translate in Bulk

Translation ‘Jobs’

Benefits of TMGMT• Field-level and node-level translation• Also translate i18n strings (in

development)• Easy to configure• Human/machine translator plugins• Write your own translator plugin

Translation Workflows for Content: Lingotek Module

Lingotek Module

drupal.org/project/lingotek

Lingotek

Drupal

IndividualTranslator

Create a Lingotek Account

Connect to Machine Translation Tool

Create a Project

Create a new project for each Drupal website

Lingotek Translation Per Content Type

Disables manual translation of content

Lingotek Translation Tool• Enables translation at the field-level• Need to flag fields as being translatable

Send a Node for Translation

Translating a NodeSwitch the site to French, and you’ll see a message:

Click on the link to go to the Lingotek Translation UI

Updating the Translation

In order to accept the translation and publish it to the site, you have to click ‘Update’.

Translation Appears

Project Status

Benefits of Lingotek• Translation memory• Sophisticated translation workflow• Advanced feature set (i.e. settings for

tokens to ignore, etc.)• Community-sourced translations• Provides a UI for professional translators

Importing Content

Modules for Importing• Migrate + Migrate Extras• Entity Translation: Feeds

REVIEWSession 8

Multilingual Checklist

• Installing languages• Translating the Interface• Translating content• Setting up multilingual building blocks• Configuring a translation workflow• Auditing/configuring contrib modules

Before you start• How many languages?• Who are the translators?• How will content be translated? What

method should be used?• Choose a default language that makes

sense• Have a plan for translation workflow +

adding languages in the future• Leave extra time for testing contrib

modules

What to Avoid?• Changing the default language • Passing variables through the t function• Putting non-English text in code

Feedback please!http://acquia.com/training-feedback

Q + A