Multi-Language Websites in ExpressionEngine

Multi-Language Websites
in ExpressionEngine

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

Introduction
John 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.

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

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

Profiling
Deciding 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.

Versions
Multiple translated versions

Translations
1 version and multiple translations

Type of website

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/

system themes images en es fr

Domain, Segments & Folders

Technical Approach
index.php
es
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

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

{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}

Templates Tags

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

es
index.php path.php .htaccess

# rewrite rules
RewriteEngine On

# ditch index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /es/index.php/$1 [L]

.htaccess

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/



Alternative Languages Setup

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

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

Structure Tab Settings


{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

LG Multi Language Pro (Third Party Add-on)
http://newism.com.au/

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.

• 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


Extension & Member Settings


Custom Fields & Phrase Translator


Publish & Edit

{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}

Code Examples


Structure Mashup

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

<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>

Google Maps

Localisation
<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>

jQuery UI

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

Member Groups & Fields


Publish Layout & Tabs


Seperating Fields

Resources
Wiki Articles
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/

Add-ons
http://buildwithstructure.com/
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/


Multi-Language Websites in ExpressionEngine

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Multi-Language Websites in ExpressionEngine

Similaire à Multi-Language Websites in ExpressionEngine (20)

Multi-Language Websites in ExpressionEngine