BUILDING MULTILINGUAL WEBSITES WITH DRUPAL 7

291 

Full text

(1)

BUILDING

MULTILINGUAL

WEBSITES WITH

(2)
(3)
(4)

What are your

(5)
(6)

Check

A fresh Drupal 7 instance installed locally

(7)

Previous experience

Familiar with Drupal site building?

Experience setting up content types and

Views

Optional: Experience creating a simple

(8)
(9)

What you have

Your local development environment

Your manual

Browser opened to drupal.org *

(10)

Resources: Code & files

• Go to https://github.com/acquia/training/

(11)

What we’ll do today

Demos and presentations Exercises in manual Review and practice

(12)
(13)

Schedule

(14)

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

(15)

MULTILINGUAL

USER INTERFACES

(16)

Multilingual

(17)

aka i18n

Developing a website that enables

localization.

Separating elements that should be

localized so they can be specified for each locale.

(18)

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

(19)

Translation

The act of translating the text of a website

into another language

(20)

• A website that displays information in multiple languages

• Involves internationalization of

functionality and localization of content and settings

(21)

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

(22)

Lots of reasons for

multilingual websites

• Reach a wider audience

• Search engine

optimization

• Government regulations

(23)

Personnel

• User-Interface Translators • Content Translators

• QA for each Language • Translation Manager Resources • Contributed Translations (localize.drupal.og) • Machine Translation

Multilingual Resources

(24)

What is Multilingual

Drupal?

(25)
(26)
(27)

Multilingual Site with

Translation

(28)

Multilingual Modules

Core modules:LocaleContent TranslationContributed Modules:i18n (Internationalization)Entity Translation

(29)

Installing a New

Language

(30)

• 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

(31)

Building a website in

another language

(32)

Configuration > Regional & language > Languages

(33)

Configuration > Regional & language > Languages

(34)
(35)

Language Detection

English UI French UI

(36)

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.

(37)

Language Detection &

Selection

(38)

Path Prefix vs. Domain

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

(39)

Path Prefix vs. Domain

Configuration > Regional & language > Languages > French

(40)

Language Detection &

Selection

(41)

Language Detection &

Selection

(42)

example.com/user

(43)

Detection and Selection

(44)

Configuration > Regional & language > Languages

(45)
(46)

Your turn

Install the French language on your site

Configure the Detection and Selection

settings

(47)

Types of Text in

Drupal

(48)

Built-in interface (User-Defined)

Types of Text

Built-in interface (Code)

Content

Variables i18n Strings

(49)

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

Content Variables i18n Strings i18n Strings Translation Interfaces in Drupal

(50)

Translating Built-in

Interface Text (from

Code)

(51)
(52)

Using Translations

from

(53)

Use Localize.Drupal.org

Each language has a project

Translators contribute translations in their

language

Some projects have better coverage than

(54)

Localize.Drupal.org

Project Page

(55)

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.

(56)
(57)

Overriding

Translations in

Drupal

(58)
(59)
(60)
(61)
(62)

Your turn

Download translations from

localize.drupal.org and upload them to your site

(63)

Use Localization

Update

(64)

Localization Update

(65)
(66)
(67)

Your turn

Use the Localization Update module to

(68)

Use Localization

Update

(69)

Localization Update

(70)
(71)
(72)

Your turn

Use the Localization Update module to

(73)

Use Localization

Client

(74)

Use Localization Client

(75)

Sharing Your

Translations

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

(76)
(77)

Translating Built-in

Interface Text

(User-Defined)

(78)

User-Defined Text

(79)

User-Defined Text

Text entered via the Flag UI

(80)

‘Recent

Articles’ ‘Articles récents’

Original Text French Translation

Added to the

Views UI Translate Interface UIAdded via the

Drupal Database

(81)
(82)
(83)
(84)

Source Language

(85)

Configuration in the

Default Language

(86)
(87)
(88)

Configuration > Regional & language > Multilingual Settings > Variables

(89)
(90)

Your turn

Add a site title and slogan and translate

(91)

MULTILINGUAL

CONTENT

(92)

What content

experience are you

building?

(93)

Fully Symmetric

Experience

(94)

Asymmetric Experience

English French

(95)

Mixed Language Experience

French English

(96)

What about

untranslated

content?

(97)

Show Untranslated

Content

(98)

English French

Hide Untranslated

Content

(99)

Content Translation

Methods

(100)

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)

(101)

Node-Level

Translation

(102)

Content Translation module (Drupal core)

New node for each translation

Nodes are mapped together in a translation

set

(103)

Translating Nodes

Node 1

(English) (French)Node 2

tnid = 1 tnid = 1

Node 3 (German)

tnid = 1 Translation Set

(104)

Enabling Node-Level

Translation

(105)
(106)

Node Properties

(107)

Use Cases

Asymmetric menus per language

