multilingual training

8/9/2019 Multilingual Training

1/291

BUILDING

MULTILINGUAL

WEBSITES WITHDRUPAL 7


2/291

About us!


3/291

Getting to know you...


4/291

What are yourmultilingual needs?


5/291

What you need


6/291

Check A fresh Drupal 7 instance installed locally Download of module les


7/291

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

Views Optional: Experience creating a simple

glue module or custom theme?


8/291

Whats in the box?


9/291

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

* Youre always logged in, right?


10/291

Resources: Code & files

Go to https://github.com/acquia/training/ Click themes download all les
https://github.com/acquia/training/https://github.com/acquia/training/


11/291

What well do today

Demos andpresentations

Exercises inmanual

Review andpractice


12/291

What are we building?


13/291

ScheduleWhat well do today


14/291

Schedule Setting up a multilingual site, installing a

language Making the user interface multilingual Conguring multilingual content Building blocks for many languages Translation workows for content + UI Extending Drupal multilingual


15/291

MULTILINGUALUSER INTERFACES

Session 1


16/291

MultilingualRequirements


17/291

aka i18n Developing a website that enables

localization.

Separating elements that should belocalized so they can be specied foreach locale.

Internationalization


18/291

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


19/291

Translation

The act of translating the text of a websiteinto another language Part of the localization process


20/291

A website that displays information inmultiple languages Involves internationalization of

functionality and localization of contentand settings

Multilingual Website


21/291

What kind of site are youbuilding?

How many languages do you need tosupport?

Does the user interface need to be fullytranslated?

Are there elements other than text that

have to be localized? Do you have content in all languages? Is

all the content translated?


22/291

Lots of reasons for

multilingual websites Reach a wider audience Search engine

optimization Government regulations Company policy


23/291

Personnel

User-Interface Translators

Content Translators

QA for each Language

Translation Manager

Resources

Contributed Translations

(localize.drupal.og) Machine Translation

Multilingual Resources


24/291

What is MultilingualDrupal?


25/291

Foreign-language site


26/291

Multilingual Site


27/291

Multilingual Site withTranslation


28/291

Multilingual Modules Core modules:

Locale Content Translation

Contributed Modules: i18n (Internationalization)

Entity Translation Others provide additional functionality


29/291

Installing a NewLanguage


30/291

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

To change the language of Drupal youneed to install another language

The Language of Drupal


31/291

Building a website inanother language


32/291

Configuration > Regional & language > Languages

Installing Languages


33/291


Installing Languages


34/291

Configuring a Language


35/291

Language Detection

English UI French UI

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


36/291


37/291

Language Detection & Selection

Using the URL as the primary method of language detection


38/291

Path Prefix vs. Domain

Path prefix : example.com/fr/user Domain : exemple.com/user

Domain : fr.example.com/user


39/291

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

Configure the path prefix or domain for each language


40/291


The default language is used if theres no language in the URL


41/291


You can also enable other methods of detection


42/291

example.com/user

Detection and Selection


43/291

Detection and Selectionexample.com/fr/user


44/291


Choosing a Default


45/291

Switching Languages


46/291

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

settings Add a language switcher to the site.


47/291

Types of Text inDrupal

f


48/291

Built-in interface (User-Defined)

Types of Text Built-in interface (Code)

Content

Variables

i18n Strings


49/291

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

ContentVariables

i18n Strings

i18n Strings

Translation Interfacesin Drupal


50/291

Translating Built-inInterface Text (fromCode)


51/291

Built-in Interface (Code)


52/291

Using Translationsfrom

Localize.Drupal.org


53/291

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

language Some projects have better coverage than

others.


54/291

Localize.Drupal.org Project Page

h f l


55/291

What is a .po file? Text le storing the

original text and thetranslations.

A .pot le is atemplate le,containing only theoriginal text to be

translated.

l d f l l


56/291

Upload .po files to Drupal


