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 Exercises in Review and
presentations manual practice
What are we building?
Schedule
What 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
Session 1

MULTILINGUAL
USER INTERFACES
Multilingual
Requirements
 Internationalization
• aka i18n
• Developing a website that enables
localization.
• Separating elements that should be
localized so they can be specified for
each locale.
 Localization
• 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
 Translation
• The act of translating the text of a website
into another language
• Part of the localization process
 Multilingual Website
• A website that displays information in
multiple languages
• Involves internationalization of
functionality and localization of content
and settings
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
 Multilingual Resources
Personnel Resources
• User-Interface Translators • Contributed Translations
(localize.drupal.og)
• Content Translators
• Machine Translation
• QA for each Language

• Translation Manager
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
The Language of Drupal

• 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
Building a website in
another language
Installing Languages
Configuration > Regional & language > Languages
Installing Languages
Configuration > Regional & language > Languages
Configuring a Language
Language Detection
When you arrive on the site, which language to show?

English UI French UI
 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. Domain
Path prefix: example.com/fr/user
Domain: exemple.com/user
Domain: fr.example.com/user
Path Prefix vs. Domain
Configuration > 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
Detection and Selection
example.com/user
Detection and Selection
example.com/fr/user
Choosing a Default
Configuration > Regional & language > Languages
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
 Types of Text
Content
Built-in interface (Code)

i18n Strings

Variables
Built-in interface (User-Defined)
 Built-in interface (Code)
Translation Interfaces Built-in interface (User-Defined)
in Drupal i18n Strings

i18n Strings

Variables Content
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 contribute

your translations back to the community.
Demo!
Translating Built-in
Interface Text (User-
Defined)
User-Defined Text

Text entered via the Views UI

User-Defined Text
Text entered via the Flag UI
 User-Defined Text
Original Text French Translation

Drupal Database

‘Recent ‘Articles
Articles’ récents’

Added to the Added via the

Views UI Translate Interface UI
Translate Interface
Add the Translation
Refresh the Translations
 Source Language
Configuration > Regional and language > Multilingual settings > Strings
Configuration in the
Default Language
Translating Variables
Translating Variables
 Selecting Variables
Configuration > Regional & language > Multilingual Settings > Variables
Translating Variables
 Your turn
• Add a site title and slogan and translate
them.
Session 2

MULTILINGUAL
CONTENT
What content
experience are you
building?
 Fully Symmetric
Experience
English Polish
 Asymmetric Experience
French English
Mixed Language Experience

English

French
What about
untranslated
content?
Show Untranslated
Content
 Hide Untranslated
Content
French English
Content Translation
Methods
 Content Translation
Methods
Node-Level Translation Field-Level Translation

Node 1 Node 2 Node 3 Node 1

(English) (French) (German)

Title Title Title Title Title Title

(English) (French) (German) (English) (French) (German)

Image Image Image Image

Node-Level
Translation
 Node-Level Translation
• Content Translation module (Drupal core)
• New node for each translation
• Nodes are mapped together in a translation
set
 Translating Nodes
Translation Set

Node 1 Node 2 Node 3

(English) (French) (German)
tnid = 1 tnid = 1 tnid = 1
Enabling Node-Level
Translation
Translating a Node
 Node Properties
Independent node properties per language
 Use Cases
• Asymmetric menus per language
• Language-specific features (flagging,
sign-up, moderation)
• Curation of content per language
Limitations of Node-Level
Translation
• 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
 Your turn
• Configure basic pages on your site to use
node-level translation
Field-Level
Translation
 Field-Level Translation

• Translation of fields instead of nodes

• Entity Translation module (contrib)
provides the UI
• Fields are translatable in core
 Translating Fields
Node 1
Language Specific (Fields) Language Neutral

Title Title Title

Image Author
(English) (French) (German)

Body Body Body Facebook

Post Date
(English) (French) (German) Likes

A single node, with translations of

certain fields.
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 • Entity references

• Voting Data • Panels nodes’ layout

• Signups • Content Access

• Nodequeue or • Social Media

Draggable Views Integration (Add
Data This)
• Moderation / • Views Bulk
Scheduler settings 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
 Event
Language-specific Language-neutral

• Title • Image
• Description • Sign-up List
• What to bring • Sign-up Deadline
• URL • Published Status
• Date/Time
• Location
• Organizer
Issue
 Issue
Language-specific Language-neutral

• Title • Bookmark (flag)

• Description • Status
• URL • Priority
• Assignee
• Comments
List Item
 List Item
Language-specific Language-neutral

• Text • Order (Nodequeue,

• Alt text Draggable Views)
• URL • Image
• Published status
Planning Content
Translation
 Your turn: Planning
Multilingual Content
Destination Page User Blog Post

Destination Name User Bookmarks Author Related Destination

Photos Blog Content

User Comments
Articles
Blog Posts
 Content Translation
Methods
Node-Level Translation Field-Level Translation

Node 1 Node 2 Node 3 Node 1

(English) (French) (German)

Title Title Title Title Title Title

(English) (French) (German) (English) (French) (German)

Image 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 Entities
Translation of entities from core modules
 Translate Users
Configure Fields Translate Users

Permissions
 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 Terms
Configure Fields Translate Terms

Permissions
 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 Comments
Configure Fields Translate Comments

Permissions
 Translate Comments:
Use Cases
• Travel website (machine translation of
reviews)
• Government website (human translation
of questions + answers)
 Translate Other Entities
Translation of entities from contributed modules

Entities need to
have fields and
include
translation
support in
hook_entity_info()
Product
 Product
Language-specific Language-neutral

• Title • SKU
• Description • Status
• URL • Image
• Price
• Quantity Remaining
• Shopping Cart Status
Translatable Commerce
Product
Product
Product
 Your turn

Translate categories
using entity translation
Multilingual Views
 Mixed-Language Views
Do you want the view
to show untranslated
English
content?

French
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 Homepage
Options:
• 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
Session 3

MULTILINGUAL
STRUCTURE
 Overview
• What else in Drupal needs translation?
• Field settings
• Blocks
• Paths
• Date Formats
• Emails to Users
• Menus
 Text Groups
Fields
Menu

Blocks

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
 Translating Blocks
• Block Translation module (i18n)
• Make blocks translatable
• Display blocks only in certain languages
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 Patterns
Create 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
Translating Menus
Menu Link to a Node
Translating Menu Items

Menu Link to a Single-Language Page

i.e. Events View
Translating Menu Items

Menu Link to a Generic Page

i.e. Home Page
Translating Menu Items
Session 4

TRANSLATING
CUSTOM AND
CONTRIB MODULES
Modules to Extend
Drupal’s Multilingual
Functionality
 Adding Functionality

+
Contact Form Meta Tags Site Map
Contact Form

• Translation of form
labels
• Recipients per
language?
• What other language
is involved?
 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
 Theming Tips
• 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
Space Requirements
English French
 Right to Left Languages
English

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
Session 5

TRANSLATION
WORKFLOWS
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 translations 2. Override translations +
from localize.drupal.org add translations of custom strings

Translator
Overriding/Adding
Translations Outside
of Drupal
Use POEdit to Translate
Translations Spreadsheet
Translating Outside Drupal
CSV with Translations

Translator

CSV Template
.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
1. Author creates a new node 2. Translators adds a translation

Author Translator
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

Individual
Translator
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 Node
Switch 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
Session 8

REVIEW
 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
http://acquia.com/training-feedback

Feedback please!
Q+A