Language-specific features (flagging,

sign-up, moderation)

(108)

• 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

(109)

Your turn

Configure basic pages on your site to use

(110)

Field-Level

Translation

(111)

Translation of fields instead of nodes

Entity Translation module (contrib)

provides the UI

Fields are translatable in core

(112)

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

(113)

Setting up Field

Translation

(114)

Setting up Field

Translation

(115)
(116)
(117)
(118)

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?

(119)
(120)
(121)

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

(122)

Your turn

Set up field-level translation for articles

Translate some article fields and filter your

(123)

Choosing a

(124)
(125)

Language-specificTitle • Description • What to bring • URL Language-neutralImage • Sign-up List • Sign-up Deadline • Published Status • Date/Time • Location • Organizer

Event

(126)
(127)

Language-specificTitle • Description • URL Language-neutralBookmark (flag) • Status • Priority • Assignee • Comments

Issue

(128)
(129)

Language-specificText • Alt text • URL Language-neutralOrder (Nodequeue, Draggable Views) • Image • Published status

List Item

(130)

Planning Content

Translation

(131)

Your turn: Planning

Multilingual Content

Destination Page Destination Name Photos User Blog Posts User Bookmarks Articles

User Blog Post

Author Related Destination

Comments Blog Content

(132)

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)

(133)

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

(134)

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

(135)

Translating Other

Entity Types

(136)

Translate Core Entities

(137)

Translate Users

Permissions

(138)

Translate Users:

Use Cases

Team member profiles

Multilingual community site

Users who offer a service to users in more

(139)

Translate Users:

Drawbacks

Single permission for users (can translate

any user entity)

(140)

Translate Terms

Configure Fields

Permissions

(141)

Translate Terms:

Use Cases

• Any vocabulary that is symmetric across

languages:

• Categories

• Destinations

(142)

Translate Terms:

Drawbacks

• Time-consuming to use translation UI

• Single permission for translating all

vocabularies

• Alphabetical listings in Views will use

(143)

Translate Comments

Configure Fields

Permissions

(144)

Translate Comments:

Use Cases

Travel website (machine translation of

reviews)

Government website (human translation

(145)

Translate Other Entities

Entities need to

have fields and include

translation support in

hook_entity_info()

(146)
(147)

Language-specificTitle • Description • URL Language-neutralSKU • Status • Image • Price • Quantity Remaining

• Shopping Cart Status

(148)

Translatable Commerce

Product

(149)
(150)
(151)

Your turn

Translate categories using entity translation

(152)
(153)

French English

Mixed-Language Views

Do you want the view to show untranslated content?

(154)

Filtering by Language

(155)
(156)

Your turn

Create a view to display page nodes in

the current language only

(157)

Translating the

Homepage

(158)

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

(159)
(160)
(161)

Your turn

Configure multilingual selection options

Set up a the default frontpage as a

(162)

MULTILINGUAL

STRUCTURE

(163)

Overview

What else in Drupal needs translation?

Field settingsBlocksPathsDate FormatsEmails to UsersMenus

(164)

Text Groups

Menu

Blocks

Fields

(165)

Translating Field

Settings

(166)

Field Settings

/fr/node/add/article

Label

(167)

Translating Field Settings

Field Translation module (i18n)

Translate field settings

Label

Description

Options

Default Value

(168)
(169)
(170)
(171)
(172)

Field Display Formatters

(173)

Your turn

Translate field settings on your article

(174)
(175)

Block Translation module (i18n)

• Make blocks translatable

• Display blocks only in certain languages

(176)
(177)
(178)
(179)

Translating Blocks

Create a translatable block for all

languages on your site.

Create a block targeting a specific

(180)
(181)
(182)

Pathauto Patterns

(183)

Transliteration

Articles Récents = articles-recents

(184)

Transliteration

Articles récents = articles-recents

(185)

Your turn

Set up pathauto for multilingual content

Use transliteration for pathauto

Use the Path Translation module for the

(186)

Multilingual

Navigation

(187)

Translating Menus

Menu Translation module (i18n)

Menu per language OR

(188)
(189)

Menu Link to a Node

(190)

Menu Link to a Single-Language Page i.e. Events View

(191)

Menu Link to a Generic Page i.e. Home Page

(192)
(193)

TRANSLATING

CUSTOM AND

CONTRIB MODULES

(194)

Modules to Extend

Drupal’s Multilingual

Functionality

(195)

Adding Functionality

+

Site Map Contact Form Meta Tags

(196)

• Translation of form labels

• Recipients per

language?

• What other language

is involved?

(197)

Meta Tags

• How are meta tags attached to each node?

• Will translators have permission to add

(198)

Is this module

(199)

Your turn

Take a sample module you’re considering

using for your current project.

How would you determine whether it’s

(200)

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?

Figure

Updating...

Related subjects :