Tweet
Tweet

Slide 1

Slide 1 text

1 axelerant.com Best Practices for Building Multilingual Sites in Drupal 8 BADCamp 2020 Mohit Aghera (mohit_aghera)

Slide 2

Slide 2 text

2 axelerant.com About Me Mohit Aghera Drupal Technical Architect @Axelerant Drupal.org: mohit_aghera Twitter: @mohit_rocks

Slide 3

Slide 3 text

3 axelerant.com Modules Stack Content Translation Language Module Configuration Translation Interface Translation/Locale

Slide 4

Slide 4 text

4 axelerant.com Two Personas Site Builders Developers

Slide 5

Slide 5 text

5 axelerant.com Site Builders

Slide 6

Slide 6 text

6 axelerant.com Translating Content Entities ● Content Types ● Detailed options are visible on Regional and language > Content Language page.

Slide 7

Slide 7 text

7 axelerant.com Translating Content Entities ● Blocks translation ● Blocks visibility per language ● Translation of various attributes for block instance like title etc.

Slide 8

Slide 8 text

8 axelerant.com Making Fields Translatable ● Enable from the field settings ● Detailed settings related to content types can be found on “admin/config/regional/content-language” ●

Slide 9

Slide 9 text

9 axelerant.com Paragraphs Translation Paragraph Translation Region & Language > Content Language

Slide 10

Slide 10 text

10 axelerant.com Views - Content Translation ● Display plugin provides various options to render the content. ● Also takes care of simple translation fallback

Slide 11

Slide 11 text

11 axelerant.com Views - Content Translation ● We can use “select_translation” for advance translation fallback. ● Similar modules ○ active_translation ○ language_fallback ○ entity_language_fallback

Slide 12

Slide 12 text

12 axelerant.com Views - Interface Translation ● Translate all the titles, help text, default text, no result behaviour text, button labels for the views. ● We can export it via config export ● Drupal adds it to seperate directory based on language code.

Slide 13

Slide 13 text

13 axelerant.com Translated Views ● Gets exported to “/language// ● In demo setup: config/sync/language/es/

Slide 14

Slide 14 text

14 axelerant.com Multilingual Solr Search ● Multilingual solr search is part of “search_api” module now. ● URL on demo setup: “admin/config/search/search-api/index/umami_search/edit”

Slide 15

Slide 15 text

15 axelerant.com Translations Contribution Tools ● TMGMT module and ecosystem ● It supports automated or user contributed translations

Slide 16

Slide 16 text

16 axelerant.com Developers

Slide 17

Slide 17 text

17 axelerant.com Entity Translation API ● Fields inherit language from parent language aware entity ● $entity->getTranslation() ● $entityRepository->getTranslationFromContext() ● Several other methods to EntityInterface ● hook_entity_translation_create() ● hook_entity_translation_insert() ● hook_entity_translation_delete()

Slide 18

Slide 18 text

18 axelerant.com Entity Translation API

Slide 19

Slide 19 text

19 axelerant.com Making Entity Fields Translatable

Slide 20

Slide 20 text

20 axelerant.com Configuration Entity Translation ● Configuration translations are provided by “config_translation” module. ● It works out-of-box for all the Drupal Core’s config entities

Slide 21

Slide 21 text

21 axelerant.com Translating Custom Configuration ● Create “my_module.schema.yml” ● Add the fields that we want to make translatable. ● Create “my_module.config_translation.yml” to link it to schema.yml

Slide 22

Slide 22 text

22 axelerant.com Translating Custom Configuration

Slide 23

Slide 23 text

23 axelerant.com Configuration Translation APIs ● Override the configuration ● Fetch translated configuration ● hook_config_translation_info_alter()

Slide 24

Slide 24 text

24 axelerant.com Language Negotiation Plugins ● Determines which language to pick ● We can also write custom language negotiation plugins

Slide 25

Slide 25 text

25 axelerant.com Language Negotiation Plugins

Slide 26

Slide 26 text

26 axelerant.com Interface Text Translation ● Use “StringTranslationTrait” ● Translate by $this->t(“Hello World”) ● Context parameters to t() helps to provide contextual and disambiguous translations

Slide 27

Slide 27 text

27 axelerant.com Interface Text Translation

Slide 28

Slide 28 text

28 axelerant.com Translation in Twig ● t() twig function for the translation ● trans filter Translation in JS ● Drupal.t() ● Drupal.formatPlural()

Slide 29

Slide 29 text

29 axelerant.com Adding Translation in Custom Modules ● “interface translation project” and “interface translation server pattern” properties in the info.yml files helps to provide custom .po files. umami_multilingual/translations/es.po umami_multilingual/umami_multilingual.info.yml

Slide 30

Slide 30 text

30 axelerant.com Translations Deployment ● Drush Language Commands: https://www.drupal.org/project/drush_language ● We can leverage Drush commands with CI pipeline.

Slide 31

Slide 31 text

31 axelerant.com Sample Repository ● Github: https://github.com/mohit-rocks/drupal8-multilingual

Slide 32

Slide 32 text

32 axelerant.com BADCamp 2020 Coming up next Friday 11 am ● Accessible SVGs: Inclusiveness Beyond Patterns with Carie Fisher ● Decoupling Drupal: Gatsby Live Preview from the same project with Chad Carlson ● Making a better community, better software, and a better world with Tara King, Ruby Sinreich, and Elli Lugwigson

Slide 33

Slide 33 text

33 axelerant.com BADCamp 2020 Coming up next Friday 10:45 am ● Coffee Break with amazee.io in the Expo Hall

Slide 34

Slide 34 text

34 axelerant.com Thank you!!