Why we use Craft CMS: dead simple multi-language support
We’re big fans of Craft CMS here at The Apartment, and recently used it for a client project that needed the ability to support multiple different languages, dynamically.
Craft makes it easy to build websites that are simple for your customers to use and your developers. Unlike Wordpress, it excels at getting out of the way until you need it — when you first sign in you’ll probably think it’s quite empty, but that’s on purpose.
Craft has incredibly flexible fields that can be applied to pages as you need them. Rather than dictating what a post should look like, Craft lets you define the fields, descriptions and how they’ll be laid out in the backend.
One field of particular note is the matrix field, which lets your users add custom blocks in a post and arrange a layout themselves, based on what you’ve defined. We’ll cover this in more depth in a future post — today, we want to talk about languages.
There’s plenty of multi-language CMS’ out there, but Craft excels at making it easy for both the client to enter their translations, and for us to build out support for each language without too much extra overhead.
On the front-facing side for the client, this means nothing more than a button to switch which language is being entered into the CMS, and allows the backend to speak whichever language they prefer.
There is, of course, a cost for that convenience: Craft has a number of pricing plans. But you’ll need their most expensive license — Pro at $299 per site — for the multi-language feature to be enabled. It’s a small price to pay, given how much easier it is to configure compared to something like Wordpress.
When building a Craft multi-language site there’s a special setup you’ll need to do in order to avoid some pain down the road. I spent a lot of time reading Craft’s documentation on how to set it up, but there’s some extra steps listed below that help later on.
1: Choose which language you want
Naturally, the first thing you’ll want to do is choose which languages your CMS will speak. It’s easiest if you do this from the very beginning of development, by adding them at Settings → Locales.
When you’re defining fields from now on for your pages, you can choose whether they’re translatable or not. Sometimes you might not want your users to translate something, so you can just uncheck a box to avoid it being offered to them.
2: Set up a web directory for your languages
Now for the nitty gritty: you’ll need to set up your web directory for each language. For example, you may want your CMS to work in German and English — for each language, you need to add a directory like /en/ and /de/ with an index.php and .htaccess, so Craft knows how to handle those requests. The documentation is a great help here.
You’ll then need to define those site URLs in Craft’s general.php file, to let it know how to route those requests. Since you’ll likely have a development site on your own machine and the public site itself eventually, I recommend setting this up to handle this at this point:
<?php
return array (
'*' => array(
'omitScriptNameInUrls' => true
),
'.dev' => array(
'devMode' => true,
'siteUrl' => array(
'en' => '/en/',
'da' => '/da/',
),
'rootUrl' => 'http://192.168.2.50/',
'currentLgg' => array(
'da' => 'da',
'en_us' => 'en'
),
'environmentVariables' => array(
'siteUrl' => 'http://192.168.2.50/',
'basePath' => '/Users/Owen/Projects/apartment/web'
)
),
'theapartment.co' => array(
'devMode' => false,
'siteUrl' => array(
'en' => '/en/',
'da' => '/da/',
),
'currentLgg' => array(
'da' => 'da',
'en_us' => 'en'
),
'environmentVariables' => array(
'siteUrl' => 'http://staging.theapartment.co/',
'basePath' => '/var/www/web'
)
)
);If you’ve read the Craft documentation, you might notice this is a little different than theirs. We’re defining a ‘basePath’ environment variable to handle image uploads for us, so the CMS always knows where to put them, regardless of which language directory is being used.
basePath should be the absolute URL of where your images are stored on the server, not relative to the current directory.
Once you’ve set this up, log in to the admin panel, head to Settings → Assets → Images and put {basePath} into the box, along with the subdirectory that your images are actually stored in. That’ll output the environment variable regardless of where the site’s hosted, so you don’t need to mess around with configuration files constantly.
3: Visual language switcher
Now, to the language switcher itself! You’ll need something that actually lets your visitors change language on the site. I defined it in a separate file, so it can be included anywhere in templates and keeps the overall markup clean.
This file checks what language is selected right now, as well as the languages that are available. It highlights the currently selected one sets the URLs up right — as for the markup, it’s configured for Bootstrap 3 using the built-in dropdown menus.
Now your site can speak multiple languages — as many as you like — and your CMS users can enter translations easily to offer the right language for your visitors. All you need to do now to define it in your templates is this:
{% include ‘language_switch.html’ %}Boom — your site is bilingual!
4: Add some content!
All you need to do now is enter some content that targets another language. When your clients are editing posts, it’s as easy as choosing which language to target on the right, and whether or not other languages are enabled for that page.
If you disable a particular language, Craft will default to showing your base language, so you don’t need to fill in everything at once.
In the coming weeks we’ll write more about why we ❤️ Craft, but the multi language support is one of our favorite features given it’s so straightforward.
We’ve loved using Craft for our recent project with Michelle Carlslund. If you have any questions or want help your CMS, get in touch with us.