57/291

OverridingTranslations in

Drupal

O idi T l i


58/291

Overriding a Translation

S hi f h S i


59/291

Searching for the String

Edi i h T l i


60/291

Editing the Translation

T i h Ch


61/291

Testing the Change

Y


62/291

Your turn

Download translations fromlocalize.drupal.org and upload them toyour site

Override a translation in Drupal


63/291

Use LocalizationUpdate

L li ti U d t


64/291

Localization Update

drupal.org/project/l10n_update

L li ti U d t


65/291

Localization Update

T l ti O i


66/291

Translation Overview

Y t


67/291

Your turn

Use the Localization Update module topull in more translations from Drupal.org


68/291

Use LocalizationUpdate

L li ti U d t


69/291

Localization Update

drupal.org/project/l10n_update

Locali ation Update


70/291

Localization Update



71/291


Your turn


72/291

Your turn

Use the Localization Update module topull in more translations from Drupal.org


73/291

Use LocalizationClient

Use Localization Client


74/291

Use Localization Client

drupal.org/project/l10n_client

Sharing Your


75/291

Sharing YourTranslations

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


76/291

Demo!


77/291

Translating Built-inInterface Text (User-

Dened)

User Defined Text


78/291

User-Defined Text

Text entered via the Views UI

User Defined Text


79/291

User-Defined Text Text entered via the Flag UI

User Defined Text


80/291

Recent Articles Articlesrcents

Original Text French Translation

Added to theViews UI

Added via theTranslate Interface UI

Drupal Database

User-Defined Text

Translate Interface


81/291

Translate Interface

Add the Translation


82/291

Add the Translation

Refresh the Translations


83/291

Refresh the Translations

Source Language


84/291

Source LanguageConfiguration > Regional and language > Multilingual settings > Strings

Configuration in the


85/291

Configuration in the Default Language


86/291

Translating Variables



87/291


Selecting Variables


88/291

Configuration > Regional & language > Multilingual Settings > Variables

Selecting Variables



89/291


Your turn


90/291

Your turn

Add a site title and slogan and translatethem.


91/291

MULTILINGUALCONTENT

Session 2


92/291

What contentexperience are you

building?

Fully Symmetric


93/291

Fully Symmetric Experience

English Polish

Asymmetric Experience


94/291

Asymmetric ExperienceEnglishFrench

Mixed Language Experience


95/291

Mixed Language Experience

French

English


96/291

What aboutuntranslated

content?

Show Untranslated


97/291

Content

Hide Untranslated


98/291

EnglishFrench

Content


99/291

Content TranslationMethods

Content Translation


100/291

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


101/291

Node-LevelTranslation

Node-Level Translation


102/291

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

set

ode eve a s at o

Translating Nodes


103/291

g

Node 1(English) Node 2(French)tnid = 1 tnid = 1

Node 3(German)tnid = 1

Translation Set

Enabling Node-Level


104/291

gTranslation

Translating a Node


105/291

g

Node Properties


106/291

pIndependent node properties per language


107/291

Limitations of Node-Level


108/291

Everything is language-specic by default Need to synchronize data between

nodes Too many nodes Doesnt work for modelling language-

neutral things (groups of people,products, data)

Only works for nodes

Translation

Your turn


109/291

Congure basic pages on your site to usenode-level translation


110/291

Field-LevelTranslation

Field-Level Translation


111/291

Translation of elds instead of nodes Entity Translation module (contrib)

provides the UI Fields are translatable in core

Translating Fields


112/291

g

A single node, with translations ofcertain 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


113/291

Translation

Setting up Field


114/291

Translation

Translating the Title


115/291

g

Adding a Translation


116/291

Adding a Translation


117/291

Comment Filtering


118/291

When does it make sense to show allcomments regardless of language?

Would you ever consider translatingcomments?

Do comments have language neutralelds that are valuable to users who dontspeak the language?

