Simple Galleries

How to create simple multiple photo galleries/albums

Peter Stokes · Thursday, July 05, 2018

I wanted to create a simple gallery section for an athletics website I've been working on recently.  The requirements were straightforward the user must be able to create multiple galleries or albums and each one must be able to include multiple images including folders.

For this, I have started off from a fresh install of Umbraco.

The first step is to create a document type for the individual gallery or album.  Create a new document type called Gallery and add an images tab with two properties as follows

  • Cover Image - media picker - this is the image shown on the galleries container page.
  • Images - media picker - the selection of images/folders to show in the gallery.

The settings are shown below:

 Next step is to create a document type for the galleries container.  For this, I have enabled list view and set the permissions to allow the gallery pages to be created as children.

This document type doesn't need any properties for this example.

Whilst in the settings section create a Master template and have the other document type templates inherit from it.

Onto to the content.  First up create a page called Galleries of type Galleries under the root.  Then create as many child pages as you have galleries/albums to show.  In this example, I have two galleries of my son Thomas, throwing the javelin and hurdling at a recent athletics competition.

Of course, at this point, none of this does anything so back into Visual Studio to write the views. I'm using the bootstrap starter template as a convenient simple starting point.

Master.cshtml looks like this:


Lastly Gallery.cshtml:

That's all that is required to create a very simple responsive galleries/albums page.  When running it looks like this:

In a more advanced usage, I have combined this with Cube Portfolio and Fancybox JavaScript plugins to create a better visual experience.

As always, if you found this post useful please share and comment.  If you think I may be of assistance to you or your company I am available for freelance work so feel free to get in touch.




Peter Stokes

Peter Stokes

All author posts