Gallery Server Pro 3.0 Beta Released!

I can’t tell you how excited I am to be releasing the beta of the groundbreaking 3.0 release of Gallery Server Pro. Two years in the making, it offers a beautiful user interface that is easy to use while giving administrators power and flexibility that no other digital asset management program offers.

Download Gallery Server Pro 3.0 Beta
Download Gallery Server Pro 3.0 Beta (source code)

See a demo of the beta here.

Be sure to add the Download Gallery Server Pro Binary Pack to get video/audio encoding, better thumbnail extraction, and more.

Here is a quick rundown of the features:

• UI completely rewritten using modern HTML5/CSS3
• Three-pane layout minimizes scrolling
• UI is rendered from customizable jsRender templates. Templates can target individual albums.
• Video now encoded to H.264 MP4 video by default, allowing video to render on iOS, Android, and Microsoft ecosystems
• Ability to tag media and albums, then create virtual albums matching those tags.
• Apply properties to media and albums (editable metadata)
• Full screen slide show
• Able to browse through search results as if they were an album
• Skinned user interface – ships with dark and light skins
• Rate media objects on a 5-star scale
• Flexible sorting
• Adaptive rendering for mobile devices and tablets

Under the hood, there are significant changes as well:

• New data provider model eliminates database-specific code and makes data upgrades significantly easier (EF Code First with Data Migrations)
• Removed ComponentArt dependency and replaced with jQuery widgets
• Removed dependence on MS Ajax library and ScriptManager
• Replaced ASMX web services with Web.API
• Simplified solution architecture to reduce number of projects from 11 to 6.
• JavaScript follows modern patterns such as the Revealing Prototype Pattern and Revealing Module Pattern, with no variables exposed to the global scope.

Over the next few weeks I will explore these features in additional blog posts, but you’ll find some good stuff in the posts where I announced the Public Preview of Gallery Server Pro 3.0 and the announcement of GSP 3.0.

Requirements

Version 3 requires .NET 4.5 and ASP.NET on the server. This is a change from 2.6, which required .NET 4.0. By default it uses an internal SQL CE database, but you’ll get faster performance with SQL Server 2005 or higher, including the free Express versions.

Clients need only a web browser, with no dependencies on any plug-ins except where necessary to play certain media files (for example, playing MP4 on Chrome and Firefox requires Flash). Current versions of all major browsers have been tested and work well.

Installation

NOTE: This is pre-release software and does not include support for upgrading earlier versions of GSP, nor is there any guarantee you will be able to migrate to the release version. The final version will, however, support upgrading from 2.6.

Installation is improved from previous versions, which used an install wizard to guide you through database creation and admin account setup. I simplified it to the point where no install wizard was needed. Follow these steps:

1. Extract the zip file to a directory. Configure the directory to run as an application in IIS under .NET 4.5. Make sure the IIS process identity has modify permissions to the App_Data and gs\mediaobjects directory.
2. SQL Server only: To use SQL Server, open web.config and comment out the SQL CE connection string named GalleryDb. Add a connection string for your SQL Server – you can uncomment the sample SQL Server connection string in the file. Be sure it is named GalleryDb. If the specified database does not exist, the gallery will attempt to create it when the app starts.
3. Open default.aspx in a web browser. The database will automatically be configured and seeded with default data. This step may take a minute or two, so be patient. The screen will look like this:
   
   
   
4. Click the link to create an admin account. Enter a username and password and you are all set!

Running from Source Code

You can open the source code in Visual Studio 2012, including the free Visual Studio Express 2012 for Web. You should be able to compile and run the gallery without any additional dependencies.

Known Issues & Removed Features

These are the known issues:

• Album treeview and splitter panes do not work in IE 8 and earlier
• The light skin is not finished. In fact, it is exactly like the dark skin with only the page background color changed. This is a good opportunity for a volunteer to jump in – all you need to do is edit the colors in gallery.css and pick new icons for the gs\skins\light\images folder.
• No support for upgrading from earlier versions
• The backup/restore feature is not functional.
• Concurrency error sometimes occurs when multiple users request an album at the same time

The following features existed in 2.6 but were removed in 3.0:

• The start and end dates for albums no longer exist in the UI. These tended to cause confusion and were not used by many people. However, the API still supports them so it is possible to modify the UI template to add them back.
• There are a couple places on the gallery settings and user settings pages where all user accounts were displayed in a drop down. Those dropdowns now include only those users who are site or gallery admins.
• Cannot re-extract metadata during a sync. This feature has been replaced by the metadata rebuilding options in the site admin metadata page.

Final Release & Reporting Issues