Comment Filtering


119/291

Comment Filtering


120/291

Language Neutral


121/291

Features Flags

Voting Data

Signups Nodequeue or

Draggable ViewsData

Moderation /Scheduler settings

Entity references

Panels nodes layout

Content Access Social Media

Integration (AddThis)

Views BulkOperations

Your turn


122/291

Set up eld-level translation for articles Translate some article elds and lter your

comments by language


123/291

Choosing aTranslation Method

Event


124/291

Event


125/291

Language-specific

Title Description What to bring URL

Language-neutral

Image Sign-up List Sign-up Deadline Published Status Date/Time

Location Organizer

Issue


126/291

Issue


127/291

Language-specific Title Description URL

Language-neutral Bookmark (flag) Status

Priority Assignee Comments

List Item


128/291


129/291


130/291

Planning ContentTranslation

Your turn: Planningl l l


131/291

Multilingual Content

Destination Page

Destination Name

Photos

User Blog Posts

User Bookmarks

Articles

User Blog Post

Author Related Destination

Comments

Blog Content

Content Translation


132/291

MethodsNode-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


133/291

Will this content be translated? If not, will it be displayed in other

languages?

Which translation method to use? Which elds need translation/localization? Are entities referenced from this content

type translated?

Your turn


134/291

Plan out the addition of destination pagesand user blogs to the GlobalTravelwebsite

Map out what eld types/translationmethods youll use the represent thiscontent

Report back to the group


135/291

Translating OtherEntity Types

Translate Core Entities


136/291

Translation of entities from core modules

Translate Users


137/291

Permissions

Configure Fields Translate Users

Translate Users:U C


138/291

Use Cases Team member proles Multilingual community site Users who offer a service to users in more

than one language

Translate Users:D b k


139/291

Drawbacks Single permission for users (can translate

any user entity)

UI is not self-explanatory

Translate Terms


140/291

Configure Fields

Permissions

Translate Terms

Translate Terms:U C


141/291

Use Cases Any vocabulary that is symmetric across

languages: Categories Destinations Medical Topics

Translate Terms:D b k


142/291

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

vocabularies Alphabetical listings in Views will use

source language

Translate Comments


143/291

Configure Fields

Permissions

Translate Comments

Translate Comments:U C


144/291

Use Cases Travel website (machine translation of

reviews)

Government website (human translationof questions + answers)

Translate Other Entities


145/291

Entities need tohave elds andincludetranslationsupport inhook_entity_info()

Translation of entities from contributed modules

Product


146/291

Product


147/291

Language-specific

Title Description URL

Language-neutral

SKU Status Image Price Quantity Remaining

Shopping Cart Status

Translatable CommerceProduct


148/291

Product

Product


149/291

Product


150/291

Your turn


151/291

Translate categoriesusing entity translation


152/291

Multilingual Views

Mixed-Language Views


153/291

French

English

Do you want the viewto show untranslatedcontent?

Filtering by Language


154/291

Entity Translation Content Translation

Field Options in Views


155/291


156/291


157/291

Translating theHomepage

Multilingual Homepage


158/291

Options: Filter content to display in the current

language only

Make the default frontpage a multilingualvariable + create a page for each language Set up a multilingual view at a single path

to use as the homepage

Multilingual Selection


159/291

Translate the Frontpage


160/291

Your turn


161/291

Congure multilingual selection options Set up a the default frontpage as a

multilingual variable


162/291

MULTILINGUALSTRUCTURE

Session 3

Overview


163/291

What else in Drupal needs translation? Field settings Blocks

Paths Date Formats Emails to Users Menus


164/291


165/291

Translating FieldSettings

Field Settings


166/291

/fr/node/add/article

Label

Description

Translating Field Settings


167/291

Field Translation module (i18n) Translate eld settings

Label

Description Options Default Value

Only core eld settings

Translate Interface


168/291

Field Translate Tab


169/291

Translate Field Settings


170/291

Translating Options


171/291

Field Display Formatters


172/291

Change the formatter so the translated field value is displayed

Your turn


173/291

Translate eld settings on your articlecontent type.


174/291

Translating Blocks

Translating Blocks


175/291

Block Translation module (i18n) Make blocks translatable

Display blocks only in certain languages

Translating Blocks


176/291

Translating Blocks


177/291

Translating Blocks


178/291

Translating Blocks


179/291

Create a translatable block for alllanguages on your site.

Create a block targeting a speciclanguage.


180/291

Translating Paths

Path Translation


181/291

Pathauto Patterns


182/291

Create a pathauto pattern per language

Transliteration


183/291

Articles Rcents = articles-recents

Transliteration


184/291

Articles rcents = articles-recents

Your turnh f l l l


185/291

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

Recent Articles view


186/291

Translating MenusM T l i d l (i18 )


187/291

Menu Translation module (i18n) Menu per language OR Menu items per language

Translating Menus


188/291

Translating Menus


189/291

Menu Link to a Node

Translating Menu Items


190/291

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



191/291

Menu Link to a Generic Pagei.e. Home Page



192/291


193/291

TRANSLATINGCUSTOM AND

CONTRIB MODULES

Session 4


194/291

Modules to ExtendDrupals Multilingual

Functionality

Adding Functionality


195/291

+Site MapContact Form Meta Tags

Contact Form


196/291

Translation of formlabels

Recipients perlanguage?

What other languageis involved?

Meta Tags


197/291

How are meta tags attached to each node? Will translators have permission to add

them?


198/291

Is this modulemultilingual-

compatible?

Your turn Take a sample module youre considering


199/291

Take a sample module you re consideringusing for your current project.

How would you determine whether itsmultilingual-compatible?

Your turn What type of text does the module introduce?


200/291

What type of text does the module introduce?

Does the module introduce data that will need tobe translated that isnt 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 aretranslated for French?

Can you nd any unresolved multilingual-relatedissues in the modules issue queue?


201/291

Creating a gluemodule for a

multilingual website

Using the t function


202/291

print t(Welcome to GlobalTravel);

!variable


203/291


204/291


205/291

The %name-from and %name-to are emphasized text

(wrapped in )

Using Drupal.t in jQuery
http://php.net/arrayhttp://php.net/array


206/291

