Creating a simple image gallery with EPiServer

Posted on April 3, 2010 by Frederik Vig in EPiServer

If you have visited sites like Smashing Magazine chances are high that you’ve seen articles with titles like “40 most used jQuery plugins”, or something similar to that. I find articles like that to be great for inspiration. You usually have a section for galleries/slideshows/carousels etc, I thought I’d implement one of those plugins in EPiServer, just to show you have simple it is.

jQuery GalleryView

GalleryView is a jQuery plugin for displaying a gallery of images. The plugin is easy to use and setup, simply download the files and include them in your project.

jQuery GalleryView files in Visual Studio

Dynamic Content

We’re going to create a dynamic content plugin that our editors can use to add a gallery to a page. Start by creating a new class and give it the name Gallery.cs. Make sure it implements the IDynamicContent interface.

I’m using the custom property Folder Browser Property from EPiCode to let the editor choose a root folder for the images. I’ve also added a user control for displaying the result to the users of the site.

The complete class looks like this.

using EPiServer.Core;
using EPiServer.DynamicContent;
using Meridium.FolderBrowserProperty.Web.UI.PropertyControls;
 
namespace EPiServer.Templates.Public.Plugins
{
    public class Gallery : IDynamicContent
    {
        protected PropertyFolderBrowser MediaFolder; 
 
        public Gallery()
        {
            MediaFolder = new PropertyFolderBrowser {Name = "Media folder"};
        }
 
        public System.Web.UI.Control GetControl(PageBase hostPage)
        {
            var gallery = hostPage.LoadControl("~/Templates/Public/Units/Gallery.ascx") as Units.Gallery;
 
            if (gallery == null)
            {
                return null;
            }
 
            gallery.Root = this.State;
 
            return gallery;
        }
 
        public PropertyDataCollection Properties
        {
            get
            {
                return new PropertyDataCollection {MediaFolder};
            }
        }
 
        public string Render(PageBase hostPage)
        {
            return string.Empty;
        }
 
        public bool RendersWithControl
        {
            get { return true; }
        }
 
        public string State
        {
            get
            {
                return MediaFolder.ToString();
            }
            set
            {
                MediaFolder.ParseToSelf(value);
            }
        }
    }
}

After you register it in episerver.config (web.config for CMS 5), you’ll be able to choose it in your sites WYSIWYG-editor.

<dynamicContent>
    <controls>
      ...
      <add description="Gallery" name="Gallery" type="EPiServer.Templates.Public.Plugins.Gallery, EPiServer.Templates.Public" />
    </controls>
</dynamicContent>

Gallery Dynamic Content in EPiServer Edit Mode

Gallery View Mode

The user control that displays the actual gallery to the users of the site.

<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="Gallery.ascx.cs" Inherits="EPiServer.Templates.Public.Units.Gallery" %>
<link href="/galleryview-2.1.1/galleryview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/galleryview-2.1.1/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/galleryview-2.1.1/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="/galleryview-2.1.1/jquery.galleryview-2.1.1.js" type="text/javascript"></script>
 
<asp:Repeater runat="server" ID="rptGallery">
    <HeaderTemplate>
        <ul class="gallery">
    </HeaderTemplate>
    <ItemTemplate>
    <%# SetImage(Container.DataItem) %>
 
        <li><img src="<%# Image.VirtualPath %>" alt="<%# Image.Summary.Title %>" />
            <div class="panel-overlay">
				<h3><a href="<%= Image.Summary.Dictionary["Website"] %>"><%= Image.Summary.Author %></a></h3>
				<p><%# Image.Summary.Dictionary["Description"] %></p>
			</div>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>
 
<script type="text/javascript">
    $('.gallery').galleryView({
        panel_width: 800,
        panel_height: 300,
        frame_width: 100,
        frame_height: 100
    });
</script>
using System;
using EPiServer.Web.Hosting;
 
namespace EPiServer.Templates.Public.Units
{
    public partial class Gallery : UserControlBase
    {
        public string Root
        {
            get; set;
        }
 
        protected UnifiedFile Image
        {
            get; private set;
        }
 
        protected string SetImage(object dataItem)
        {
            this.Image = dataItem as UnifiedFile;
 
            return string.Empty;
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
 
            if (string.IsNullOrEmpty(this.Root))
            {
                return;
            }
 
            var rootFolder = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetDirectory(this.Root) as UnifiedDirectory;
 
            if (rootFolder == null)
            {
                return;
            }
 
            this.rptGallery.DataSource = rootFolder.Files;
            this.rptGallery.DataBind();
        }
    }
}

Result

The gallery in EPiServer View Mode

Note on Folder Browser Property

I’ve added an EPiServer CMS 6 version of Folder Browser Property to EPiCode.

Usage

  1. SVN Checkout https://www.coderesort.com/svn/epicode/Meridium.FolderBrowserProperty/6.x/ (requires registration on EPiCode)
  2. Open up the project in Visual Studio and build
  3. Copy Meridium.FolderBrowserProperty.dll to your sites bin folder (remember to add a reference in your Visual Studio project as well)
  4. Create the folders “<Site root>\Meridium\FolderBrowserProperty\Dialogs”, and copy the file FolderBrowserDialog.aspx into it

Hope this helps.

Related Posts: