Meridium: Webbplatser för offentlig sektor

Part 3 - Create a public image gallery

Skrivet av Marcus Lindblom den 14 januari 2011 ImageVault, EPiServer 0 kommentarer

Getting started

To get started with the gallery we need to create a new web form and a new page type. In this case I name the new web form Gallery.aspx and the page type is just a plain copy of the page type named regular web page. On the new page type we need to add two new EPiServer properties, AlbumRoot of type ImageVaultAlbum and NrOfFiles of type Integer.

Before we add the markup and controls to the new page template copy the assembly ImageVault.EPiServer6 to the lib directory and add a reference in visual studio.

Markup and controls

First, ensure the AutoEventWireup attribute is set to false on the page directive, then register the UserControls we need for the local navigation etc. The end result should look like this:

Next, add the basic markup for local navigation and the main content area.

Create the album view

Now it's time to add the control for listing albums, for this we use a control from the assembly we added as a reference earlier in this post, the name of the control is IVAlbumTree and is commonly used to list a complete album tree from a specific album and down but in this case we can use it to create a list of albums.

Add the following markup to the template:

As you can see we add two links to the same target, the first contains a custom made album cover for the current album in the listing and the last one is a plain anchor that shows the name and the number of images.

Switch to the code behind and add the following method:

 What this does is, as long as we have one or more images in the album we take the first one and add height and with constraints. Then we just crop the image with the aspect ratio of 1 using the IVUrlBuilder and return the url to the cover art.

Next, we need to databind the AlbumControl and make it visible, the non visible part seems a bit strange at the moment but thing will be more clear ahead.


Finalize the album view

 Becuase this is a public gallery we need to add a new root album for our gallery where the anonymous users has the rights to view the contents of these albums. This can be done by right clicking the root album in ImageVault and select new album and give it a name. Switch to the administration tab and select the newly created album. Select set editor rights for album and add the group everyone, make sure the view checkbox is checked before saving using the recursive button. Next, we need to add view rights for the albums by clicking set view right for album and add the group called everyone, make sure you set a max width/height before clicking the recursive button.


Skriv kommentar

Ange kontrollordet i textfältet nedan.