Welcome to the navigation

Occaecat elit, adipisicing aliquip consequat, do voluptate tempor officia in commodo ex laborum, nulla sed fugiat reprehenderit dolore qui et consectetur exercitation velit ut ad. Excepteur consequat, do tempor minim eu reprehenderit dolore exercitation amet, sunt ex ad mollit dolor nostrud non ullamco sed ipsum deserunt cupidatat ea nulla elit

Yeah, this will be replaced... But please enjoy the search!

Translating Optimizely CMS 12 UI components

Optimizely CMS 12 have been out for a while now, but still some elements haven't been properly translated resulting in a GUI defaulting to english. While that may be fine with many of us I still do have some customers who refuse to see the benefits of learning a bit of english. Anyways, it is good practice to implement translations of elements in all web sites which would include the Optimizely CMS GUI.

Setting up and configuring translation in CMS 12

The official documentation (Localize the user interface (optimizely.com)) doesn't really cover this and as usual my approach is how to obtain a result with as little configuration and overhead as possible, leaving us with the following steps

  1. Adding a folder structure
  2. Adding the appropriate XML-language files configuring these for output
  3. Simple configuration in Startup.cs
  4. Figuring out which properties to manipulate in the CMS UI
  5. Add the elements to the custom language XML-file
  6. Done

Adding a folder structure

Modify this according to your needs, this will work in any setup and even in Docker. I do recommend having the XML-files stored locally because I love IOPS. I use the following structure in the root of the project: 

/Resources/LanguageFiles

Adding language files

In the LanguageFiles folder create the files you may need. It is common practise to split them in one file per language but this isn't necessary.

When added remember to enable copy always for (all) the language files, in Visual Studio this can be done in the properties window (see image) or modify your csproj file accordingly

 

The csproj file

<ItemGroup>
	<None Update="Resources\LanguageFiles\Episerver_SV.xml">
		<CopyToOutputDirectory>Always</CopyToOutputDirectory>
	</None>
</ItemGroup>

The base XML-file, Episerver_SV.xml in my case

<?xml version="1.0" encoding="utf-8" ?>
<languages>
	<language name="Svenska" id="sv">
	</language>
</languages>

Configuring Startup.cs

For this usage we only need to tell the CMS which localization provider to use and where it can find the files.

services.AddLocalizationProvider<FileXmlLocalizationProvider, NameValueCollection>(p =>
{
    p[FileXmlLocalizationProvider.PhysicalPathKey] = $"{_webHostingEnvironment.ContentRootPath}/Resources/LanguageFiles/";
});

Which properties to set in the CMS UI

This can be a bit tricky to find out, there is no guidance in exploring the DOM in CMS so we need to utilize a decompiler to see which paths Optimizely is setting in their default implementations. As far as I can tell resources can be found in the following binaries

  • EPiServer.Cms.Shell.UI.dll
  • EPiServer.Cms.TinyMce.dll
  • EPiServer.Cms.UI.Admin.dll (Image editor)
  • EPiServer.Cms.UI.VisitorGroups.dll
  • EPiServer.Cms.Shell.UI.dll
  • EPiServer.Shell.dll
  • EPiServer.Shell.UI.dll
  • EPiServer.UI.dll

I use JetBrains dotPeek to decompile and extract the default language files. However typically you are looking for the files in EPiServer.Cms.Shell.UI and EPiServer.UI, these would be named 

  • EPiServer.Cms.Shell.EmbeddedLangFiles.OnlineCenter_EN.xml
  • EPiServer.EmbeddedLangFiles.language_EN.xml

To figure out the properties search the files (the english ones) for any word you need to translate, in this example the "Select Image" text needs to be translated as well as "Drop content here or". 

These could be found in the file EPiServer.Cms.Shell.EmbeddedLangFiles.OnlineCenter_EN.xml with the paths episerver > cms > widget > contentselector > button > selectimage and episerver > cms > widget > contentselectorplugandplay > text.

 

Adding the elements to our custom language XML-file

<?xml version="1.0" encoding="utf-8" ?>
<languages>
  <language name="Svenska" id="sv">
    <episerver>
      <cms>
        <widget>
          <contentselector>
            <button>
              <selectimage>Välj bild</selectimage>
              <selectmedia>Välj media</selectmedia>
              <selectvideo>Välj video</selectvideo>
            </button>
          </contentselector>
          <contentselectorplugandplay>
            <text>Släpp innehåll här eller</text>
          </contentselectorplugandplay>
        </widget>
      </cms>
    </episerver>
  </language>
</languages>

Resulting in

All done!