I hope to release the final version within a couple months. It will be driven by the time it takes to put the last few things in place (that is, implementing an upgrade algorithm and fixing the issues).

Please report any issues on the beta forum or e-mail me at roger *at* techinfosystems *dot* com. Remember that I can only fix problems that I know about.

New License Option & DotNetNuke Version

I expect to continue providing a free GPL version of GSP, just like now. But I have heard from many of you that you would like a commercial license option, so I am looking into making that possible. A commercial license will free you of the GPL restrictions, such as having to publicly provide the source code for any changes you make. In addition, I may offer guaranteed support options.

Adding a commercial license option will help me continue to be able to focus on improving GSP instead of taking on paying contracts that distract me from this project. I cannot stress enough how important your donations are to keeping this project alive. I thank you for your support and humbly request that you provide a contribution to the best of your ability.

Once the final release is out, I will focus on merging the code with the DotNetNuke branch of GSP. Due to the substantial modifications, this will likely take several weeks and be pretty difficult. But I am committed to making it happen.

Gallery Server Pro Binary Pack Updated

The Gallery Server Pro Binary Pack is a set of open source utilities that add some great features to your gallery:

• Video and audio encoding to web-optimized formats
• Thumbnail extraction for video and TXT, PDF, EPS, and PSD (Photoshop) files
• Metadata extraction for video and audio formats

These components are GhostScript, ImageMagick, and FFmpeg. Today I gathered the latest versions of them and packaged them together into an updated Gallery Server Pro Binary Pack.

Download the Gallery Server Pro Binary Pack.

Progressive loading for MP4

By far the most exciting new feature in this update is FFmpeg’s new support for creating an MP4 that will play in a browser as soon as a few seconds are buffered rather than waiting for the entire video to download. The benefit of this is that now GSP can create standard-compliant MP4 videos that start playing immediately. Because previous versions of FFmpeg forced the browser to download the entire video before beginning playback, GSP defaulted to creating a Flash Video (.flv), which *did* start playing immediately. But that created its own headaches, as the number of devices unable to run Flash have greatly increased over the last couple years.

The next version of GSP will default to creating H.264 MP4 video from most uploaded videos. But you don’t have to wait for 3.0. Install this binary pack into any 2.4 or later version of GSP and then update the Video & Audio page in site admin to include this FFmpeg argument string for MP4 video conversions:

-y -i "{SourceFilePath}" -b 384k -vcodec libx264 -flags +loop+mv4 -cmp 256 -partitions +parti4x4+parti8x8+partp4x4+partp8x8 -subq 6 -trellis 0 -refs 5 -bf 0 -coder 0 -me_range 16 -g 250 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -qmin 10 -qmax 51 -qdiff 4 -ac 1 -ar 16000 -r 13 -ab 32000 -movflags +faststart "{DestinationFilePath}"

You will also want to swap the positions of the MP4 and FLV rows so that FLV is *below* MP4, thus giving it a lower priority. The above string is close to what I expect to ship in v3. It has been carefully optimized to create a web-friendly H.264 MP4 video that works well on bandwidth-sensitive mobile devices as well as traditional computers. When you are done it will look like this:

With this change, all uploaded videos will be converted to MP4 as well as ones you sync when the ‘overwrite optimized’ option is enabled.

Remember that the Binary Pack requires full trust environments. You can tell if your site is running in full trust by looking it up on the Site Settings – General page.

Got a Windows tablet?

Update March 11, 2013: I was able to see a Surface for myself at Best Buy a couple days ago and discovered an issue. The album treeview was appearing at the top of the page with the rest of the content below it. This morning I updated the code again, but I still need someone to confirm that it’s fixed. Thanks!

Cut to the chase: I’m looking for someone with a Microsoft tablet (like a Surface) to look at the beta site and tell me whether you see a 3-pane layout like the first screenshot or a single pane like the second. Reply in the comments or send me an e-mail (roger *at* techinfosystems *dot* com). Read on for the full story.

Last week I found myself at a Microsoft store in Minneapolis with the family, so I took the opportunity to see how the beta site looked on a Surface. (Side note: I really should call it a CTP site, since the beta hasn’t yet been released. It’s very close, though.) The styling looked right, the MP4 videos played using the native HTML5 video tag, and the action was smooth and responsive. All great. But there was one problem. I couldn’t use my finger to grab the splitter bars to resize the left and right panes.

(This screenshot is from my desktop PC, not the Surface, but it looked the same.)

