Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Multilingual Sites in Craft 3

Zoltan Varady
September 27, 2018

Multilingual Sites in Craft 3

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

Zoltan Varady

September 27, 2018
Tweet

Other Decks in Programming

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
    [email protected]
    @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