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.;
- All language-specific CMS-bound elements
- All language-specific rich text elements
- 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;
- 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.
- 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.
