Welcome to the navigation

Ut id veniam, ullamco incididunt aute non sunt ut commodo dolore nisi velit cillum officia quis deserunt eiusmod duis proident, ad ea sit nostrud laboris. Proident, sit nostrud qui excepteur ipsum deserunt eiusmod non cillum in tempor incididunt reprehenderit dolor veniam, dolor pariatur, dolore irure mollit consectetur velit laborum, in

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