Intro to multi-lingual sites in ExpressionEngine

Introduction to multi-lingual ExpressionEngine sites

Inleiding meertalige websites ExpressionEngine

introduction à la des sites multilingues ExpressionEngine

who am I?

•Scottish front-end developer •sometimes designer •I run ghijk (pronounced geek)
& 1 half of eethem.es with Ryan Downie •#eecms user since late 2007(ish) - using #eecms pretty much exclusively since last year background

overview •ﬁrst things ﬁrst •design •potential issues •approaches •localisation •other
add-ons •questions?

first things first •establish the need/requirement of your project •think
about the UX from YOUR customer’s point of view •will help define your technical approach: •single editor for all languages •multiple editor with 1 language responsibility •3rd party language translators •multiple versions of the site (MSM)

design •take space into consideration during design

•rtl needs special attention as often requires an additional template
for that language

•approach driven from customer needs •always be thinking about your
user •proper character encoding (UTF-8) for templates as well as for MySQL and MySQL connection from the start (hat tip to Republic Factory) technical

•#eecms control panel •language packs •nsm publish hints (ee garage)
•always be thinking about your user

•#eecms needs to know what your language is •conﬁg vars
in index.php or utilise segment vars •pro tip: use iso language codes

technical approaches

carl crawley

•sub folders at the root •index.php sets url for language
and deﬁnes country code •custom ﬁeld per channel to specify the language for the entry •utilise the search param passing in the country code •http://bit.ly/cwceecms carl crawley

structure •love it/loathe it? •in my experience, clients prefer it
•breaks the template_group/template #eecms scenario •language branches •use start_from parameter to control nav •use custom title ﬁeld to generate page title in current language

#eecms msm •if you want languages separate •have content editors
responsible for 1 language only

transcribe •create secondary languages within control panel •creates a related
entry for master language •tags to switch language •language variables per language to be used for snippets outside of entries - copyright etc. •compatible with structure

my approach •using a combo of •freebie •structure •matrix +
P&T ﬁeld pack •switchee •structure entries •low variables

•tells #eecms to ignore the language segments freebie

•structure does what structure does best

matrix + P&T ﬁeld pack

{exp:switchee variable = "{freebie_1}" parse="inward"} {case value="en|nl"} {exp:channel:entries require_entry="yes" {gv_param_disable_default}
} {if no_results}{redirect="404"}{/if} {cf_page_content search:cmf_language="={freebie_1}"} {cmf_content} {/cf_page_content} {/exp:channel:entries} {/case} {case default="Yes"} {redirect="404"} {/case} {/exp:switchee} switchee

•native structure nav: start_from param for main language •can inject
segment_1 language indicator using freebie structure entries

•multiple variable types •add variable sufﬁx to indicate language •arrange
into groups low variables

{lv_variable_name_{freebie_1}}

localisation •google maps <script type="text/javascript" src="http:// maps.googleapis.com/maps/api/js? sensor=false&language=ja">

localisation •jquery datepicker <script src="/ui/i18n/jquery.ui.datepicker-en-AU.js"></script> <script src="/ui/i18n/jquery.ui.datepicker-en-GB.js"></script> <script src="/ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>

localisation •html language codes we can do as <html lang=”en”>
<html lang=”nl”> <html lang=”es”> <html lang=”{freebie_1}”>

other approaches •biber multi-language •putyourlightson multi-language module •republic factory republic
variables •wiki

other useful add-ons •ed language switcher (jamie pittock @ erskine
design) •mx multi language labels (max lazar) •date/time language converter (santa claus wannabe)

summary •deﬁne editing/workﬂow requirements •choose strategy •always think about your
user •Ich bin ein Berliner

thanks •@stevieg_83 •[email protected] •www.ghijk.co.uk •questions?

Intro to multi-lingual sites in ExpressionEngine

Intro to multi-lingual sites in ExpressionEngine

Steven Grant

More Decks by Steven Grant

Other Decks in Technology

Featured

Transcript

Introduction to multi-lingual ExpressionEngine sites

Inleiding meertalige websites ExpressionEngine

introduction à la des sites multilingues ExpressionEngine

who am I?

•Scottish front-end developer •sometimes designer •I run ghijk (pronounced geek)

overview •ﬁrst things ﬁrst •design •potential issues •approaches •localisation •other

ﬁrst things ﬁrst •establish the need/requirement of your project •think

design •take space into consideration during design

•rtl needs special attention as often requires an additional template

•approach driven from customer needs •always be thinking about your

•#eecms control panel •language packs •nsm publish hints (ee garage)

•#eecms needs to know what your language is •conﬁg vars

technical approaches

carl crawley

•sub folders at the root •index.php sets url for language

structure •love it/loathe it? •in my experience, clients prefer it

#eecms msm •if you want languages separate •have content editors

transcribe •create secondary languages within control panel •creates a related

my approach •using a combo of •freebie •structure •matrix +

•tells #eecms to ignore the language segments freebie

•structure does what structure does best

matrix + P&T ﬁeld pack

{exp:switchee variable = "{freebie_1}" parse="inward"} {case value="en|nl"} {exp:channel:entries require_entry="yes" {gv_param_disable_default}

•native structure nav: start_from param for main language •can inject

•multiple variable types •add variable sufﬁx to indicate language •arrange

{lv_variable_name_{freebie_1}}

localisation •google maps <script type="text/javascript" src="http:// maps.googleapis.com/maps/api/js? sensor=false&language=ja">

localisation •jquery datepicker <script src="/ui/i18n/jquery.ui.datepicker-en-AU.js"></script> <script src="/ui/i18n/jquery.ui.datepicker-en-GB.js"></script> <script src="/ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>

localisation •html language codes we can do as <html lang=”en”>

other approaches •biber multi-language •putyourlightson multi-language module •republic factory republic

other useful add-ons •ed language switcher (jamie pittock @ erskine

summary •deﬁne editing/workﬂow requirements •choose strategy •always think about your

thanks •@stevieg_83 •[email protected] •www.ghijk.co.uk •questions?