Friday, December 21, 2012

Public Preview of Gallery Server Pro 3.0

Christmas is the time for giving, so today I give you hands-on ability to play with Gallery Server Pro 3.0. Go to beta.galleryserverpro.com and poke around. You can log in to add, edit or delete items in the album named Public Playground (use account Demo with password demo). The major new features include:

  • UI completely rewritten using modern HTML5/CSS3
  • Skinned user interface
  • Tagging and editable metadata
  • Template-based rendering
  • User ratings of media objects
  • Full screen slide show
  • Flexible sorting
  • Adaptive rendering on mobile devices
  • Video and audio rendering improvements
  • ComponentArt controls replaced with jQuery widgets
  • Remove dependence on MS Ajax library and ScriptManager

Some of these features were discussed in this blog post, so you may want to check that out as well.

The code is not yet at beta status, so for now the website is the only place where you can play with the new version. I will be releasing a beta as soon as I can – hopefully within a few months, but external forces (like client contracts) may delay that.

A beautiful user interface

ss1

Take a look at the gorgeous new design. The default skin is light text on a dark background. This switch was inspired by user feedback where I learned that images are best viewed against an 18% neutral gray background. The background color I chose ended up a little darker than this to enhance the contrast against the text. A light skin is also available for those of you wanting the more traditional dark text on light background.

The icons are modern, monochromatic, and match the trend we see with other applications and operating systems.

The window is divided into three panes. Each pane is resizable and can be docked. 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 customizable by editing it’s template in the site admin area. Read more about the template feature in the other blog post.

Clicking the thumbnail image takes you to a web-optimized version of the image:

ss2

The toolbar above the image has less buttons than previous versions while providing more functionality. For example, the functionality of the two download buttons in the current version has been merged into the share button:

ss5

A new feature is the ability to get an URL directly to the media file rather than the web page. Right-click the Download file link to grab an URL you can copy into Facebook or any other place.

Information about the image is displayed in the right pane. When you are logged in with an account with edit permission, you can edit a property by clicking on it and typing. Then tab out to save the change. No need to go to a separate edit page.

ss3

A really handy feature is the ability to edit multiple items at once. On the thumbnail view, use the mouse to drag select the desired thumbnails or CTRL-click individual items, then edit the property the same way as described above. This is an easy way to edit hundreds of items at once.

You may not want certain properties to be editable. You have full control over which ones can be changed and how they are created. The metadata page in the site admin area has been overhauled to provide fine-grained control:

ss4

You can change the sort order, display name, whether it applies to albums or media objects, and whether a user can edit it.

Custom properties can be created as well. At the bottom of the default metadata list seen above is a set of twenty custom properties you can use for any purpose. For example, let’s say I have a gallery of items where I want to specify a color. An admin goes to the metadata page in the site admin area and specifies the new property. Here I name it Color, set the default value to Black, apply it to media objects (not albums), and make it editable to anyone with edit permission. Then I click Rebuild to have the custom property created for all my gallery items.

ss6

When the rebuild is finished, I see the property on all my media objects. If I wanted it to appear higher in the list, I can drag that property to the desired location in the admin settings.

ss7

Tagging and template rendering

I covered these topics pretty well in this blog post, so I refer you there.

User ratings

An often requested feature is the ability to rate items. That has now been implemented as one of the properties in the right pane. The default value for ratings is imported from the rating metadata in the file, if it exists. By default all users – even anonymous ones - can rate an item, but this can be adjusted in the admin settings.

ss8

Once you rate an item, the label changes to indicate it now shows your rating. The rating algorithm is smart enough to prevent multiple ratings by the same person from unfairly influencing the value. Items in an album can be sorted by rating so that the highest rated items are always shown first.

ss9

Full screen slide show

I have wanted to improve the slide show mechanism for a long time. I evaluated several jQuery plug-ins and finally found one that had almost all the features I wanted – supersized. Thanks to the beauty of open source, I forked the project on GitHub and made the necessary tweaks to make it work the way I dreamed a slide show should.

