Preview of Gallery Server Pro 2.3

There are  number of exciting new features coming in GSP 2.3 that expand on the already robust enterprise-level capabilities in Gallery Server Pro. Your feedback has been the driving force in telling me what areas I need to focus on. Please continue using the forum to let me what can be done better, what isn't working, and - if you are so inclined - what you really like!

I am targeting a release date of May 31 for 2.3. Nearly all the features and bug fixes are complete. I am now in the testing phase and working on the Upgrade Wizard. There are a few database changes which require a  SQL script, and I will make sure the Upgrade Wizard handles it all for you. This takes time but I am committed to making the path to 2.3 as robust and painless as possible.

New features in 2.3:

• Faster, lighter pages - Page size has been reduced up to 25% and the number of HTTP requests reduced up to 25%.
• Album ownership.
• Self-registration.
• User albums - An album can be automatically created and assigned to each user. The user owns that album with customizable permissions for managing its contents. This is great for community sites!
• Paging of thumbnail images in an album.
• Download multiple media objects in a ZIP file.
• Option to automatically delete the high resolution original image after upload, preserving only the thumbnail and compressed version.
• Allow recursive deletion of the high resolution images from an album.
• Clicking the download button for an image downloads the original image, not the compressed image.
• Error logging.
• Option to make an album private when it is created.
• Support SSL encryption of e-mails.
• Remove dependence on modifying global.asax when integrating into an existing ASP.NET application.
• Rounded corners of thumbnails and other objects (unfortunately, IE does not support this).
• Navigate back and forth using the left and right arrow keys instead of Enter and Shift-Enter.
• Allow a gallery to be built from a read-only directory.
• Support for .divx files.
• Play .avi and .wvx videos in the browser instead of creating a hyperlink.
• Show .pdf files in an inline frame.
• Show a hyperlink to easily open MS Word files instead of displaying the message "Your browser cannot display this media object...".
• Add support for .rtf files.
• Allow deleting albums in addition to media objects on the Delete objects page.
• Use of jQuery for advanced client effects.
• Almost all settings in galleryservepro.config now exposed in the Admin Site Settings area.
• Several other usability enhancements...

Many of these features are controlled by new switches that allow you to revert to the previous behavior if desired. So if you don't want to allow self-registration, just don't enable that feature.

In addition, there are several dozen bug fixes that improve reliability, performance, and the user experience.

I will give a brief overview of a few of the most significant changes.

Album ownership

Administrators can assign any user as the owner of an album. By default, owners can add, edit, and delete objects within the album. The permissions given to owners are defined in a template role named _Album Owner Template and can be easily changed using the Manage Roles page in the Site Admin area.

You can assign the owner on the Edit album info dialog window, as seen here:

In previous version of GSP you could accomplish the same thing, but you first had to create a role with the desired permissions, attach it to the album, and then add the user. This required going into the Site Admin area and navigating between two different pages. The new technique is cleaner and simpler. Behind the scenes, GSP is still creating that role for you, but now you don't have to worry about the details.

Self registration and user albums

You can allow users to create their own accounts and optionally to automatically create an album that each user owns. When enabled, a create account link appears in the top right that takes the user to a registration wizard:

 

There are a number of configuration options, which are accessible on a new page in the Site Admin area called User Settings:

 

Rounded corners and downloading objects in ZIP

For 2.3, I broke one of my cardinal rules of web development: target the web standards, not particular browsers. This is generally good advice, but there is great support for adding rounded corners in almost all major browsers using proprietary CSS tags. Rounded corners are so simple to implement, and look so nice, that I just had to do it. Almost every HTML element that previously had square corners now gets a beautiful rounded treatment handled by the browser, not a bunch of image slices. Check it out:

Unfortunately, Internet Explorer, even IE8, does not support rounded corners. This omission in IE8 was a big disappointment, but those of you using other browsers (Firefox, Safari, Chrome) will see elegant shapes in your gallery.

