U4-10518 - Adding a ListView to the Media Picker

Created by Marc Goodson 10 Oct 2017, 08:18:44 Updated by Marc Goodson 10 Oct 2017, 10:31:11

This is a feature request...

Essentially I've had a site where picking images by what they look like isn't the fastest way to pick images for the editor, because the images all look the same, and the editor knows the filename but not really want the image looks like in an identity parade of similar images.

I've adapted the media picker in their site, with an additional toggle to turn the media picker into a List View - which works well for them - but it's not really a good 'Umbaco Package' as it would need to keep pace with ongoing improvements to the Media Picker.

I've recorded a video here, to explain, and see an example of what I mean.


The repo for what I done is here:


Essentially I've just created a new directive that wraps the umb-media-grid directive so that all that functionality is there, and you just toggle to this list bit:

<div class="umb-tree tooo-media-list" ng-show="showMediaList">
        <li ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy | orderBy:['-isFolder','name']">
            <div class="tooo-list-item">
                <ins ng-show="item.isFolder" ng-class={'-locked': item.selected}" ng-click="clickItemName(item, $event, $index)" class="icon-navigation-right"></ins>
                <i ng-show="item.selected" class="icon-check" style="color:green"></i> <i class="{{item.icon}}" ng-if="!item.thumbnail && item.extension != 'svg' && !item.selected"></i><i class="icon-picture" ng-if="item.thumbnail && !item.selected"></i> &nbsp; <span data-src="{{item.value.src}}" class="item-name">{{item.name}}</span> &nbsp; | &nbsp; <span class="muted small" style="font-size:0.8em">{{item.updateDate | date:'medium'}}</span>

but there may be much better and more fashionable ways of implementing this.

But that's the gist of it.

It may be a really niche thing.... but I'm suspecting it may be useful to editors generally?

Be great to hear what people think.


Priority: Normal

Type: Feature (request)

State: Submitted


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version:


Story Points: