Thursday, June 14, 2012

Announcing Gallery Server Pro 3.0

I’ve been hard at work these last several months on the next major version of GSP. Things are far enough along now that I feel comfortable releasing a few details of the great things to come in version 3, due later this year.

V3 is the most significant release to date, sporting a modern look and feel and adding the most requested features. Here is a partial list of what is coming:

  • UI completely rewritten using modern HTML5/CSS3
  • Tagging and editable metadata
  • Template-based rendering
  • Comment and rate media objects
  • Custom sorting
  • Adaptive rendering on mobile devices
  • ComponentArt controls replaced with jQuery widgets
  • Remove dependence on MS Ajax library and ScriptManager

I hope to get a few more things into the release, but I’d rather under promise and over deliver than the other way around.

In this post I’ll address the most significant and exciting changes.

Brand new UI

Here is the first public screenshot of the new UI. Click for a closer look.


The first thing you’ll notice is the new theme. Gone is the bright background, dated icons and unnecessary borders. In their place are a softer background, modern icons, and reduced window fluff. This is in keeping with the trend in UI design we see in iOS devices, the Win phone, and the upcoming Windows Metro.

Running a slide show is one of the most common actions, so its icon is bigger than the rest to bring attention to it.

Next is the three-pane layout. Each pane is resizable and dockable, and their availability and default visibility can be controlled by the administrator. By default, an album treeview appears in the left pane, the thumbnails or media object is in the middle, and details about the selected items are in the right pane. The contents of each pane are rendered from jsRender templates that are user-editable – more on this in the next section.

The contents of each pane create their own scrollbars when required. For example, you can scroll through a long list of thumbnail items while preserving easy access to the Actions menu and album treeview. In the current version, those scroll out of sight.

You can see this in the screenshot below, where I have scrolled about half way down. Also notice that the right pane is docked. The three vertical dots in the middle on the right are draggable to allow you to show the pane.



There is now support for custom tagging of media objects and albums. I have used many tagging systems over the years and have been frustrated by clunky interfaces that are difficult to use. It was critical to me that GSP should have world class tagging that is easy to use and requires as few clicks as possible.

Previous versions of GSP automatically imported tags created in other programs such as Windows Live Photo Gallery. Now you can edit those tags and create virtual albums that map to them. A virtual album is a new concept where an album is based on criteria rather than being mapped to a physical directory. When an album is created from one or more tags, its contents always reflect the latest set of matching tags. For example, I can create an album based on the tags ‘Grandma’ and ‘Birthday’, which will then contain an ever-growing collection of media objects, even when those items are stored in other albums.

Here is what the tag editing looks like:


When you start typing a tag, a dropdown appears with matches from all tags that have been previously used:


To reduce clutter and preserve privacy, only tags applied to objects you have permission to view are displayed. Use the keyboard or mouse to select the highlighted tag, which is then added to the list:


You can also apply tags to multiple items at once. On the thumbnail view, select the thumbnails you want to apply the tags to, then edit the tags the same way as described above. This is an easy way to apply tags to hundreds of items at once.

Template-based rendering

The most frequent request was an easier way to customize the UI. The existing architecture was heavily based on ASP.NET server controls hard coded into ASCX user controls. While .NET developers could download the source code to change things, it was a steep learning curve and, at any rate, not an option for anyone else.

For version 3, I completely replaced it with an architecture of flexible jsRender templates and Web.API callbacks. There are several templates covering the various areas of the screen (header, left pane, right pane, album view, media object view). These templates are managed on a new page in the site admin area:


In this screenshot, we are looking at the template for the album thumbnail view (shown in the second screenshot of this blog post). The template is 100% jsRender syntax, which is a client side HTML rendering system. If one wishes to execute javascript at the time the template is rendered, enter it on the JavaScript tab. The Target Albums tab lets you select which albums the template applies to, and the Preview tab lets you see the effect of your changes before you save it.

Let’s say you have an album containing documents. For these, a list view is a better presentation than a collection of thumbnails, so let’s create one. On the templates page, be sure the Album gallery item is selected, then click Copy as new. Give it the name List View, then enter the desired HTML:


Select the Target Albums tab and select the album that will use the template. Then save.


Now when you view the Documents album, you see a list view:


The template system brings great power for customizing your gallery. Here are a few ideas:

  • Edit the header template to insert your logo
  • Edit the media object template to move the next/previous arrows to the side
  • Add a shopping cart function
  • Add Facebook integration
  • Place ads in the left pane

Where are we at?

Much work remains to be done, and it will be several months before it is ready. I haven’t yet tackled the sorting, comment engine, and rating function, and I have many instances of the ComponentArt controls to replace with jQuery equivalents (mostly in the site admin area).

I am excited to get this in your hands as quickly as possible and am making every effort to stick to a self-imposed end of 2012 deadline. Thanks to your donations, I am able to work full time on this project. I can’t tell you how much I appreciate your financial support!