Umbraco Package - Media Picker with Preview

I started exploring Umbraco with a background of more than 2 years website development using Sitecore CMS. I've really fallen in love with Umbraco because it's as flexible as Sitecore but is more simple, fast and it's open source product! But there was one thing that was always annoying me during work with Umbraco: when you have selected image using Media Picker you can only see the name of the media item! It's so inconvenient. And I've decided to solve this problem by extending the standard media picker with a preview of the image selected. Meet the Media Picker with Preview data type for Umbraco v4.0.1 and higher - the simple but useful package that can impove usability of Umbraco Client.

How it looks

After you have selected an image using Media Picker With Preview the image preview is shown



What do you need to make it work is just follow the steps below:

(IMPORTANT: Package is for Umraco v4.0.1 and higher)

1. Download the Media Picker With Preview package from here.
2. Install dowloaded package in Umbraco Client (Developer -> Packages -> Install Local Packages)
3. And that's it! Now you can use new "Media Picker with Preview" data type.

Configuration

You can make some configuration of Media Picker with Preview.
The Maximum Width and Maximum Height of the preview area can be changed (Developer -> Data Types -> Media Picker with Preview). The default values are 500 for width and 200 for height.



Applying to the existing media fields

If you want to apply the Media Picker with Preview to the existing fields of Media Picker type you should change the "Database datatype" setting of Media Picker with Preview data type to "Integer" ("NText" is set by default) and then just change the data type property of your fields to Media Picker with Preview. All the selected images are selected after applying new datatype!

I hope this simple package will help everyone using Umbraco.

Source code is available here.

PS. Please leave you comments and feel free in your feedback.