var txt = Drupal.t("You are viewing the site

in !language.", params);


207/291

Multilingual Theming

Translate text that isnt visible

Theming Tips


208/291

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 les

Use the t function in the theme

English French

Space Requirements


209/291

Right to Left LanguagesEnglish


210/291

Hebrew


211/291

Localizing DateFormats

What are date formats? Friday, July 23rd, 2012 6:30pm


212/291

y, y , p vendredi le 23 juillet, 2012 18:30 07/23/2012 6:30pm

2012-07-23 18:30


213/291

Define new formats


214/291

Localizing Date Formats


215/291

Date formats in Views


216/291

Your turn Create a localized date format for French


217/291

Add dates to the Recent Articles View


218/291

User LanguagePreferences

User Language Preference


219/291

Set on Account Creation


220/291

Used in Language Detection


221/291

Language Preference forUser Emails


222/291


223/291


224/291

TranslationWorkows

Cost of Translation Time-consuming


225/291

Expensive How can you speed up the process and

reduce the amount of text to betranslated?

What are TranslationWorkflows?


226/291

Translator


227/291


228/291

Discussion Which approach would work better at


229/291

your organization?


230/291

Translation Workflow forUI Strings


231/291

1. Pull in contributed translationsfrom localize.drupal.org

2. Override translations +add translations of custom strings

Translator


232/291

Overriding/AddingTranslations Outside

of Drupal


233/291

Translations Spreadsheet


234/291

Translating Outside Drupal CSV with Translations


235/291

Translator

CSV Template.po file for each language

Re-using YourTranslations


236/291


237/291

Translating User-Dened Strings


238/291

Other User-Defined Strings


239/291

Block text Menu items Field settings

Translate Interface


240/291

Translate Tab


241/291


242/291

User-Defined Strings


243/291

Challenges Giving translators access to block/eld/


244/291

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


245/291

TranslationWorkows for

Content

Content TranslationWorkflow


246/291

Author Translator

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


247/291


Content:Translating in Drupal

Translation Interface in Drupal


248/291

Node-Level vs. Field-LevelTranslation


249/291

Field-Level Translation Node-Level Translation

Creating a TranslationWorkflow from Scratch


250/291

Permissions for translators Rules and Flag to trigger translation

requests Views for Translators

Permissions forTranslation


251/291

Content Translation: Translators need tobe 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

l ( f )


252/291

Translation (Confusing) Professional translators need to learn

Drupal Need to build system for reviewing

translations

Typical UI for Translators


253/291

Your turn Set up permissions for translators

C i f l


254/291

Create a view for translators


255/291


Content:TMGMT Module

Translation ManagementTool (TMGMT)


256/291

drupal.org/project/tmgmt

Translation ManagementTool (TMGMT)


257/291

Drupal

Tr anslator s
http://drupal.org/project/tmgmt_oht


258/291

Microsoft (Bing) Translator (machine)

Google Translate (ma chine)

Nativy (human)

MyGengo (human)

Supertext (human)

One Hour Translation (human)

Microsoft Translator
http://drupal.org/project/tmgmt_ohthttp://drupal.org/project/tmgmt_googlehttp://drupal.org/project/tmgmt_ohthttp://drupal.org/project/tmgmt_ohthttp://drupal.org/project/tmgmt_supertexthttp://drupal.org/project/tmgmt_supertexthttp://drupal.org/project/tmgmt_mygengohttp://drupal.org/project/tmgmt_mygengohttp://drupal.org/project/tmgmt_nativyhttp://drupal.org/project/tmgmt_nativyhttp://drupal.org/project/tmgmt_googlehttp://drupal.org/project/tmgmt_googlehttp://drupal.org/project/tmgmt_microsofthttp://drupal.org/project/tmgmt_microsoft


259/291

Microsoft Translator


260/291


261/291


262/291


263/291

Review Translation


264/291


265/291

Translate in Bulk


266/291

Translation Jobs


267/291

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


268/291

Also translate i18n strings (indevelopment)

Easy to congure Human/machine translator plugins Write your own translator plugin


269/291

TranslationWorkows forContent:Lingotek Module

Lingotek Module


270/291

drupal.org/project/lingotek

Lingotek


271/291

Drupal

IndividualTranslator

Create a Lingotek Account


272/291

Connect to MachineTranslation Tool


273/291


274/291


275/291


276/291

Lingotek Translation Tool Enables translation at the eld-level Need to ag elds as being translatable


277/291

Need to ag elds as being translatable


278/291

Translating a NodeSwitch the site to French, and youll see a message:


279/291

Click on the link to go to the Lingotek Translation UI

Updating the TranslationIn order to accept the translation and publish

it to the site you have to click Update


280/291

it to the site, you have to click Update .


281/291

Project Status


282/291


283/291


284/291

Importing Content

Modules for Importing Migrate + Migrate Extras Entity Translation: Feeds


285/291

Entity Translation: Feeds

Session 8


286/291

REVIEW

Session 8

Multilingual Checklist Installing languages Translating the Interface


287/291

g Translating content Setting up multilingual building blocks Conguring a translation workow Auditing/conguring contrib modules


288/291

What to Avoid? Changing the default language Passing variables through the t function


289/291

g g Putting non-English text in code

http://acquia com/training-feedback
http://acquia.com/training-feedback


290/291

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


291/291

Q + A

multilingual training

Documents