In this article I’d like to show a custom implementation of image property. There are already few blog posts and code snippets about improved image editor, but most of them focus on showing thumbnail for selected image. In my code I refactored image selection dialog and replaced content tree with media component. It can be useful for Editors, because media component has many features that can improve their work.
image property

Standard image property

Episerver has built-in image property. To use it you should add UIHint.Image uihint on the property. Otherwise default ContentReference property will be used. When selecting an image, dialog window with content tree is displayed. This is the same tree as for ContentReference property, but filtered by images. The tree is useful for well structured media assets, but for folders with a lot of images inside there are two problems:

  • It doesn’t support paging – all children for selected folder are loaded in one request (and also all thumbnails)
  • You don’t see parent page for all the time – it’s hard to follow the structure.
    standard image property dialog

Also you can’t do all of the things that you can do in media component, like download the image or upload new image, create new folder, etc.

Image property with media component dialog

The Media component (available on the right side in edit mode) is divided into two sections. First section displays folders in a tree structure. Second is a flat list of images located under selected folder.
media component
Component has vertical orientation, so the main change that I had to made was to display images list next to the folder structure:
image property dialog

Now new editor with media component dialog looks like:
using image property


When directory contains many images then initially first items 25 are loaded. Rest will be queried when scrolling the list:
image property paging

Other features

Additionally Editors will get access to all actions from image context menu, like download or edit.
image property context menu
They can upload new images:
uploading images to image property
Or drop images directly from local computer to the property:
dnd image property

The only disadvantage comparing to the default property is that selected image is not preselected in the dialog window. Only parent folder of the image is selected. This is because of the infinite scroll. We don’t won’t to load to many images at start.

Adding image property to existing solution

I have no nuget for this extension. It’s just three files with few lines of code that has to be copied to the existing solution: EditorDescriptor, client widget and styles.

imiga property code structure

In the Editor I had to:

  • initialize media component
  • turn off multiselect which is available for media component and should not be for image property
  • enable OK button when image is selected
  • preselect parent directory when editing the image
  • set dialog title

Nothing more. Whole logic is in the media component. I’m just reading selected value.

Unfortunately styles doesn’t look nice. That because most of styles in media component are inline. To override them I had to use “!important” almost everywhere :(.

And then EditirDescriptor file. It’s only responsibility is to set client editing class to “alloy/editors/assets/Editor“.

To use new property add “Assets” UIHint on the ContentReference property:

Here you can download full source code.