In addition, there is a button for downloading the objects in an album in a ZIP file. Clicking the button takes you to a page where you can select one or more media objects or child albums in the current album. The objects you select are zipped up and sent to the user in a convenient ZIP file.

 

Album paging

When an album contains hundreds of objects, it can take a long time to load and become difficult to navigate. There is a new paging option so that only a small number of objects are loaded at a time. Here you can see what happens when the page size is set to eight:

Clicking the next or previous button initiates a lightweight AJAX callback to load the next page. Once a page is loaded, it is stored in the local cache for lightning-quick response. You can change the page size to your preference, including whether you want the paging controls at the top, bottom, or top *and* bottom.

 

Error logging

A new table now stores any errors for later review by administrators. In addition, more information is collected and the e-mail has a more pleasant formatting.

 

Improved PDF handling

PDF documents are now shown in an inline frame. How cool is that!

 

These are just a few of the many improvements! As always, thank you for your donations - you are what keeps this project alive. Peace.

(Nearly) perfect compatibility with Internet Explorer 8

Internet Explorer 8 was released last Thursday, so I installed it and crossed my fingers as I fired up Gallery Server Pro. What would it look like? There has been a lot of talk about how IE8 defaults to a standards-compatible mode that breaks a lot of existing web sites. But I was hopeful since I built GSP to be XHTML 1.0 Strict compliant, which should provide maximum forward compatibility.

And that proved to be true. All of the HTML I wrote worked perfectly in IE8. Woo HOO! This proves the power of web standards and why it is important to develop against the standards instead of against one or two specific browsers. I am also pleased that Microsoft defaults to standards mode - that should make future upgrades go smoothly.

I wish the story ended here. Did you notice the qualification in what I wrote: "All of the HTML *I wrote* worked perfectly in IE8." GSP uses a set of UI widgets from ComponentArt for several complex features like uploading, the menu, toolbar, grid, and pop-up dialogs. I found three cases where the controls were not behaving well in IE8. The good news is that the issues are minor and do not break the page functionality, so you may be happy just living with them until they are resolved in the next release. You can also click the IE7-compatibility button next to the address bar in IE8 to re-render the page according to IE7 standards. I'll describe each one, along with instructions for how you can fix them right away.

Left aligned toolbar

The toolbar above the media object is left-aligned rather than centered:

This issue is caused by ComponentArt code outputting slightly different HTML when it senses IE 5.5 and higher. Presumably they did this as a workaround to some issue. This is a perfect example of how special-casing code for certain browsers can be problematic, and should be avoided when possible.

Fortunately, the fix is simple. Add Style="display:block;" to the Toolbar definition in gs\controls\mediaobjectview.ascx, like this:

<ComponentArt:ToolBar ID="tbMediaObjectActions" runat="server" Style="display:block;" ... />

Extra thick lines in Actions menu

The line break that separates items in the Actions menu appears about 15 pixels high instead of 1 pixel, as seen here:

This is caused by IE8 making space for the invisible icon in the left column. The fix is to use CSS to remove the icon from the page layout. Open gs\styles\ca_styles.css and look for this line:

.gsp_mnu0MenuBreak { background-image: url(../images/componentart/menu/break_bg.gif); width: 100%; height: 1px; }

Add this line immediately after it:

.gsp_mnu0MenuBreak img { display: none; }

Pop-up dialog windows appearing in the top left corner rather than center of window

There are several places where a dialog window pops up in the center of the screen, but in IE8 it appears in the top left corner. This is caused by a bug in the algorithm for finding the center of the screen when the AnimationType property of the Dialog control is set to "Live". The fix is to change this property to "Outline" on each page where it is defined. Look for the text AnimationType="Live" and change it to AnimationType="Outline" in these files:

gs\controls\mediaobjectview.ascx
gs\pages\admin\manageroles.ascx
gs\pages\admin\manageusers.ascx (two places)
gs\pages\task\synchronize.ascx

There are also two places in source code where the AnimationType property is set to Live. These define the dialog window for the edit album info popup. Look for this line:

dgEditAlbum.AnimationType = DialogAnimationType.Live

and change it to:

dgEditAlbum.AnimationType = DialogAnimationType.Outline

The change is needed in these two files (note that this change can only be done in the source code version of GSP and you must recompile after the change):

gs\controls\albumheader.ascx.cs
gs\controls\mediaobjectview.ascx.cs

Any other issues?

I did not do an exhaustive test of IE8, so let me know if you notice any other issue. Thanks!

Adding a gallery to your web site

One of the great new features in Gallery Server Pro 2.2 is that all the functionality is contained within a single ASP.NET user control. This makes it easy to integrate into your current ASP.NET application. But did you know you can add a gallery to any web site regardless of the technology? I'll tell you how, but first let me show you how easy it is to add a gallery to your ASP.NET app.

Integrating into an existing ASP.NET application

There are three basic steps:

1. Copy the Gallery Server Pro files into your web site. Most of them can be placed in a directory of your choosing. A few, such as the SQLite database, .resx resource file, and the compiled dll's, go into pre-defined ASP.NET directories, such as App_Data, App_GlobalResources, and bin.
2. Configure web.config to define a few settings required by Gallery Server Pro and add one line of code to the Application_Start event in global.asax.
3. Choose one of your web pages to host the gallery. For example, you might create a new .aspx page that implements your current master page. Add the following to the top of the page:

<%@ Register TagPrefix="gsp" Namespace="GalleryServerPro.Web" Assembly="GalleryServerPro.Web" %>

At the location in the page where you want the gallery to appear, add:

<gsp:Gallery ID="gallery1" runat="server" />

That's it! Fire up the page and you will notice Gallery Server Pro appears in the location you defined. All the functionality that exists, such as logging on, searching, and the task and admin pages, are at your fingertips. One user control that rules it all...

Your app can be written in VB.NET, C#, or any other .NET supported language. You can integrate with your existing membership database or Active Directory users. The world is your oyster.

Integrate into non-ASP.NET web sites

Your gallery is not limited to only ASP.NET web sites. No matter what technology your web site uses, whether it is a set of static .html pages or a dynamic PHP or java site, you can add a Gallery Server Pro gallery. All it takes is a little sleight of hand. The trick is to install Gallery Server Pro as an ASP.NET application on an internet-accessible server that satisfies the technology requirements (primarily that it can run ASP.NET). It could be the same server hosting your web site or another one hosted by a different company. Just get it installed somewhere. Then, in one of the pages of your existing site, add an <iframe> tag to point to the gallery like this:

<iframe id="gs" src="http://www.site.com/gallery/" frameborder="0" style="width:100%;height:100%;border:none;" />

Replace "http://www.site.com/gallery/" with the correct URL.

The host page will load the gallery into the iframe element. To your users, it appears integrated with the rest of the web site. For example, below is a screenshot where Gallery Server Pro is integrated into a Classic ASP web site.

Want to see it in action? Check out the Fort Atkinson Area Chamber of Commerce photo gallery. Notice the web site is a Classic ASP site and the gallery is contained within an <iframe> tag. Two very different technologies, but they seamlessly work together.

There are full step-by-step instructions for both of these techniques, along with additional tips and tricks, in the Admin Guide. Have fun!

Cool Tip: Skinning the media player

Gallery Server Pro uses Silverlight to provide a rich user experience for all media types that Silverlight currently supports. In Silverlight 2, that includes Windows Media Video (.wmv), Windows Media Audio (.wma), MP3 audio (.mp3), Advanced Streaming Format (.asf), and Advanced Stream Redirector (.asx) files. Future versions of Silverlight are expected to add even more.

There are several skins available that allow you to change the appearance and function of the player control. By default, the AudioGray skin is for audio and Professional is used for video:

 

Gallery Server Pro includes eight different skins. A skin is a .xaml file and is stored in the gs\skins\mediaplayer directory. Here is a quick preview of all the skins:

Basic (Basic.xaml)

