Multi-Language Websites in ExpressionEngine

Originally presented at Engine Summit - The online ExpressionEngine Summit March, 30th 2010 by John Henry Donovan

Multi-Language Websitesin ExpressionEngine

Multi-Language Websites in ExpressionEngine by John Henry Donovan 2010 - @johnhenry_ie PAGE 2

IntroductionJohn Henry tackles this popular topic of multi-language websites

developed in ExpressionEngine. He discusses the practicalities of client

profiling and technical approaches. He shows what is possible out of the

box and how to extend functionality using some of the popular add-ons

available. Each approach and technique will hopefully deliver a wealth

of ideas and tips that should give you a head start when building your

first multi-lingual website in ExpressionEngine.

http://johnhenry.ie


Profiling

• What does your client want from a multi-language website?

• Who will be updating the website?

• Do they need the ability to add more languages?

• What type of domain are we working with?

• What type of multi-language website is needed?

Client Ability and needs

http://johnhenry.ie


ProfilingDeciding on the type of website is a very simple step which is often

forgotten when developing a multi-language website. There are in fact 2

different types of websites you can choose from.

VersionsMultiple translated versions

Translations1 version and multiple translations

Type of website

http://johnhenry.ie


imagessystem themes en es fr

Technical Approach

http://www.domain.com/es/index.php/template_group/template/

http://www.domain.com/en/index.php/template_group/template/

http://www.domain.com/fr/index.php/template_group/template/

Domain, Segments & Folders

http://johnhenry.ie


Technical Approach

esindex.php

path.php

$site_url = “http://www.domain.com/es/”;

$site_index = “”;

$site_404 = “”;

$global_vars = array(

“country_code” => “es”,

“language” => “spanish”

); // This array must be associative

Global Variables & path.php

http://johnhenry.ie


Technical Approach

Templates Tags

{exp:weblog:entries weblog=”{master_weblog}”}

<h2 class=”title”>{if country_code != “en”}{{country_code}_title}

{if:else}{title}{/if}</h2>

{{country_code}_summary}

{{country_code}_body}

{/exp:weblog:entries}

Add the country code to all of your custom fields en_body, es_body etc.

http://johnhenry.ie


Technical Approach

.htaccess

# rewrite rules

RewriteEngine On

# ditch index.php

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /es/index.php/$1 [L]

es

index.php path.php .htaccess

http://expressionengine.com/wiki/Remove_index.php_From_URLs/

http://johnhenry.ie


Structure (Third Party Add-on)

Structure is a different way to build ExpressionEngine sites.

It forgoes the current template_group/template setup

and creates‘static’ and ‘listing’ pages that are all editable

through a tree sitemap view.

http://buildwithstructure.com/

“

http://johnhenry.ie




Alternative Languages Setup

http://johnhenry.ie


Structure Tab Settings


http://www.mydomain.com/es/index.php

http://www.mydomain.com/es/about/

http://johnhenry.ie



{if segment_1 ‘es’ OR segment_1 ‘fr’}

{!-- START FROM SEGMENT 2 IF NOT DEFAULT LANGUAGE --}

{exp:structure:nav_sub start_from=’/{segment_1}/{segment_2}’}

{if:else}

{!-- START FROM SEGMENT 1 IF DEFAULT LANGUAGE --}

{exp:structure:nav_sub start_from=’/{segment_1}’}

{/if}

Example nav_sub code

http://johnhenry.ie


LG Multi Language Pro (Third Party Add-on)

Developed by Leevi Graham of Newism Web design & Development.

The add-on bundle was commissioned by myself to suit a particular

client’s needs and workflow. It will hopefully be released back into the

community by Leevi.

http://newism.com.au/

• Based on member group, hide unnecessary custom fields

• Needed a way of showing the status of a translation

• A phrase translator with separate plugin

Background & Design Brief

http://johnhenry.ie



Extension & Member Settings

http://johnhenry.ie



Custom Fields & Phrase Translator

http://johnhenry.ie



Publish & Edit

http://johnhenry.ie



Code Examples

{exp:lg_mlp:translate key=”phrase_key_1”}

{exp:weblog:entries weblog=”{weblog_name}” limit=”1”}

<h1>{if lg_lang == “en” || {lg_lang}_title ==’’}{title}

{if:else}{{lg_lang}_title}{/if}</h1>

{if {lg_lang}_body ==’’}

{en_body}

{if:else}

{{lg_lang}_body}

{/if}

{/exp:weblog:entries}

http://johnhenry.ie



Structure Mashup

http://johnhenry.ie


Localisation

Google Maps

<script src=”http://maps.google.com/maps?file=api&v=2&key=A

BQIAAAAOVcwajvU2DiR3d7wTOAC9RQz9Es_Zr-eU6lD2TDm4seUBz8DBBTcpZXs91l

DdbygrzYt7dFVZ_-4Tw&hl={country_code};”

type=”text/javascript”></script>

http://code.google.com/apis/maps/documentation/#Localization

http://johnhenry.ie


Localisation

jQuery UI

<script type=”text/javascript” src=”/inc/scripts/i18n/

ui.datepicker-{country_code}.js”></script>

<script type=”text/javascript”>

$(function() {

$(“#dob”).datepicker($.datepicker.regional[‘{country_code}’]);

});

</script>

http://johnhenry.ie


ExpressionEngine 2.0 and beyondNew publish layout feature is a translation gift in disguise!

Member Groups & Fields

http://johnhenry.ie



Publish Layout & Tabs

http://johnhenry.ie



Seperating Fields

http://johnhenry.ie


Resources

Add-onshttp://buildwithstructure.com/

http://expressionengine.com/wiki/Multi_language_site/

http://expressionengine.com/wiki/multi-lingual_site_-_an_easy_alternative/

http://expressionengine.com/wiki/Multi_language_site_alternative/

http://www.putyourlightson.net/projects/multi_language

http://publicdownloads.biberltd.com/ee_extensions/ext.bbr_langswitch.zip

http://leevigraham.com/cms-customisation/expressionengine/lg-multi-language/

Wiki Articles

http://johnhenry.ie


Go raibh maith agaibh

Multi-Language Websites in ExpressionEngine

Documents

Transcript of Multi-Language Websites in ExpressionEngine