I'm Jeroen and I work as a developer at Digibiz and Tribal Internet Solutions. At CodeGarden 12 I showed how I use DAMP in my own projects. I explained how everything works, but I couldn't share any code because I used a customer project as an example. Because Umbraco now supports MVC, I thought it was about time to create a website which shows how you can use DAMP in the new view templates. That why I'm introducing the DAMP gallery. It's a complete website that can be used as an example. It runs on SQL CE so everything should work out of the box.

You can view a live example here.

You can setup this example in a few easy steps:

1. Download the zip at the bottom of this article.
2. Unzip the folder.
3. Open the Visual Studio project.
4. Run the website from within Visual Studio.
5. Umbraco login user: admin - password: damp

The website shows how DAMP can be used for an image and video gallery. It also has a little MNTP bonus, just to show how that can be used in 4.11. It has paging and on the gallery 1 page I also use Matt Brailsford's altTemplate paging example. I even extended it a little to support deeplinking.

The DAMP gallery uses multiple packages which are all related to the media section:

• Digibiz Advanced Media Picker: It uses a version which is newer than DAMP 2.0. Change Set 2aff58e42dca from CodePlex is used. This version supports SQL CE and has better performance.
• DAMP Property Editor Value Converter: Makes it easier to use DAMP in Razor.
• Create Crops: Ensures that all crops are available.
• Track Media: Each time an image or a video is clicked it will be tracked by Google Analytics.
• Multiple File Upload: A custom version which supports custom media types. The uploader introduced in 4.9 is disabled because it doesn't support custom media types.
• uTube: Only used for the uTube Single Video Picker datatype on the YouTube custom media type.
• Restricted Upload: Used on the Video custom media type so only mp4 files can be uploaded.

Because of the DAMP Property Editor Value Converter package the Razor code looks very clean. This is the complete Razor file to show the gallery on the gallery 1 page. This example is dynamic, but there is also a strongly typed example in the website source code.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    dynamic i = CurrentPage.images;
    if (i.Count > 0)
    {
        var p = Helper.GetPager(6, i.Count);
        <ul class="photogallery">
            @foreach (dynamic d in i.Skip(p.CurrentPage * p.ItemsPerPage).Take(p.ItemsPerPage))
            {
                <li>
                    <a class="popup" rel="gallery" href="@d.Url">
                        <img src="@d.Crops.gallery" alt="@d.Alt"/>
                    </a>
                </li>
            }
        </ul>
        <div class="pagination">
            @foreach (var number in p.Pages)
            {
                if (number - 1 != p.CurrentPage)
                {
                    <a href="?page=@number">@number</a>
                }
                else
                {
                    <span>@number</span>
                }
            }
        </div>
    }
}

The video below also shows how you can use the DAMP Gallery.

I'd like to thank Ralph van Vugt who helped me with the HTML.

Download the DAMP Gallery source code