Lightweight .xaml file. Does not include any visible controls. Start/pause a video by clicking it with the mouse.

Simple (Simple.xaml)

Does not include borders just like the Basic skin, but a control panel appears when the mouse hovers over the video.

Classic (Classic.xaml)

Console (Console.xaml)

 

Expression (Expression.xaml)
This skin uses a semi-transparent control panel that appears when you hover over the video, as seen below. Normally, the controls are hidden.

Futuristic (Futuristic.xaml)

Professional (Professional.xaml)

AudioGray (AudioGray.xaml)

This skin is used for audio-only media.

 

You can change to a different skin by editing the galleryserverpro.config file. For the adventurous you can even modify an existing skin or create your own by using any text editor or a XAML editor like Microsoft Expression Blend.

For more information about changing skins in your gallery, check out the document: How To: Skinning the Silverlight Media Player

Updated Administrator's Guide

I finished updating the Administrator's Guide to reflect the changes in Gallery Server Pro 2.2. This includes new sections for the upgrade wizard and integrating a gallery into your existing web site. I also proof read the rest of the document line by line, expanding topics, changing wording, clarifying sentences, and fixing typos to make things as clear as possible. One of the key benefits of Gallery Server Pro is rock solid documentation, and this guide is the best release to date! My eyes have gone buggy but you are worth it. :-)

If you find that the guide does not cover a topic you want to learn about, let me know. And, as always, please tell me about any errors or typos you find.

Gallery Server Pro Version 2.2.3286 Released

Today I am pleased to release version 2.2 of Gallery Server Pro. It introduces a totally revamped UI architecture that makes it much easier for developers to add a gallery into an existing ASP.NET web application. Another significant feature is support for storing media files on UNC shares, including NAS devices. There is a new Upgrade Wizard, and a handful of other new features and bug fixes, too. The database schema has not changed, so upgrading is as simple as replacing the web files and using the new Upgrade Wizard to import your web.config and galleryserverpro.config settings. Over the coming days I will update the Administrator's Guide. Until then refer to the 2.2 QuickStart Guide.

Simplified integration

It has always been easy to deploy GSP as a stand-alone web application, but getting it to work inside your existing web site has been difficult. That's because until 2.2, GSP consisted of a collection of master pages and .aspx pages that use an ASP.NET theme. There was no easy way to incorporate this functionality into your site. The most common approach has been to install GSP as its own web application and then use an iframe in one of your pages to create the illusion of integration. But this is not true integration, and some hosting companies make managing more than one application difficult.

So for 2.2, I built a new UI architecture based on the concept of an ASP.NET user control. No more themes, no more master pages. There is just a single web page - default.aspx - that contains a single user control. All the functionality you are used to - browsing albums and images and managing your gallery - occur within this user control. Read my previous blog post to see an example of adding a gallery into a web site.

The developers reading this might be imagining one giant user control with 100,000 lines of code that is a maintenance nightmare. Relax, don't worry. The single user control I mentioned - named Gallery - is actually a container control that loads the appropriate child user control based on the query string in the URL. The .aspx pages that existed in the previous version are recreated as .ascx controls in 2.2. For the most part I copied and pasted the code. There is a nice separation of presentation and logic in the UI layer that should make it easy to wrap your head around.

Upgrade wizard

A pain point in upgrading GSP to newer versions has been trying to incorporate your existing user settings in galleryserverpro.config with the updated HTML templates and settings in the new version. I addressed this by building a new Upgrade Wizard that automatically imports common settings from your previous web.config and galleryserverpro.config files. It even runs in medium trust.

This is the first page of the wizard:

Network support

Thanks to a code contribution from UncleJohnsBand, GSP now supports storing media files on UNC shares in addition to the web server's hard drive. This includes other computers, external hard drives, and even network-attached storage (NAS) devices.

Note that the IIS application pool identity must have file share permission and NTFS permission to the network location. The default user - Network Service - does not have network permissions and will not work. To get the web server to read and write to a UNC share, you must modify the application pool identity in IIS to specify another user, and then ensure that user has the required permission to the network device.

