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.

Tagging

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!

Hi Roger, you have written a great product. I'd like to offer some feedback based on the screen-shots and features that you mentioned for v3.

1. New buttons look great. However, consider future-proofing them to work in Tablets and phones. I often wish to show the albums to friends on my Android or iPad device and find it difficult to navigate. Consider using some sort of square and larger buttons.

2. I caution against using the gray background with black font. It is simply hard to see. Consider making the color scheme customizable.

3. I'm not sure if "Template-based rendering" means that it will offer different skin or theme support. Consider doing that which will allow designers to contribute different skins. Something like the way XBMC works.

4. Enable drag-and-drop uploading. I find it hard to have my family upload a large number of documents through FTP, Zip or using single file selection method. It would be nice if it were possible to upload how Gmail allows you to attach files to an email or how Wordpress allows uploads.

1. I am taking care to offer a great experience on smart phones and tablets.

2/3. Since the original post I have actually changed the theme to be white text on a dark background instead of dark on gray. And there will be support for skins; the only question is whether I will include a second one (white on dark) when it ships.

4. The upload control already supports drag and drop, but you have to use a browser that supports it. Chrome, Firefox and Safari do.

I have one more suggestion if you don't mind which is to implement some more modern way to browse the pictures. It would be great to enable navigating the photos by clicking on the right side or the left side of the picture especially when using a Tablet device.

Consider looking one of these JQuery photo browsing solutions: http://www.blogrammierer.de/jquery-die-23-besten-bildergalerie-plugins/

Personally I kinda like FancyBox but I suppose more than one solution could be implemented.

I'm thinking that it would be a great feature to have exquisite and distinguished photo presentation capability in Gallery Server Pro.

Love the changes you've described and/or shown... I was looking specifically for the tag (and as you termed it, 'virtual album') support... any chance the virtual albums will be hierarchical in nature as the standard albums are?

Have been working with this for about two weeks, some minor snags in trying to figure out a happy medium between iOS, BB OS, and various browers but I think I may have found a suitable replacement to ORB...

Roger will there be a preview release? Will you be looking for QA assistance. Not sure where you are at in your dev/release schedule. If there will be a preview release would be more than happy to kick the tires and provide feedback. Looking forward to the updated UI.

I'm still hammering away on implementing the UI rewrite and adding new features, but still lots to go. At this point I am hoping to have a preview release ready to go by the end of the year, but that may be difficult if my outside clients need me for a project. Rest assured that I am spending every spare minute on the release and will get something out to everyone as soon as I can.