Multilingual Sites in Craft 3

The challenges of multilingual sites in general, and how to implement them using Craft CMS version 3

Transcript

1. Multilingual Sites in Craft 3
   

   View Slide

2. Zoltan Varady
   @drifteaur
   Novi Sad • Budapest
   Farm Studio
   farm.co.hu
   

   View Slide

3. There are many kinds of
   multilingual sites
   

   View Slide

4. Business cases
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. 1:1 translation
   Same structure, same content, just translated
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Different content
    Different audiences; or not enough resources to translate everything
    

    View Slide

13. View Slide

14. View Slide

15. Your experiences?
    

    View Slide

16. Language is not culture
    

    View Slide

17. Color is language
    

    View Slide

18. View Slide

19. View Slide

20. Scripts can have cultural and political overtones
    

    View Slide

21. View Slide

22. Translation Workflows
    

    View Slide

23. Who will do the translation?
    Internally, by the content team
    By the developers
    Outsourced to a translation agency
    via an API?
    Automated translation
    

    View Slide

24. Translation workflow
    Do you need to publish all languages at once?
    Proofreading / approval
    Translation management tools

    

    View Slide

25. Let’s get crafty
    

    View Slide

26. To borrow from Drupal
    Content translation (entries, categories, etc)
    Interface translation (static messages, Craft::t, twig’s | t filter)
    Configuration translation (settings, email templates…)
    

    View Slide

27. Content and fields
    

    View Slide

28. Belgian Site Group
    Swiss Site Group
    Schwiizerdütch
    de-CH
    Swiss French
    fr-CH
    Swiss Italian
    it-CH
    Flemish
    nl-BE
    Belgian French
    fr-BE
    Belgian German
    de-BE
    

    View Slide

29. Not So Fancy
    Fancy
    Shoes
    en-GB
    Shirts
    en-GB
    Pants
    en-GB
    Shoes
    en-GB
    Shirts
    en-GB
    Pants
    en-GB
    

    View Slide

30. Craft 3 only cares about sites
    

    View Slide

31. Craft 3 only cares about sites
    Content table
    Sites table
    

    View Slide

32. Multi-valued fields
    Matrix
    Categories, tags
    Related entries
    Assets
    but not Tables (use Matrix or Super Table instead if you need it)
    

    View Slide

33. pizza dough
    tomatoes
    mozzarella
    ham
    pineapple
    pizzatészta
    paradicsom
    mozzarella
    kolbász
    pizza dough
    tomatoes
    mozzarella
    pizzatészta
    paradicsom
    mozzarella
    

    View Slide

34. View Slide

35. The power of t()
    

    View Slide

36. Localization is more than words
    05/06/2018 vs 06/05/2018 vs 2018. 06. 05.
    2,100.99 vs 2 100,99
    $100 vs 100 EUR
    GMT UTC DST CET PST
    1 hour, 2 hours vs نابْح ُ
    ص باح ْ
    صَأ بِحاص
    

    View Slide

37. Yii 2 + INTL = FTW
    {{ 'Hello {name}!' | t({ name: 'Zoltan' }) }} => Hello Zoltan
    {{ 'Hello {0}!' | t([‘Zoltan’]) }} => Hello Zoltan
    {{ 'Total: {amt,number}' | t({amt: 2510.99}) }} => 2,510.99
    {{ 'You are the {n,spellout,%spellout-ordinal} in line' | t({n: 47}) }} => You are
    the forty-seventh in line
    {{ 'Eres {n,ordinal,%digits-ordinal-feminine}' | t({n: 1}) }} => Eres 1.ª
    

    View Slide

38. {{ '{d,date,short}' | t({d: date().timestamp}) }} => 9/18/18
    {{ 'Today is {d,date,long}' | t({d: date().timestamp}) }} => September 18, 2018
    {{ 'Today is {d,date,yyyy-MM-dd}' | t({d: date().timestamp}) }} => 2018-09-18
    {{ 'Last updated: {0, duration,%with-words} ago' | t([15024]) }} => Last updated: 4
    hours, 10 minutes, 24 seconds ago
    

    View Slide

39. https://intl.rmcreative.ru/
    

    View Slide

