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
2. Zoltan Varady @drifteaur Novi Sad • Budapest Farm Studio farm.co.hu
3. There are many kinds of multilingual sites
4. Business cases
8. 1:1 translation Same structure, same content, just translated
12. Different content Different audiences; or not enough resources to translate everything
15. Your experiences?
16. Language is not culture
17. Color is language
20. Scripts can have cultural and political overtones
22. Translation Workflows
23. Who will do the translation? Internally, by the content team By the developers Outsourced to a translation agency via an API? Automated translation
24. Translation workflow Do you need to publish all languages at once? Proofreading / approval Translation management tools

25. Let’s get crafty
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…)
27. Content and fields
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
29. Not So Fancy Fancy Shoes en-GB Shirts en-GB Pants en-GB Shoes en-GB Shirts en-GB Pants en-GB
30. Craft 3 only cares about sites
31. Craft 3 only cares about sites Content table Sites table
32. Multi-valued fields Matrix Categories, tags Related entries Assets but not Tables (use Matrix or Super Table instead if you need it)
33. pizza dough tomatoes mozzarella ham pineapple pizzatészta paradicsom mozzarella kolbász pizza dough tomatoes mozzarella pizzatészta paradicsom mozzarella
35. The power of t()
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 نابْح ُ ص باح ْ صَأ بِحاص
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.ª
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
39. https://intl.rmcreative.ru/
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
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
42. The devil is in the details
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)
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/“ <ul class="language"> <li><a href="{{ alias('@webHu') }}">Magyar</a></li> <li><a href="{{ alias('@webEn') }}">English</a></li> </ul> <script src="{{ alias('@assetBaseUrl') }}/js/jquery-3.3.1.min.js"></script>
45. Routes return [ 'hirek' => ['template' => 'news/index'], 'esemenyek' => ['template' => 'events/index'], ]; Section settings config/routes.php Route settings
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”
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
48. currentSite currentSite.name => English currentSite.handle => default currentSite.language => en-GB currentSite.baseUrl => @web/ {{ alias(currentSite.baseUrl) }} => https://designhet.hu/
49. Twig craft.app.sites => all sites currentSite.group.sites => sites in current group entry.getSupportedSites => sites that entry is active for
50. Language switchers Site Switcher SEOMatic Language Redirector
52. flagsarenotlanguages.com
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
55. Addresses Commerce Guys addressing library NSM Fields
56. Social Media Twitter Weibo VKontakte Tumblr
57. Challenges in Craft Configuration translation Structure entries always propagate Collaborative translation of core and plugins transifex, localize.drupal.org
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
59. Acknowledgements thanks to Gábor Hojtsy (@gaborhojtsy), multilingual initiative lead for Drupal 6 and 7, for reviewing my draft
60. Find Me Zoltan Varady zoltan@farm.co.hu @drifteaur Farm Studio / https://farm.co.hu
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/