BUILDING MULTILINGUAL WEBSITES WITH DRUPAL 7

Transcription

1 BUILDING MULTILINGUAL WEBSITES WITH DRUPAL 7

2 About us!

3 Getting to know you...

4 What are your multilingual needs?

5 What you need

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

7 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 What s in the box?

9 What you have Your local development environment Your manual Browser opened to drupal.org * * You re always logged in, right?

10 Resources: Code & files Go to Click themes download all files

11 What we ll do today Demos and presentations Exercises in manual Review and practice

12 What are we building?

13 Schedule What we ll do today

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 Extending Drupal multilingual

15 Session 1 MULTILINGUAL USER INTERFACES

16 Multilingual Requirements

17 Internationalization aka i18n Developing a website that enables localization. Separating elements that should be localized so they can be specified for each locale.

18 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

19 Translation The act of translating the text of a website into another language Part of the localization process

20 Multilingual Website 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 all the content translated?

22 Lots of reasons for multilingual websites Reach a wider audience Search engine optimization Government regulations Company policy

23 Multilingual Resources Personnel User-Interface Translators Content Translators QA for each Language Resources Contributed Translations (localize.drupal.og) Machine Translation Translation Manager

24 What is Multilingual Drupal?

25 Foreign-language site

26 Multilingual Site

27 Multilingual Site with Translation

28 Multilingual Modules Core modules: Locale Content Translation Contributed Modules: i18n (Internationalization) Entity Translation Others provide additional functionality

29 Installing a New Language

30 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

31 Building a website in another language

32 Installing Languages Configuration > Regional & language > Languages

33 Installing Languages Configuration > Regional & language > Languages

34 Configuring a Language

35 Language Detection When you arrive on the site, which language to show? 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 Using the URL as the primary method of language detection

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 Configure the path prefix or domain for each language

40 Language Detection & Selection The default language is used if there s no language in the URL

41 Language Detection & Selection You can also enable other methods of detection

42 Detection and Selection example.com/user

43 Detection and Selection example.com/fr/user

44 Choosing a Default Configuration > Regional & language > Languages

45 Switching Languages

46 Your turn Install the French language on your site Configure the Detection and Selection settings Add a language switcher to the site.

47 Types of Text in Drupal

48 Types of Text Built-in interface (Code) Content i18n Strings Built-in interface (User-Defined) Variables

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

50 Translating Built-in Interface Text (from Code)

51 Built-in Interface (Code)

52 Using Translations from Localize.Drupal.org

53 Use Localize.Drupal.org Each language has a project Translators contribute translations in their language Some projects have better coverage than others.

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 Upload.po files to Drupal

57 Overriding Translations in Drupal

58 Overriding a Translation

59 Searching for the String

60 Editing the Translation

61 Testing the Change

62 Your turn Download translations from localize.drupal.org and upload them to your site Override a translation in Drupal

63 Use Localization Update

64 Localization Update drupal.org/project/l10n_update

65 Localization Update

66 Translation Overview

67 Your turn Use the Localization Update module to pull in more translations from Drupal.org

68 Use Localization Update

69 Localization Update drupal.org/project/l10n_update

70 Localization Update

71 Translation Overview

72 Your turn Use the Localization Update module to pull in more translations from Drupal.org

73 Use Localization Client

74 Use Localization Client drupal.org/project/l10n_client

75 Sharing Your Translations Add your API key from localize.drupal.org to contribute your translations back to the community.

76 Demo!

77 Translating Built-in Interface Text (User- Defined)

78 User-Defined Text Text entered via the Views UI

79 User-Defined Text Text entered via the Flag UI

80 User-Defined Text Original Text French Translation Drupal Database Recent Articles Articles récents Added to the Views UI Added via the Translate Interface UI

81 Translate Interface

82 Add the Translation

83 Refresh the Translations

84 Source Language Configuration > Regional and language > Multilingual settings > Strings

85 Configuration in the Default Language

86 Translating Variables

88 Selecting Variables Configuration > Regional & language > Multilingual Settings > Variables

90 Your turn Add a site title and slogan and translate them.

91 Session 2 MULTILINGUAL CONTENT

92 What content experience are you building?

93 Fully Symmetric Experience English Polish

94 Asymmetric Experience French English

95 Mixed Language Experience English French

96 What about untranslated content?

97 Show Untranslated Content

