In my previous article I described improved image property (which is now a built in functionality of Episerver). Today I’d like to continue topic related with assets and show you media gallery. This is an extension for media component which is available on the right side of the edit mode. Using this feature Editor would be able to see more images comparing to standard list view.
media gallery

By default, images are displayed in a grid where every image is a separate row. When image names are short, then there is quite a lot of empty space.
media gallery empty space
I changed the image items style to be floated. Thanks to this there can be few images displayed in one row.


To display list of media files, Episerver use dgrid widget. This is a powerful library with a lot of features. One of the good parts is that even for a grid view, the items are styled using divs instead of table and table rows. That’s why it’s easy to change view from table to gallery. There is even an example on the dgrid site.

It also means that I didn’t have to copy or reuse the media component functionality. The whole javascript that I had to prepare was related with applying the classes on the grid. Editors will not lose multiselect, context menu, paging, etc. It’s still handled by the dgrid.
media gallery functionality
For the media types other than image I’m displaying empty thumbnail.
media gallery without thumbnails

Below you can see how it works.

using media gallery

Source code

The whole source code is just a few lines, that’s why I didn’t prepare the nuget, but only code snippets.

1) Javascript

2) Styles:

3) The initializer has to be registered in the module.config.

Media gallery with image property

There is one more interesting thing that it’s worth to be noticed. Because from latest Episerver version, the image property use media component to select images, after you use the code above, the image gallery will be also available inside the property 🙂

image selector with media gallery