Thursday, May 15, 2014

Gallery Server Pro 3.2 Released

Today we released 3.2, containing a number of new features and bug fixes.

  • New UI templates for tag/people trees and tag/people clouds (Enterprise edition)
  • View recently added/top rated media (Enterprise edition)
  • RSS/Atom support (Enterprise edition)
  • Drag and drop sorting
  • Faster loading of large albums
  • Improved touchscreen support
  • Metadata editing in virtual albums
  • Improved upload page includes new thumbnail preview
  • Latest version of libraries: Entity Framework 6.1, Plupload, jQuery, jQuery UI, jsTree, jsRender, Web.API, and more

This release is a free upgrade to 3.X license holders. To upgrade, copy the files from the upgrade package over your existing web application and merge any web.config changes into the updated web.config file. More details, including help for new installations and upgrades for other scenarios are in the Administrator’s Guide.

The demos have been updated to 3.2, so check out the new features.

New UI templates (Enterprise edition)

Enterprise license holders get a lot of love in this release. Let’s start with the new UI templates that give you a high-level view of your tags and people metadata. Two new left pane templates are automatically added when your gallery is running the Enterprise edition. One displays popular tags and people in a cloud; the other displays them in a tree.



These templates are not activated by default. To start using one of them, go to the UI Templates page, select the LeftPane gallery item, then choose one of the new templates from the dropdown list:


Select the root album in the Target Albums tab and save. Then choose the Default template, de-select the root album, and save. Now the tags and people should appear in the left pane.

There are a number of ways to customize the appearance of the tree and cloud widgets. Take a look at this section on the JavaScript tab of the tag and people trees template:


These widgets work by sending an ajax request to the server, then displaying the results. Notice the query sting parameters:

top – Returns the top X items.

sortBy – Specify ‘count’ to sort by the frequency and ‘value’ to sort by the tag value.

sortAscending – Indicates the sort direction; true for ascending and false for descending.

expanded – Indicates whether the tree is expanded by default. true or false

Feel free to edit these values to suit your taste.

View recently added/top rated media (Enterprise edition)

This has long been a popular request. There is now support for viewing recently added and top rated media items. All left pane templates are updated to include two new links:


These links take you to a virtual album you can treat as if it were a physical album. That is, you can view a slide show, sort, edit the properties, or download the media files. As with the tags, the URL can be edited to give you the exact behavior you want. For example, the recently added link looks like this: default.aspx?latest=50. Change the number to increase or decrease the quantity of media items.

The top rated link looks like this: default.aspx?rating=highest&top=50. Edit the top parameter to change the number of matching items. The rating parameter can be any of these values: lowest, none, or a number from 0 to 5. For example, to see the first 25 items that have no rating, use this URL: default.aspx?rating=none&top=25. You can change the URL in the left pane UI template.

RSS/Atom support (Enterprise edition)

I’ve become a big fan of RSS feeds the last few years. I use Feedly to aggregate a number of RSS feeds into one convenient location that I check each day to see what’s new. Now Gallery Server Pro offers RSS and atom feeds for any album, including virtual ones.

Every album now shows a feed link to the left of the title:


You can subscribe to the feed using any reader you like. One practical use case for this feature is to easily keep an eye on items being uploaded to the gallery by your users. Any new items appear as unread in your feed reader, giving you a chance to review the media.

Drag and drop sorting

Version 3.0 introduced an improved sort architecture that lets you sort an album by any property such as title, date added, date picture taken, etc. Unfortunately, this replaced the previous sort feature where one can drag and drop thumbnails into the desired location. We heard from many of you that you missed this feature, so 3.2 adds it back as a new sort option.

When you are logged in under an account with edit album permissions, a new custom sort option is available:


When an album has the custom sort option enabled, the thumbnails become draggable:


You can even drag thumbnails on a touchscreen device. When you drop the thumbnail, its new position is instantly saved to the server.

Note that custom sorting is not available for virtual albums such as search results and recently added items, since the contents are retrieved dynamically and are constantly changing.

Faster loading of large albums

One of the pain points for some users has been waiting for the web page to render when an album contains hundreds or thousands of media items. It takes a lot of JavaScript horsepower to build the DOM for very large albums. It’s most noticeable in browsers with slow JavaScript engines such as older versions of IE. Even when you use the paging feature to display a small number of items, that first rendering still can take a long time.

