Translating UI elements in Optimizely CMS 12

When Optimizely CMS is part of your website, most of your content will probably be translated using the localization features of the CMS. However, a few global texts – like the text on the search button might be practical to handle outside the CMS.

The documentation explains how you can do this using AddEmbeddedLocalization(), but some important details are missing.

On this blog, I have two set of language files with translations, like this.

Be aware that your files must have the .xml extensions and can not contain any more dots! Then this will not work.

• Site_EN.xml does work!
• Site.EN.xml does not work!

In order to use embedded localization, you must add something like this to your project file. The xml files will then be embedded in the resulting dll file.

<ItemGroup>
    <EmbeddedResource Include="Resources\Translations\**\*" />
</ItemGroup>

Add the following to ConfigureServices() in Startup.cs.

services.AddEmbeddedLocalization<Startup>()

The footer on this website is translated using this feature, and this is how it's defined in the xml files.

Site_EN.xml

<?xml version="1.0" encoding="utf-8"?>
<languages>
  <language name="English" id="en">
    <shared>
      <proudlyrunby>Proudly powered by Optimizely Content Cloud</proudlyrunby>
    </shared>
  </language>
</languages>

Site_NO.xml

<?xml version="1.0" encoding="utf-8"?>
<languages>
  <language name="Norsk" id="no">
    <shared>
      <proudlyrunby>Stolt drevet av Optimizely Content Cloud</proudlyrunby>
    </shared>
  </language>
</languages>

 

And then the translated text is included in the razor view like this.

<div class="footer row pt-2">
    <p class="mx-auto d-none d-sm-block">@Html.Translate("/shared/proudlyrunby") @version</p>
</div>

An alternative to embedded localization, is using an xml file localization provider. You can read about that approach in Eric Herlitz's blog post.