Two years in the making, version 3.0 of Gallery Server Pro is finally here! This is a major release and includes a tremendous number of new features and updated styling. Among them:
- UI rewritten using modern HTML5/CSS3
- Resizable, dockable 3-pane layout
- New template engine lets you easily change the UI using only HTML/CSS skills
- Tagging support for media and albums
- Editable properties of media and albums
- Skinnable UI - ships with dark and light skins
- Two slide show modes - full screen and inline
- Looks great on any device - iOS, Android, Windows Phone, Mac, Linux, and Windows
- Improved video encoding
- Improved sorting
Download Gallery Server Pro 3.0
New UI using modern HTML5/CSS3
The default skin is a gorgeous light text on black background:
The new design 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.
The icons are modern, monochromatic, and match the trend we see with other applications and operating systems.
Clicking a thumbnail takes you to a larger version:
Properties about the image appear in the right pane. A user with edit rights can change any property the administrator has made editable. There are subject tags and people tags. Each tag is a clickable link that takes you to a virtual album containing those tagged items. Tags are automatically imported from the image file if present.
Running a slide show is one of the most common actions, so its icon is bigger than the rest to bring attention to it.
Skinnable UI - ships with dark and light skins
A light skin is also available for those of you wanting the more traditional dark text on light background:
Each skin consists of a set of images and CSS files. The main CSS file – gallery.css - can be edited in the admin area, letting you make quick and easy changes.
Resizable, dockable 3-pane layout
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.
UI templates
The most frequent request I’ve heard about Gallery Server Pro was an easier way to customize the UI. Previous versions were 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 center pane of the first 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.
Media templates
Version 3 also lets you customize the the exact HTML and javascript sent to a browser based on the media type and the client browser. For example, MP4 files are supported using native HTML5 syntax in many modern browsers but not Internet Explorer version 8 and earlier. We handle this by defining a default MP4 media template that specifies the HTML5 video tag:
Then we specify another media template for MP4 using the browser ID ie1to8. That will catch all IE versions up to 8. For them we send some HTML and javascript that uses the FlowPlayer Flash plug-in to render the video.
Gallery Server Pro ships with a default set of media templates that should work well for most of you, but feel free to tweak it as desired.
Two slide show modes - full screen and inline
Version 3 adds a full screen slide show capability, which is enabled by default.
If you wish to revert to the older, inline slide show, the setting is on the Media Objects – General page. You may want to use the inline slideshow if you are integrating the gallery into an existing web site and you want to let the user cycle through images without having the entire screen taken over.
Looks great on any device - iOS, Android, Windows Phone, Mac, Linux, and Windows
A lot of work has gone into making the gallery look fantastic regardless of the device you are using, from a 3.5-inch iPhone to a 27-inch desktop monitor. The gallery uses adaptive rendering to hide certain elements on small screens, while using clever CSS in other aspects to reflow the right pane underneath the media object instead of to the right. For example, here is how an image looks on an 4-inch Android phone:
If you scroll down, you see the rest of the page:
Improved video encoding
Version 2.6 was set to encode all videos to Flash video, but Flash is a dying animal and doesn’t work on most tablets and phones. So version 3 now encodes all video to H.264 MP4 by default, leading to much greater compatibility on devices.
As with previous versions, the encoder still requires the installation of the Gallery Server Pro Binary Pack, available as a free download, and must run in a web site with full trust. The trust level is reported on the landing page in the site admin area.
Improved 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:
Conclusion
I am so pleased to release this version. The UI template feature alone allows dramatic new capabilities for making the gallery fit your requirements. In the coming weeks I’ll be releasing an updated Admin Guide. Also in the works are additional blog posts getting into the details of some of these features. This is an exciting time for Gallery Server Pro!
No comments:
Post a Comment