98 Hide Untranslated Content French English

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) Title (English) Title (French) Title (German) Image Image Image Image

101 Node-Level Translation

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

103 Translating Nodes Translation Set Node 1 (English) Node 2 (French) Node 3 (German) tnid = 1 tnid = 1 tnid = 1

104 Enabling Node-Level Translation

105 Translating a Node

106 Node Properties Independent node properties per language

107 Use Cases Asymmetric menus per language Language-specific features (flagging, sign-up, moderation) Curation of content per language

108 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 languageneutral things (groups of people, products, data) Only works for nodes

109 Your turn Configure basic pages on your site to use node-level translation

110 Field-Level Translation

111 Field-Level Translation Translation of fields instead of nodes Entity Translation module (contrib) provides the UI Fields are translatable in core

112 Translating Fields Node 1 Language Specific (Fields) Language Neutral Title (English) Title (French) Title (German) Image Author Body (English) Body (French) Body (German) Post Date Facebook Likes A single node, with translations of certain fields.

113 Setting up Field Translation

114 Setting up Field Translation

115 Translating the Title

116 Adding a Translation

117 Adding a Translation

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 Comment Filtering

120 Comment Filtering

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 comments by language

123 Choosing a Translation Method

124 Event

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

126 Issue

127 Issue Language-specific Title Description URL Language-neutral Bookmark (flag) Status Priority Assignee Comments

128 List Item

129 List Item Language-specific Text Alt text URL Language-neutral Order (Nodequeue, Draggable Views) Image Published status

130 Planning Content Translation

131 Your turn: Planning Multilingual Content Destination Page User Blog Post Destination Name User Bookmarks Author Related Destination Photos Blog Content Articles User Blog Posts Comments

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) Title (English) Title (French) Title (German) Image Image Image Image

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 type translated?

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 Report back to the group

135 Translating Other Entity Types

136 Translate Core Entities Translation of entities from core modules

137 Translate Users Configure Fields Translate Users Permissions

138 Translate Users: Use Cases Team member profiles Multilingual community site Users who offer a service to users in more than one language

139 Translate Users: Drawbacks Single permission for users (can translate any user entity) UI is not self-explanatory

140 Translate Terms Configure Fields Translate Terms Permissions

141 Translate Terms: Use Cases Any vocabulary that is symmetric across languages: Categories Destinations Medical Topics

142 Translate Terms: Drawbacks Time-consuming to use translation UI Single permission for translating all vocabularies Alphabetical listings in Views will use source language

143 Translate Comments Configure Fields Translate Comments Permissions

144 Translate Comments: Use Cases Travel website (machine translation of reviews) Government website (human translation of questions + answers)

145 Translate Other Entities Translation of entities from contributed modules Entities need to have fields and include translation support in hook_entity_info()

146 Product

147 Product Language-specific Title Description URL Language-neutral SKU Status Image Price Quantity Remaining Shopping Cart Status

148 Translatable Commerce Product

149 Product

150 Product

151 Translate categories using entity translation Your turn

152 Multilingual Views

153 Mixed-Language Views English Do you want the view to show untranslated content? French

154 Filtering by Language Entity Translation Content Translation

155 Field Options in Views

156 Your turn Create a view to display page nodes in the current language only Create a view to display articles

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 to use as the homepage

159 Multilingual Selection

160 Translate the Frontpage

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

162 Session 3 MULTILINGUAL STRUCTURE

163 Overview What else in Drupal needs translation? Field settings Blocks Paths Date Formats s to Users Menus

164 Text Groups Menu Fields Blocks Taxonomy

165 Translating Field Settings

166 Field Settings /fr/node/add/article Label Description

167 Translating Field Settings Field Translation module (i18n) Translate field settings Label Description Options Default Value Only core field settings

169 Field Translate Tab

170 Translate Field Settings

171 Translating Options

172 Field Display Formatters Change the formatter so the translated field value is displayed

173 Your turn Translate field settings on your article content type.

174 Translating Blocks

175 Translating Blocks Block Translation module (i18n) Make blocks translatable Display blocks only in certain languages

179 Translating Blocks Create a translatable block for all languages on your site. Create a block targeting a specific language.

180 Translating Paths

181 Path Translation

182 Pathauto Patterns Create a pathauto pattern per language

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 Recent Articles view

186 Multilingual Navigation

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

188 Translating Menus

189 Translating Menus Menu Link to a Node

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

