[TUTORIAL] Full Multi Language Site - Easy to set-up and to use!

[memetican (Michael Wells)]

I had some difficulties with the rich text part of the solution, so I’ve found a different approach that is working better for me in cases where whole elements need to be language-swapped.

e.g.;

1. All language-specific CMS-bound elements
2. All language-specific rich text elements
3. Any localized images or artwork

SOLUTION

In brief, I’m adding an autolang custom attribute to any elements that are language-specific, which specifies the 2-letter iso language code, e.g. autolang="zh", and then showing or hiding those elements accordingly.

For example, I might have…

<img src="english-photo.jpg" autolang="en" />
<img src="japanese-photo.jpg" autolang="jp" />

In the applyLang() function, I’ve added a small snippet to the end which hides every element with an autolang custom attribute, and then shows only the ones for the current language.

// show or hide elements with autolang specifier 
$('*[autolang]').hide();
$('*[autolang="' + user_lang + '"]').show();

This is working great for me because CMS-binding is very tidy, non-localized elements are unaffected, and I don’t need to muck with classes ( IMO; using classes as js selectors makes styling more complicated in Webflow ).

These two solutions are working great together in my project;

1. For lightweight text items like headings and labels, use the [[en]] style indications. Avoids element duplication and is easier to work with in the designer.
2. For heavier or more complex items, like rich text elements, CMS-bound elements, and image elements, use the autolang custom attribute approach.

HOW TO USE

Replace your applyLang() function with this variation;

var applyLang = function(){
    globalDict.forEach(function(v){
        $(v.elm).html(v.dict[user_lang]);
    });

    // show or hide elements with autolang specifier 
    $('*[autolang]').hide();
    $('*[autolang="' + user_lang + '"]').show();
}

For any elements you want as language-specific, select the element. For compound elements like Rich Text, make sure to select the whole element…

And then add an autolang custom attribute, specifying the language that the element represents.