40. {{ 'You {likeCount,plural,
    offset: 1
    =0{did not like this}
    =1{liked this}
    one{and one other person liked this}
    other{and # others liked this}
    } ' | t ({likeCount: 2}) }} => You and one other person liked this
    

    View Slide

41. Configuration translation
    No standardized way of storing
    or displaying translations
    Plugins need to take care of it
    themselves
    Drupal does it via a configuration
    schema
    

    View Slide

42. The devil is in the details
    

    View Slide

43. Entry points
    http://designhet.hu/- http://designweek.hu/
    http://p-rp.hu/hu - http ://p-rp.hu/en
    a single index.php is enough (no need for en/index.php)
    

    View Slide

44. Site aliases
    general.php
    'aliases' => [
    '@webHu' => getenv('HU_BASE_URL'),
    '@webEn' => getenv('EN_BASE_URL'),
    '@assetBaseUrl' => getenv('ASSET_BASE_URL'),
    '@assetBasePath' => getenv('ASSET_BASE_PATH'),
    ],
    .env
    HU_BASE_URL="https://designhet.hu/2018/"
    EN_BASE_URL="https://designweek.hu/2018/"
    ASSET_BASE_URL="https://designhet.hu/2018/"
    ASSET_BASE_PATH=“/home/asdf/2018/“
    
    Magyar
    English
    
    
    

    View Slide

45. Routes
    return [
    'hirek' => ['template' => 'news/index'],
    'esemenyek' => ['template' => 'events/index'],
    ];
    Section settings
    config/routes.php
    Route settings
    

    View Slide

46. Per-site templates
    “create a new sub-folder in your templates
    folder, named after your site's handle, and
    place the templates in there”
    

    View Slide

47. Per-site configuration
    not directly possible - general.php is loaded early in the bootstrap process
    Craft has no idea about the current site or language at the time
    workarounds: use environment vars, seperate index.php entry points, or arrays
    keyed by site handle
    

    View Slide

48. currentSite
    currentSite.name => English
    currentSite.handle => default
    currentSite.language => en-GB
    currentSite.baseUrl => @web/
    {{ alias(currentSite.baseUrl) }} => https://designhet.hu/
    

    View Slide

49. Twig
    craft.app.sites => all sites
    currentSite.group.sites => sites in current group
    entry.getSupportedSites => sites that entry is active for
    

    View Slide

50. Language switchers
    Site Switcher SEOMatic Language Redirector
    

    View Slide

51. View Slide

52. flagsarenotlanguages.com
    

    View Slide

53. View Slide

54. Names
    Zoltan Várady
    Várady Zoltán
    Várady Zoltánné
    Pablo Diego José Francisco de Paula Juan Nepomuceno María de los Remedios Cipriano
    de laSantísima Trinidad Ruiz y Picasso
    validation and sorting can be challenging
    https://www.w3.org/International/questions/qa-personal-names
    

    View Slide

55. Addresses
    Commerce Guys addressing library
    NSM Fields
    

    View Slide

56. Social Media
    Twitter
    Weibo
    VKontakte
    Tumblr
    

    View Slide

57. Challenges in Craft
    Configuration translation
    Structure entries always propagate
    Collaborative translation of core and plugins
    transifex, localize.drupal.org
    

    View Slide

58. Summary
    consider your audience
    what needs to be translated
    translation is not just words; see culture, colors, images…
    who are the translators, what is the workflow
    once you have this, use the tips given to map it onto a Craft site
    

    View Slide

59. Acknowledgements
    thanks to Gábor Hojtsy (@gaborhojtsy), multilingual initiative lead for Drupal 6
    and 7, for reviewing my draft
    

    View Slide

60. Find Me
    Zoltan Varady
    zoltan@farm.co.hu
    @drifteaur
    Farm Studio / https://farm.co.hu
    

    View Slide

61. Resources
    http://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design (BBC)
    http://www.flagsarenotlanguages.com/blog/page/3/
    https://docs.craftcms.com/v3/sites.html
    https://docs.craftcms.com/v3/localization.html
    https://www.yiiframework.com/doc/guide/2.0/en/tutorial-i18n
    https://intl.rmcreative.ru/
    https://www.w3.org/International/questions/qa-personal-names
    https://www.becomingadatascientist.com/2015/09/19/human-name-variations-in-databases/

    

    View Slide