This is actually a problem with every touchscreen device I’ve tried, from Android to iOS to Windows Phone. The splitter is a jQuery plug-in, and it was designed to handle mouse clicks for resizing, not touch events. I’ve looked at the source and tried to make it touch-capable, but haven’t been successful. So, in an effort to stay on track with the release, I made the decision a while back to use javascript to detect a touchscreen and *not* use the splitter on those devices.

Instead of a three-pane view, touchscreen devices show the center pane full screen with the contents of the right pane appearing below the center content. For example, here is how an album looks on a touchscreen that is about 500 pixels wide:

That turns out to be pretty much the ideal behavior you would want on small touchscreens, since they don’t have sufficient width to justify panes anyway. But larger 10-inch tablets could benefit from the pane layout so the ultimate goal is still to make the splitter bar touch-capable so I can re-enable it on large tablets. But this will probably be after the v3 release.

Getting back to the Surface, I noticed that it was displaying the 3-pane layout just like a desktop browser. Something was wrong with my touchscreen detection javascript. After a little googling with bing, I learned it is very difficult to reliably detect a touch device. I had assumed that using Modernizr.touch would be fine, but IE10 returns false, even when run on a tablet.

After digging around, I found a different technique that supposedly works on MS tablets:

var isTouchScreen = !!('ontouchstart' in window) || !!navigator.msMaxTouchPoints;

I updated the beta site to use this code and confirmed it works as expected on the devices I have laying around, but I don’t have a MS tablet to test it on. So I ask you, Dear Reader, if you have a Microsoft tablet like a Surface, can you go to the beta site and tell me whether you see a 3-pane layout like the first screenshot or a single pane like the second. Thanks!

Need an iOS device for testing

I want the upcoming release of Gallery Server Pro 3.0 to work great on all devices, whether it be a smart phone, a tablet, or a 27-inch monitor. Touch screen devices are especially important to test, since the primary interaction is through touch rather than a keyboard and mouse. To this end, I need to perform real-world testing on each major type of device. I have a Google Nexus 7 and my wife has a Windows Phone, so I have the Android and Microsoft worlds covered at a basic level.

The glaring omission in my testing equipment is on the Apple side, especially their touch screen devices iPod, iPhone, and iPad. And so I humbly reach out to you to ask for your help. Are you able to donate an iOS device to the cause? Any device is better than nothing, but my preference is for a 10-inch iPad, since that may be the more common use case and my other devices are 3 1/2 inches and 7 inches, so I don’t have the 10-inch size covered.

Gallery Server Pro is free software released under the GPL, so I hope to find a kind soul who can return the favor and keep the Karma flowing. Perhaps you have a first generation iPad that is not getting much use. Or maybe you want to guarantee that GSP looks great on the new iPad with Retina display. Whatever the reason, your donation helps prove that open source works and will contribute to the long-term success of this project.

My address is in the footer of every page on www.galleryserverpro.com. As always, I thank you for your support!

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

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:

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:

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.

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:

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.

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.

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.

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.

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.

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.

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:

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:

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.

Gallery Server Pro now available on Windows Azure

A few days ago the folks at Microsoft made Gallery Server Pro available in Windows Azure Web Sites. This provides another option for getting a gallery up and running in minutes.

Brady Gaster posted a tutorial to show how easy it is to configure your gallery. Thanks, Brady.

Patch for IE10 released

Internet Explorer 10 drops support for visual filters and transitions. Gallery Server Pro uses filters – or more accurately, the third party ComponentArt library uses filters - to fade popup dialogs into and out of existence. As a result, in IE 10 a javascript error is thrown and the dialog is never shown. You’ll most likely notice this when you try to log in. Instead of the login window appearing, either nothing happens or you are informed of an error, depending on your browser settings.

This affects IE10 users in both desktop and Metro modes. There are two ways to fix it – pick the one that works best for you.

Set document mode to IE9

Open the web page that hosts the gallery in a text editor. In most installations this is default.aspx in the root directory. Look for this line near the top:

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />

Change it to this:

<meta content="IE=9,chrome=1" http-equiv="X-UA-Compatible" />

This tells IE to run the page in IE9 document mode instead of the latest IE10 mode. Filters are still available in IE9 mode, so the dialogs work again.

This is an easy fix that has the added benefit of potentially fixing other IE10 issues that haven’t yet surfaced.

Apply the patch

I updated the 2.6.1 source code to change the transition effect of all dialog controls from Fade to None, effectively stopping ComponentArt from attempting to user filters on the page. Several files were modified, so I assembled them into a patch file that you can copy over the existing files of your website. The patch is located on the download page.

The advantage of this fix is that the gallery continues to run in IE10 document mode. I’m not sure what practical effect this has, but I always prefer to run under the latest when possible.