Silverlight now rock solid

Ever since adding Silverlight support in 2.1 for .mp3, .wma, .wmv, .asf, and .asx files, I have had trouble getting Silverlight to accept media files sent from GSP's custom HTTP handler. This only affected Firefox; IE worked well. I finally tracked down the issue and modified the handler to make both web browsers happy. Now that the handler is correctly working, I modified the HTML templates in galleryserverpro.config to use {MediaObjectUrl} (which uses the handler) instead of {MediaObjectAbsoluteUrlNoHandler} (which uses a direct link to the file) for these file types.

The end result is that these video and audio files should play great in all browsers, and you have the robust security that comes from using the handler.

Smaller font

The font size of the text throughout the gallery has been slightly reduced, and it is now defined in pixels rather than em in the CSS file. There is a debate in the CSS community as to how to best define the font size, and in my judgment em was the best choice when IE 6 was a dominant browser. Now that IE 6 is becoming irrelevant, I believe pixels is the best choice. Originally, the CSS file had this line:

body { font: 0.9em Verdana, Arial, Helvetica, sans-serif; background-color: #f5f5f5; color: #000; }

Now that GSP is wrapped in a user control, I specify the font size in the global CSS namespace:

.gsp_ns { font: 12px Verdana, Arial, Helvetica, sans-serif; }

Any time GSP needs to display larger or smaller text, it is done relative to the font defined in the gsp_ns class. For example, to display slightly larger text, GSP uses the gsp_fl class:

.gsp_fl { font-size: 1.1em; }

The beauty of this approach is that you can change the font size globally in one place - the gsp_ns class - and all the text will scale appropriately. So if you like the bigger text of the previous version, just edit the font size in gsp_ns. Increase it to 14px or even revert back to the original 0.9em. Whatever yanks your crank.

While we're talking CSS, you may have noticed I changed the background color of the header from blue to the same eggshell white used on the rest of the page. This is due partly because I am getting sick of that color, but also because the color is likely to clash with most web sites that developers add the gallery to. It is easy enough to change the color to suit your fancy. Edit the following line in gs\styles\gallery.css:

.gsp_ns .header { background-color:transparent; overflow:hidden; }

If you change to a dark color, you will probably want the title and login and search controls to use a light color so that it is contrasted against the background. Again, this takes a few simple edits to the CSS file. I'll leave that as an exercise for you. Hint: Use the Firebug add-on for Firefox to quickly identify the CSS classes to modify.

Complete list of new features (view detailed report)

• All functionality is contained within a single user control.
• Support for storing media objects at any UNC-accessible location, including NAS devices
• New upgrade wizard imports settings from the previous web.config and galleryserverpro.config files.
• Added .pps (PowerPoint Slideshow) as a supported media object
• The file path to the thumbnail and optimized image directory is now optional
• Modified add objects page to eliminate use of images containing hard-coded English text
• New configuration settings in galleryserverpro.config: showLogin (default=true) and showSearch (default=true). These control the visibility of the login and search controls at the top right of every page. The settings are exposed on the General page of the Site admin area
• New configuration settings in galleryserverpro.config: showErrorDetails (default=false), enableExceptionHandler (default=true), and allowAnonymousBrowsing (default=true). These replace the previous technique of configuring these options in web.config through the customErrors and authorization elements.
• Increased the height of the box surrounding thumbnail images to better contain the contents. This was done by changing the value of the thumbnailHeightBuffer setting in galleryserverpro.config from 65px to 70px.

Bug fixes (view detailed report)

• Full support for Silverlight using the HTTP handler
• Password validation not performed when changing password in SQLite
• An error may occur if a SMTP server is not specified
• Clicking current date in edit album window does nothing
• "Template not found: enabledHeader" message on Media Object Types page
• Thumbnails for external media objects may not be recreated during synch
• Synch may leave orphan files
• Captions inside thumbnails sometimes exceed boundary
• Incorrect behavior on Add Objects page
• Text in add user dialog remains visible during callback
• SQLite user activity date inconsistent with SQL Server behavior
• Rendering issue when gallery is used in web page with floated screen objects

I hope you enjoy the new version, and I wish everyone a Happy New Year! As soon as I finish the Admin Guide, I'll get hard at work on the next release. I'll be publishing a new roadmap within a few weeks. Cheers!

Coming in 2.2: Improved Integration With Existing Web Sites

The next version of Gallery Server Pro, expected within a month or so, will have an improved UI architecture that will simplify the integration with your existing web site. Although I took advantage of .NET 2.0 techniques such as master pages and themes in GSP 2.0 and 2.1, in practice it has been difficult for developers to add an instance of Gallery Server Pro into an existing web application. This is primarily because an existing site already has an architecture that may include master pages, themes, navigation bar, and header and footer areas. Developers have achieved the look of integration by including GSP in an iframe or by copying their master page into GSP's master page. Neither of these is true integration as GSP still runs as a separate web application in IIS.

For 2.2, I refactored the user interface so that all functionality is wrapped in a single ASP.NET user control. Adding a gallery to your site involves three basic steps:

1. Copy the Gallery Server Pro files into your web application. Most of them can be placed in a directory of your choosing. A few, such as the SQLite database and .resx resource file, go into pre-defined ASP.NET directories, such as App_Data and App_GlobalResources.
2. Configure web.config to define a few settings required by GSP and add one line of code to the Application_Start event in global.asax.
3. Choose one of your web pages to host the gallery. Perhaps you will add a new .aspx page and have it based on your current master page. Add the following to the top of the page:

   <%@ Register TagPrefix="gsp" Namespace="GalleryServerPro.Web" Assembly="GalleryServerPro.Web" %>

   At the location in the page where you want the gallery to appear, add this:

   <gsp:Gallery ID="gallery1" runat="server" />

That's it! Fire up the page and you will notice Gallery Server Pro appears in the location you defined. All the functionality that previously existed, such as logging on, searching, and the task and admin pages are still there. And it will work beautifully with your existing master pages.

As an example, here are a couple screen shots where I added a gallery to a new page named demo.aspx at www.galleryserverpro.com:

The demo.aspx page looks like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/master/global.Master" AutoEventWireup="true"
    CodeBehind="demo.aspx.cs" Inherits="TIS.GSPWeb.demo" %>
<%@ Register TagPrefix="gsp" Namespace="GalleryServerPro.Web" Assembly="GalleryServerPro.Web" %>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="sm" runat="server" />
    <div id="content">
        <gsp:Gallery ID="gallery1" runat="server" />
    </div>
</asp:Content>

Pretty simple, huh? You can see that it uses a master page named global.Master. GSP requires a ScriptManager because of its AJAX capabilities, so you'll need to make sure you have one defined on the .aspx page or in the master page.

Those of you who run GSP as a stand-alone application can continue to do so. I will release the code in a fully functioning web site with a single page containing the Gallery control. It will work much like you are used to, except you'll notice that the URL's are different. For example, here are a few examples:

Create a new album: http://www.galleryserverpro.com/default.aspx?g=task_createalbum&aid=1
View an album: http://www.galleryserverpro.com/default.aspx?aid=74
View a single photo: http://www.galleryserverpro.com/default.aspx?g=mediaobject&moid=536
Site admin home page: http://www.galleryserverpro.com/default.aspx?g=admin_general

Notice that all functionality is funneled through a single .aspx page (default.aspx in the above examples). The query string contains a "g" parameter that dictates what action is taking place on the page. There will be backwards compatibility with your existing links to albums and media objects. So, for example, a link you may have today that points to a photo at http://www.site.com/default.aspx?moid=536 will continue to point to the same photo in 2.2. However, bookmarks to any task or admin pages will not work in 2.2.

I am working on this every day, and as always I love to hear your feedback.