Welcome to the navigation

Ea velit sunt voluptate do amet, eu nisi dolor aliquip cupidatat reprehenderit in exercitation adipisicing et labore nulla non dolor in cillum ut ut commodo. In fugiat do sit deserunt occaecat est ut adipisicing ad dolore commodo nostrud officia exercitation non culpa nulla dolore dolor consequat, ut laboris veniam, sunt

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

Setting up the ImageEditor in Optimizely CMS 12

Setting up certain configurations on Opimizely CMS 12 differs quite a bit from prior versions of (Episerver CMS 11 and older). Here's a small guide on how to read and use the documentation from Optimizely regarding the ImageEditor.

Getting started

The first thing to check is the official documentation, Get started with Optimizely Content Management System (CMS). Scroll down in the left menu until you find Configure > CMSUI Section

Configuration sections

A configuration section in Optimizely CMS would mean anything that lives below the appsettings root level in the EPiServer element

{
  "EPiServer": {
    "Configuration section": {}
  }
}

When using the CmsUI section this would mean for us to use it like this

{
  "EPiServer": {
    "CmsUI": {}
  }
}

Using Options

There are several options available for CmsUI, the typical pattern is 

  • AnyOptionchild of a Configuration section, the type is always an object. The Option part of the name can be stripped, both ImageEditor and ImageEditorOption would work.
  • Settingchild of an option, the type varies. The setting name must be set as in the documentation.
  • Element, a child of a setting, the type is typically an array. The element is never written and is instead set as a nameless array with objects.

Using the CmsUI ImageEditor option

In our case setting up size presets in the image editor would look like this

// appsettings.json
{
  "EPiServer": {
    "CmsUI": {
      "ImageEditor": {
        "SizePresets": [
          {
            "Name": "Standardbild 960 x 540",
            "Width": "960",
            "Height": "540"
          },
          {
            "Name": "Stor bild 1980 x 1024",
            "Width": "1980",
            "Height": "1024"
          }
        ]
      },
      "Upload": {
        "FileSizeLimit": "2097152"
      }
    }
  }
}

Also visible in the gui