Building Multilingual Sites - The Drupal Way!!

Slide 1

Slide 1 text

1 axelerant.com Building Multilingual Sites - The Drupal Way!! 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 Conﬁguration Translation Interface Translation

Slide 4

Slide 4 text

4 axelerant.com Two Personas Site Builders Developers

Slide 5

Slide 5 text

5 axelerant.com Site Builders 5

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 ﬁeld settings ● Detailed settings related to content types can be found on “admin/conﬁg/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 conﬁg 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: conﬁg/sync/language/es/

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 axelerant.com Developers

Slide 16

Slide 16 text

16 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 17

Slide 17 text

17 axelerant.com Entity Translation API

Slide 18

Slide 18 text

18 axelerant.com Making Entity Fields Translatable

Slide 19

Slide 19 text

19 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 20

Slide 20 text

20 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 21

Slide 21 text

21 axelerant.com Translating Custom Conﬁguration

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 axelerant.com Language Negotiation Plugins

Slide 25

Slide 25 text

25 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 26

Slide 26 text

26 axelerant.com Interface Text Translation

Slide 27

Slide 27 text

27 axelerant.com Translation in Twig ● t() twig function for the translation ● trans ﬁlter Translation in JS ● Drupal.t() ● Drupal.formatPlural()

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

31 axelerant.com Thank you!!