DAMP Gallery

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:

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

Jeroen Breuer

Jeroen is on Twitter as