ss10

When you start a slide show, the image is shown as large as possible to take advantage of the available screen real estate. A thumbnail bar gives you a quick glance at all the images and offers an easy way to navigate to them. The title appears at the bottom, and you can exit with the X button.

Note that this is not a true full-screen slide show, since the browser frame is still visible. I have gone back and forth over whether I would want it truly full screen (and there are good reasons not to), but in the end I just used the default behavior of the plug-in. You can easily make it truly full-screen by making your browser full screen, usually by hitting F11.

Flexible sorting

The sorting function has been overhauled and vastly improved. You can now sort by any metadata tag in ascending or descending order. To prevent overwhelming the user, a default gallery lets you choose from five properties.

ss11

When anonymous users or logged on users with view-only permission sort an album, it applies only to them. This preference is stored in session for anonymous users and in the user’s profile for logged on users. When an editor changes a sort, they are applying the new sort to all future users.

To change which properties are available to the user for sorting, edit the album template. For example, to allow sorting by Author, go to the Templates page in the site admin area and select the album template and look for the section where the sort options are defined. Then add a row for the Author:

ss12

Notice that we specify data-id=’2’. That number identifies the Author metadata item and can be found on the Metadata screen in the site admin area. Refer to the earlier screen shot of that page to see what I mean. We also hard code the text ‘Author’ rather than specify a variable like the others. After saving the changes, we can now sort by Author:

ss13

You may be wondering about the resource references you see in the template, like {{:Resource:AbmSortByFileName}}. That is a language-agnostic way to specify the text.For example, if the French resource file is installed in the App_GlobalResources directory, users whose browser is set to French will receive the French equivalent of ‘Filename’. You are not required to follow this convention when editing the template. As you might imagine, it is easier to hard code the text than map it to a resource. Those of you who do want to map it to a resource may need to modify the source code to include any resources that aren’t included by default.

Smart phone and tablet support

A goal of version 3 was to make Gallery Server Pro work great on all devices, from a 320 pixel wide smart phone to an iPad to a traditional desktop. To that end, the new version makes use of CSS media queries and other techniques to provide for adaptive rendering on small screens. For example, the gallery automatically hides the treeview when there isn’t enough room on the screen. And the metadata is shown *below* the center pane rather than to the right of it.

I still have some work to go in this area. For example, the grab handles for the splitter bars aren’t clickable on the touch screens I’ve tested. I expect to have these issues resolved for the final release.

What about comments?

The ability to comment on items was a goal for version 3, but for a few reasons I am not including it in this version. The primary reason is time – I already blew my self-imposed deadline of December 2012 for the release, and adding a comment engine would postpone the release by a few weeks.

A second reason is that you can easily plug in a comment engine on your own. For example, you can add the Facebook comment widget by tweaking the template. This blog post described how to hack the the current version of Gallery Server Pro to include the widget. Now that we have templates it will be easier and without the drawbacks of the original approach.

I am still open to adding native comments in a future version. Your feedback will drive whether this is important.

Current status

Most of the browsing and editing functionality is finished, although there are undoubtedly bugs to be squashed. Please report any issues you find.

Most of the remaining work involves the admin pages where I need to replace the remaining ComponentArt controls with HTML equivalents and MS Ajax/ScriptManager with jQuery. I also want to build admin pages for the browser templates and CSS files, but I that may be cut if necessary.

I plan to release a feature-complete beta in the first half of 2013, with the exception of support for upgrades from previous versions. While you guys are hammering on the beta I can work on the upgrade stuff. There is a lot of work to do in this area because version 3 uses Entity Framework Code First Database Migrations, which will ultimately make future upgrades simpler and dramatically reduce the amount of work I have to do to support two database technologies (SQL Server and SQL Server CE). But to get there the upgrade needs to create new tables and migrate data from the old tables.