191 Translating Menu Items Menu Link to a Generic Page i.e. Home Page

192 Translating Menu Items

193 Session 4 TRANSLATING CUSTOM AND CONTRIB MODULES

194 Modules to Extend Drupal s Multilingual Functionality

195 Adding Functionality + Contact Form Meta Tags Site Map

196 Contact Form 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 them?

198 Is this module multilingualcompatible?

199 Your turn Take a sample module you re considering using for your current project. How would you determine whether it s multilingual-compatible?

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?

201 Creating a glue module for a multilingual website

202 Using the t function print t( Welcome to GlobalTravel );

203 !variable <?php $message = t("if you don't want to receive such s, you can change your settings at!url.", array('!url' => l(t('my account'), "user/$account->uid")));?> The $account variable includes HTML

204 @variable <?php $title = t("@name's blog", array('@name' => $account->name));?> variable is run through check_plain

205 %variable <?php $message = t('%name-from sent %nameto an .', array('%name-from' => $user->name, '%name-to' => $account->name));?> The %name-from and %name-to are emphasized text (wrapped in <em>)

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

207 Multilingual Theming

208 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

209 Space Requirements English French

210 Right to Left Languages English Hebrew

211 Localizing Date Formats

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

213 Date Format Documentation

214 Define new formats

215 Localizing Date Formats

216 Date formats in Views

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

218 User Language Preferences

219 User Language Preference

220 Set on Account Creation

221 Used in Language Detection

222 Language Preference for User s

223 Session 5 TRANSLATION WORKFLOWS

224 Translation Workflows

225 Cost of Translation Time-consuming Expensive How can you speed up the process and reduce the amount of text to be translated?

226 What are Translation Workflows? Translator

227 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

228 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

229 Discussion Which approach would work better at your organization?

230 Translation Workflows for UI Strings

231 Translation Workflow for UI Strings 1. Pull in contributed translations from localize.drupal.org 2. Override translations + add translations of custom strings Translator

232 Overriding/Adding Translations Outside of Drupal

233 Use POEdit to Translate

234 Translations Spreadsheet

235 Translating Outside Drupal CSV with Translations Translator CSV Template.po file for each language

236 Re-using Your Translations

237 Translating User- Defined Strings

238 User-Defined Strings Strings added in the admin UI (not in code) For example: Views text

239 Other User-Defined Strings Block text Menu items Field settings

241 Translate Tab

242 Translate Tab

243 User-Defined Strings

244 Challenges Giving translators access to block/field/ menu configuration Allowing translators to use all input formats Changing the original values Changing the default language

245 Translation Workflows for Content

246 Content Translation Workflow 1. Author creates a new node 2. Translators adds a translation Author Translator

247 Translation Workflows for Content: Translating in Drupal

248 Translation Interface in Drupal

249 Node-Level vs. Field-Level Translation Field-Level Translation Node-Level Translation

250 Creating a Translation Workflow from Scratch Permissions for translators Rules and Flag to trigger translation requests Views for Translators

251 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)

252 Challenges Different UI for Entity Translation/Content Translation (Confusing) Professional translators need to learn Drupal Need to build system for reviewing translations

253 Typical UI for Translators

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

255 Translation Workflows for Content: TMGMT Module

256 Translation Management Tool (TMGMT) drupal.org/project/tmgmt

257 Translation Management Tool (TMGMT) Drupal

258 Translators Microsoft (Bing) Translator (machine) Google Translate (machine) Nativy (human) MyGengo (human) Supertext (human) One Hour Translation (human)

259 Microsoft Translator

260 Microsoft Translator

261 Requesting Translations

262 Choosing a Translator

263 Review Translation

264 Review Translation

265 Accepted Translation Appears

266 Translate in Bulk

267 Translation Jobs

268 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

269 Translation Workflows for Content: Lingotek Module

270 Lingotek Module drupal.org/project/lingotek

271 Lingotek Drupal Individual Translator

272 Create a Lingotek Account

273 Connect to Machine Translation Tool

274

275 Create a Project Create a new project for each Drupal website

276 Lingotek Translation Per Content Type Disables manual translation of content

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

278 Send a Node for Translation

279 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

280 Updating the Translation In order to accept the translation and publish it to the site, you have to click Update.

281 Translation Appears

282 Project Status

283 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

284 Importing Content

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

286 Session 8 REVIEW

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

288 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

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

290 Feedback please!

291 Q + A