Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DRUPALCAMP GHENT
2016
GROW SOME IDEAS
DRUPAL 8'S MULTILINGUAL APIS:
BUILDING FOR THE ENTIRE WORLD
Christian López Espínola...
DRUPAL 8'S MULTILINGUAL APIS:
BUILDING FOR THE ENTIRE
WORLD
DRUPALCAMP GHENT
2016
GROW SOME IDEAS
DRUPAL 8 MULTILINGUAL
(setup, tips and tricks)
for a good user experience
Tom Robert...
penyaskito
Christian López Espínola
Drupal 8 Multilingual
Initiative contributor
Drupal 7 MULTILINGUAL
Drupal
CORE
Drupal 7 MULTILINGUAL
Drupal
CORE
LOCALE
Drupal 7 MULTILINGUAL
Drupal
CORE
L10n UP
LOCALE
m
Drupal 7 MULTILINGUAL
Drupal
CORE
L10n UP
CONTENT
TRANSLATION
LOCALE
Ü
m
Drupal 7 MULTILINGUAL
Drupal
CORE
L10n UP
CONTENT
TRANSLATION
LOCALE
I18N
Ü
m
Drupal 7 MULTILINGUAL
Drupal
CORE
L10n UP
CONTENT
TRANSLATION
LOCALE
I18N
VARIABLE
Ü
m
Drupal 7 MULTILINGUAL
Drupal
CORE
L10n UP
CONTENT
TRANSLATION
LOCALE
I18N
VARIABLE
Entity
translation
Ü
m
Drupal 7 MULTILINGUAL
Four pillars in Drupal 8
LANGUAGE
Base services for all
modules dealing
with data. Not just
multilingual.
Four pillars in Drupal 8
LANGUAGE
Base services for all
modules dealing
with data. Not just
multilingual.
INTERFACE
Interface
translation has
built...
LANGUAGE
Base services for all
modules dealing
with data. Not just
multilingual.
INTERFACE
Interface
translation has
built...
LANGUAGE
Base services for all
modules dealing
with data. Not just
multilingual.
INTERFACE
Interface
translation has
built...
LANGUAGE INTERFACE CONTENT CONFIG
(8 é
Four pillars in Drupal 8
DEALING WITH LANGUAGE
Drupal:languageManager()
LanguageManager
ConfigurableLanguageManager
DEALING WITH LANGUAGE
->getLanguages()
UND: NOT SPECIFIED
ZXX: NOT APPLICABLE
EN: ENGLISH (DEFAULT)
UND: NOT SPECIFIED
ZXX: NOT APPLICABLE
HU: HUNGARIAN
IT: ITALIAN
DEALING WITH LANGUAGE
->getLanguages()
UND: NOT SPECIFIED
ZXX: NOT APPLICABLE
HU: HUNGARIAN
IT: ITALIAN
language.entity.$langcode.yml
DEALING WITH LANGUAGE
->get...
UND: NOT SPECIFIED
ZXX: NOT APPLICABLE
HU: HUNGARIAN
IT: ITALIAN
language.entity.$langcode.yml
Locked
DEALING WITH LANGUAG...
UND: NOT SPECIFIED
ZXX: NOT APPLICABLE
HU: HUNGARIAN
IT: ITALIAN
language.entity.$langcode.yml
Locked Not locked
DEALING W...
DEALING WITH LANGUAGE
ConfigurableLanguage::

createFromLangcode(‘fr’)

->save()
DEALING WITH LANGUAGE
ConfigurableLanguage::

load(‘fr’)->delete()
DEALING WITH LANGUAGE
$languageManager

->getCurrentLanguage()
LANGUAGE INTERFACE CONTENT CONFIG
(8 é
Four pillars in Drupal 8
INTERFACE LANGUAGE
INTERFACE LANGUAGE
t(‘English text’)
INTERFACE LANGUAGE
DEPENDENCY INJECTION
LOGIC
TRANSLATION
CONFIGURATION
USER
DEPENDENCY INJECTION
LOGIC
TRANSLATION
CONFIGURATION
USER
INTERFACE LANGUAGE
t(‘English text’)
INTERFACE LANGUAGE
t(‘English text’)
$this->t(‘English text’)
INTERFACE LANGUAGE
class Foo {
use StringTranslationTrait;
…
}
INTERFACE LANGUAGE
INTERFACE LANGUAGE
$this->t(‘English text’)

->getOption(‘langcode’);
INTERFACE LANGUAGE
format_plural(…)
$this->formatPlural(…)
Javascript api
Drupal.t(…)
Drupal.formatPlural()
TWIG TEMPLATES
<input {{ attributes }}
placeholder="{{ 'Search'|trans }}" />
INPUT--SEARCH.HTML.TWIG
<div{{ author_attribu...
LOCALE.links.menu.yml
locale.translate_page:

title: 'User interface translation'

description: 'Configure the import …’

r...
LOCALE.links.menu.yml
locale.translate_page:

title: 'User interface translation'

description: 'Configure the import …’

r...
LANGUAGE INTERFACE CONTENT CONFIG
(8 é
Four pillars in Drupal 8
English to X
Node.php (Snippet)
/**
* Defines the node entity class.
*
* @ContentEntityType(
* id = "node",
* label = @Translation(“Cont...
Node.php (Snippet)
function baseFieldDefinitions($entity_type) {
// …
$fields['title'] =
BaseFieldDefinition::create('string'...
FIELDS THEMSELVES
FIELDS THEMSELVES
AUTOMATED!
MULTICOLUMN FIELD SNIPPET
* @FieldType(
* id = "image",
* column_groups = {
* "file" = {
* "label" = @Translation("File"),
...
Entity language API
$node = Node::load(42);
$node = $node
->getTranslation(‘hu’);
$node = $entityRepository
->getTranslati...
Entity language API
$node->getUntranslated()
$node->language()
$node->getTranslationLanguages()
$node->hasTranslation(‘hu’...
LANGUAGE INTERFACE CONTENT CONFIG
(8 é
Four pillars in Drupal 8
English to X X to Y
Intelligent
objects
config/install/system.maintenance.yml
message: '@site is currently under
maintenance. We should be back
shortly. Thank you...
Core.data_types.schema.yml
config_object:
type: mapping
mapping:
langcode:
type: string
label: 'Language code'
…
text:
type...
config/schema/system.schema.yml
system.maintenance:
type: config_object
label: 'Maintenance mode'
mapping:
message:
type: t...
system.maintenance.yml
message: '@site is currently under
maintenance. We should be back
shortly. Thank you for your
patie...
system.maintenance.yml
message: '@site is currently under
maintenance. We should be back
shortly. Thank you for your
patie...
system.maintenance.yml
message: '@site is currently under
maintenance. We should be back
shortly. Thank you for your
patie...
system.maintenance.yml
message: '@site is currently under
maintenance. We should be back
shortly. Thank you for your
patie...
system.maintenance.yml
message: '@site is currently under
maintenance. We should be back
shortly. Thank you for your
patie...
configuration API
$config =
Drupal::config(‘system.maintenance’);
$config->get(‘message’);
configuration API
$config =
Drupal::config(‘system.maintenance’);
$config->get(‘message’);
OVERRIDES
APPLY AS
APPROPRIATE
configuration API
$manager = Drupal::languageManager();
$hu = $manager->getLanguage('hu');
$original = $manager-
>getConfig...
configuration API
Drupal::config(‘system.maintenance’);
Drupal::configFactory()-
>getEditable(‘system.maintenance’);
Drupal:...
LANGUAGE INTERFACE CONTENT CONFIG
(8 é
Four pillars in Drupal 8
English to X X to Y
Intelligent
objects
X to Y
Dumb
arrays
DRUPAL 8'S MULTILINGUAL APIS:
BUILDING FOR THE ENTIRE
WORLD
DRUPALCAMP GHENT
2016
GROW SOME IDEAS
Drupal 8's Multilingual APIs: Building for the Entire World
Drupal 8's Multilingual APIs: Building for the Entire World
Drupal 8's Multilingual APIs: Building for the Entire World
Drupal 8's Multilingual APIs: Building for the Entire World
Upcoming SlideShare
Loading in …5
×

Drupal 8's Multilingual APIs: Building for the Entire World

125 views

Published on

Session held at DrupalCamp Ghent 2016, September 9th 2016
http://drupalcamp.be/node/161

Are you interested in writing contributed modules, themes or distributions for Drupal 8? Then this is the session for you. In this session, we'll look at the most important APIs you would use to integrate with and best practices to use to ensure that your project is fully multilingual-ready.

This session will be valuable to all contributors even those whose projects are not inherently multilingual. Even if your project is not immediately intended to be multilingual, having a multilingual-capable module, theme or distribution makes your solution appealing to a much broader audience and is likely to provide value to global users.

Drupal 8 is a great platform to work with not only because it is so multilingual capable out-of-the-box, but also because you can easily expand while maintaining the translatability of your data. Drupal 8’s multilingual core offers a robust multilingual foundation, making the integration process much more seamless.

The majority of Drupal 8's APIs are designed to support multilingual by default and make sane assumptions about common scenarios. As a result, there are several important things to keep in mind to build the best integration possible.

In this session, we will walk through:

Working with language APIs, and the language your data is in.
Making your output strings translatable: t() and its friends, but also in twig templates
Why you should and how to code translatable content entities.
Customizing your field properties translatability so site builders can choose.
Configuration translation: translating your configuration entities
INTENDED AUDIENCE

Drupal developers working with contrib or custom modules that are designed for multilingual or non-English sites would benefit from this session (that means nearly every Drupal developer out there).

Drupal themers intending to make their theme templates translation ready.

Attendees will walk away with knowledge to add Drupal 8 multilingual support to your modules, themes and distributions.

SKILL LEVELS

This session is suitable for beginners or intermediate Drupal users. It is best if you come to the session with some exposure to OOP, Drupal 8 code and twig templates, but even if you don’t have that foundation I’m sure you can catch up.



Published in: Technology
  • Be the first to comment

  • Be the first to like this

Drupal 8's Multilingual APIs: Building for the Entire World

  1. 1. DRUPALCAMP GHENT 2016 GROW SOME IDEAS DRUPAL 8'S MULTILINGUAL APIS: BUILDING FOR THE ENTIRE WORLD Christian López Espínola - Lingotek
  2. 2. DRUPAL 8'S MULTILINGUAL APIS: BUILDING FOR THE ENTIRE WORLD
  3. 3. DRUPALCAMP GHENT 2016 GROW SOME IDEAS DRUPAL 8 MULTILINGUAL (setup, tips and tricks) for a good user experience Tom Robert Room Calibrate 17:10 - 17:40
  4. 4. penyaskito Christian López Espínola Drupal 8 Multilingual Initiative contributor
  5. 5. Drupal 7 MULTILINGUAL
  6. 6. Drupal CORE Drupal 7 MULTILINGUAL
  7. 7. Drupal CORE LOCALE Drupal 7 MULTILINGUAL
  8. 8. Drupal CORE L10n UP LOCALE m Drupal 7 MULTILINGUAL
  9. 9. Drupal CORE L10n UP CONTENT TRANSLATION LOCALE Ü m Drupal 7 MULTILINGUAL
  10. 10. Drupal CORE L10n UP CONTENT TRANSLATION LOCALE I18N Ü m Drupal 7 MULTILINGUAL
  11. 11. Drupal CORE L10n UP CONTENT TRANSLATION LOCALE I18N VARIABLE Ü m Drupal 7 MULTILINGUAL
  12. 12. Drupal CORE L10n UP CONTENT TRANSLATION LOCALE I18N VARIABLE Entity translation Ü m Drupal 7 MULTILINGUAL
  13. 13. Four pillars in Drupal 8
  14. 14. LANGUAGE Base services for all modules dealing with data. Not just multilingual. Four pillars in Drupal 8
  15. 15. LANGUAGE Base services for all modules dealing with data. Not just multilingual. INTERFACE Interface translation has built-in update feature, improved usability. 8 Four pillars in Drupal 8
  16. 16. LANGUAGE Base services for all modules dealing with data. Not just multilingual. INTERFACE Interface translation has built-in update feature, improved usability. CONTENT Field translation in built-in API for all entities. Content translation module provides user interface. 8 é Four pillars in Drupal 8
  17. 17. LANGUAGE Base services for all modules dealing with data. Not just multilingual. INTERFACE Interface translation has built-in update feature, improved usability. CONTENT Field translation in built-in API for all entities. Content translation module provides user interface. CONFIG Common configuration system handles blocks, views, field settings. Unified translation. (8 é Four pillars in Drupal 8
  18. 18. LANGUAGE INTERFACE CONTENT CONFIG (8 é Four pillars in Drupal 8
  19. 19. DEALING WITH LANGUAGE Drupal:languageManager() LanguageManager ConfigurableLanguageManager
  20. 20. DEALING WITH LANGUAGE ->getLanguages() UND: NOT SPECIFIED ZXX: NOT APPLICABLE EN: ENGLISH (DEFAULT)
  21. 21. UND: NOT SPECIFIED ZXX: NOT APPLICABLE HU: HUNGARIAN IT: ITALIAN DEALING WITH LANGUAGE ->getLanguages()
  22. 22. UND: NOT SPECIFIED ZXX: NOT APPLICABLE HU: HUNGARIAN IT: ITALIAN language.entity.$langcode.yml DEALING WITH LANGUAGE ->getLanguages()
  23. 23. UND: NOT SPECIFIED ZXX: NOT APPLICABLE HU: HUNGARIAN IT: ITALIAN language.entity.$langcode.yml Locked DEALING WITH LANGUAGE ->getLanguages()
  24. 24. UND: NOT SPECIFIED ZXX: NOT APPLICABLE HU: HUNGARIAN IT: ITALIAN language.entity.$langcode.yml Locked Not locked DEALING WITH LANGUAGE ->getLanguages()
  25. 25. DEALING WITH LANGUAGE ConfigurableLanguage::
 createFromLangcode(‘fr’)
 ->save()
  26. 26. DEALING WITH LANGUAGE ConfigurableLanguage::
 load(‘fr’)->delete()
  27. 27. DEALING WITH LANGUAGE $languageManager
 ->getCurrentLanguage()
  28. 28. LANGUAGE INTERFACE CONTENT CONFIG (8 é Four pillars in Drupal 8
  29. 29. INTERFACE LANGUAGE
  30. 30. INTERFACE LANGUAGE t(‘English text’)
  31. 31. INTERFACE LANGUAGE
  32. 32. DEPENDENCY INJECTION LOGIC TRANSLATION CONFIGURATION USER
  33. 33. DEPENDENCY INJECTION LOGIC TRANSLATION CONFIGURATION USER
  34. 34. INTERFACE LANGUAGE t(‘English text’)
  35. 35. INTERFACE LANGUAGE t(‘English text’) $this->t(‘English text’)
  36. 36. INTERFACE LANGUAGE class Foo { use StringTranslationTrait; … }
  37. 37. INTERFACE LANGUAGE
  38. 38. INTERFACE LANGUAGE $this->t(‘English text’)
 ->getOption(‘langcode’);
  39. 39. INTERFACE LANGUAGE format_plural(…) $this->formatPlural(…)
  40. 40. Javascript api Drupal.t(…) Drupal.formatPlural()
  41. 41. TWIG TEMPLATES <input {{ attributes }} placeholder="{{ 'Search'|trans }}" /> INPUT--SEARCH.HTML.TWIG <div{{ author_attributes }}> {% trans %} Submitted by {{ author_name }} on {{ date }} {% endtrans %} </div> NODE.HTML.TWIG
  42. 42. LOCALE.links.menu.yml locale.translate_page:
 title: 'User interface translation'
 description: 'Configure the import …’
 route_name: locale.translate_page
 parent: system.admin_config_regional
 weight: 15 
 locale.translate_status:
 title: 'Available translation updates'
 route_name: locale.translate_status
 description: 'Get a status report …’
 parent: system.admin_reports
  43. 43. LOCALE.links.menu.yml locale.translate_page:
 title: 'User interface translation'
 description: 'Configure the import …’
 route_name: locale.translate_page
 parent: system.admin_config_regional
 weight: 15 
 locale.translate_status:
 title: 'Available translation updates'
 route_name: locale.translate_status
 description: 'Get a status report …’
 parent: system.admin_reports
  44. 44. LANGUAGE INTERFACE CONTENT CONFIG (8 é Four pillars in Drupal 8 English to X
  45. 45. Node.php (Snippet) /** * Defines the node entity class. * * @ContentEntityType( * id = "node", * label = @Translation(“Content"), * translatable = TRUE, * entity_keys = { * "id" = "nid", * "label" = "title", * "langcode" = "langcode", * } * )
  46. 46. Node.php (Snippet) function baseFieldDefinitions($entity_type) { // … $fields['title'] = BaseFieldDefinition::create('string') ->setLabel(t('Title')) ->setRequired(TRUE) ->setTranslatable(TRUE); }
  47. 47. FIELDS THEMSELVES
  48. 48. FIELDS THEMSELVES AUTOMATED!
  49. 49. MULTICOLUMN FIELD SNIPPET * @FieldType( * id = "image", * column_groups = { * "file" = { * "label" = @Translation("File"), * "columns" = { * "target_id", "width", "height" * }, * }, * "alt" = { * "label" = @Translation("Alt"), * "translatable" = TRUE * }, * }
  50. 50. Entity language API $node = Node::load(42); $node = $node ->getTranslation(‘hu’); $node = $entityRepository ->getTranslationFromContext($node);
  51. 51. Entity language API $node->getUntranslated() $node->language() $node->getTranslationLanguages() $node->hasTranslation(‘hu’) $node->addTranslation(‘hu’) $node->removeTranslation(‘hu’)
  52. 52. LANGUAGE INTERFACE CONTENT CONFIG (8 é Four pillars in Drupal 8 English to X X to Y Intelligent objects
  53. 53. config/install/system.maintenance.yml message: '@site is currently under maintenance. We should be back shortly. Thank you for your patience.' langcode: en
  54. 54. Core.data_types.schema.yml config_object: type: mapping mapping: langcode: type: string label: 'Language code' … text: type: string label: 'Text' translatable: true
  55. 55. config/schema/system.schema.yml system.maintenance: type: config_object label: 'Maintenance mode' mapping: message: type: text label: 'Message to display…’ LANGCODE TRANSLATABLE STRING
  56. 56. system.maintenance.yml message: '@site is currently under maintenance. We should be back shortly. Thank you for your patience.' langcode: en
  57. 57. system.maintenance.yml message: '@site is currently under maintenance. We should be back shortly. Thank you for your patience.' langcode: en LANGUAGES/HU/SYSTEM.…YML
  58. 58. system.maintenance.yml message: '@site is currently under maintenance. We should be back shortly. Thank you for your patience.' langcode: en LANGUAGES/HU/SYSTEM.…YML message: '@site karbantartás alatt áll…’
  59. 59. system.maintenance.yml message: '@site is currently under maintenance. We should be back shortly. Thank you for your patience.' langcode: en LANGUAGES/HU/SYSTEM.…YML message: '@site karbantartás alatt áll…’ LANGUAGES/IT/SYSTEM.…YML
  60. 60. system.maintenance.yml message: '@site is currently under maintenance. We should be back shortly. Thank you for your patience.' langcode: en LANGUAGES/HU/SYSTEM.…YML message: '@site karbantartás alatt áll…’ LANGUAGES/IT/SYSTEM.…YML message: '@site …’
  61. 61. configuration API $config = Drupal::config(‘system.maintenance’); $config->get(‘message’);
  62. 62. configuration API $config = Drupal::config(‘system.maintenance’); $config->get(‘message’); OVERRIDES APPLY AS APPROPRIATE
  63. 63. configuration API $manager = Drupal::languageManager(); $hu = $manager->getLanguage('hu'); $original = $manager- >getConfigOverrideLanguage(); $manager->setConfigOverrideLanguage($hu); $config = Drupal::config(‘system.maintenance'); // … $manager->setConfigOverrideLanguage($original);
  64. 64. configuration API Drupal::config(‘system.maintenance’); Drupal::configFactory()- >getEditable(‘system.maintenance’); Drupal::languageManager() ->getLanguageConfigOverride ('hu', 'system.maintenance') ->set('message', 'Karbantartás...') ->save(); OVERRIDES APPLY AS APPROPRIATE NO OVERRIDES APPLY THE OVERRIDE ITSELF
  65. 65. LANGUAGE INTERFACE CONTENT CONFIG (8 é Four pillars in Drupal 8 English to X X to Y Intelligent objects X to Y Dumb arrays
  66. 66. DRUPAL 8'S MULTILINGUAL APIS: BUILDING FOR THE ENTIRE WORLD
  67. 67. DRUPALCAMP GHENT 2016 GROW SOME IDEAS

×