This has been dramatically improved in 3.2. Previously, the thumbnails for the entire album were constructed in the DOM, then hidden from view except for those on the current page. Now, when album paging is turned on, only the current page is rendered in the DOM.

Look at these test results for an album with 2000 images and page size set to 25. The time shows how long it takes from the initial page request until the page is fully rendered. They were all done on a PC running Windows 8.1.

Browser GSP 3.1 GSP 3.2 % improvement
IE 11 36 sec. 3 sec. 92%
Firefox 27 110 sec. 2.5 sec. 98%
Chrome 33 12 sec. 2 sec. 84%
Safari 1020 sec. 2 sec. 99.8%
Opera 26 sec. 4 sec. 85%

Improved touchscreen support

Version 3 introduced the 3-pane layout, where each pane is separated by a splitter bar that can be resized or docked. Unfortunately, the splitter jQuery widget was not touch-compatible, meaning one couldn’t use a finger to move the splitter pane. Therefore, we made the decision to render the page using a single pane on all touchscreen devices.

For 3.2, we revisited this issue and figured out a way to use touchscreen events for moving the splitter bar. That meant we could restore the 3-pane view to touchscreen devices. But 3 panes are not appropriate on small devices such as mobile phones, so the logic goes like this:

  • When the device width is less than 750 pixels, hide the left pane, show the center pane full width and float the right pane to the bottom of the screen.
  • When the device width is between 750 px and 1500 px, show the three panes. To make it easier to grab the splitter bar with a finger, double it’s width to 12 pixels.
  • Treat touchscreens larger than 1500 px wide the same as regular monitors. That is, show the 3 panes and render the splitter bar at its normal 6 px width.

We also worked hard to support the ability to select album thumbnails and the drag and drop sorting function with your finger.

Metadata editing in virtual albums

A virtual album is one which shows media items collected from one or more albums. For example, a virtual album is shown whenever one performs a search or looks at the recently added or highest rated items. Since permissions can be applied to individual albums, a virtual album can theoretically show some media the current user has permission to edit along with others the user can’t. Versions prior to 3.2 played it safe and didn’t let one edit the properties of any item when the user was in a virtual album.

Version 3.2 now checks the security permission of the logged on user for each selected media object. If the user has permission to edit that item, she can edit the properties just as if she were viewing the item within its physical album.


Improved upload page includes new thumbnail preview

The add objects page incorporates an updated version of Plupload that shows thumbnails of image files you select for uploading. In addition, Plupload has been re-architected from the ground up for improved reliability and performance.


If you prefer the older-style list view, select the button near the top right.

Updated libraries

Gallery Server Pro uses a number of third party libraries. Each one was updated to the latest available version. We already mentioned Plupload. Another notable update was jsTree, which went from a pre-release 1.0 version to 3.0.0. This was a major rewrite by its creator Ivan Bozhanov, who dramatically improved the API and performance of the tree, especially when there are a lot of nodes. His changes required substantial work on our part to get compatible with the new API, but it was worth it. We love jsTree so much that we donated another $100 to Ivan for doing such a great job.

Below is a list of the upgraded components.

Name Version in 3.1 Now updated to
Json.Net 5.0.6 6.0.3
EntityFramework 5.0.0 6.1.0
Microsoft HTTP Client Libraries  2.2.13 2.2.18
Microsoft ASP.NET Web API 2.1 Client Libraries 4.0.30506.0 5.1.2
Microsoft ASP.NET Web API 2.1 Core Libraries 4.0.30506.0 5.1.2
Microsoft ASP.NET Web API 2.1 Web Host 4.0.30506.0 5.1.2
Microsoft ASP.NET Web API 2.1 4.0.30506.0 5.1.2
Microsoft BCL Build Components 1.0.10 1.0.13
Microsoft BCL Portability Pack 1.1.3 1.1.6
Microsoft ASP.NET Universal Providers Core Libraries 1.2 2.0.1
Microsoft ASP.NET Universal Providers for SQL Compact Edition 1.1 2.0.0
EntityFramwork.SqlServerCompact 4.3.6 6.1.0
Plupload 1.5.7 2.1.2
jsRender 1.0.0-beta pre v1.0 commit counter 53
jsTree 1.0-rc3 3.0.0


Sundar said...


The 3.2 version sleek and improved performance. I noticed some videos have buffering issues. I'll continue to test further and let you know.


Marcwolf said...

Thank you SO much for re-introducing drag and drop sorting. When that went I really lost control of how my galleries are organized.