Post on 18-Jan-2021
transcript
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