(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.

Multilingual Capabilities in Gallery Server Pro

A great deal of work has gone into making Gallery Server Pro capable of displaying text in multiple languages, and I thought I would give an overview and finish up with a call for volunteers to assist with translating into other languages.

When a user navigates to a web site, most web browsers automatically send the user's preferred language to the web server with the request. Gallery Server Pro uses this setting to automatically return a web page to the user in that language. If no translation has been provided for that language, the default resource - English - is used.

For example, an English user might see a gallery like this:

Another user in the Netherlands, whose browser is set to the Dutch language, can view the same gallery and see the resources in Dutch:

A single installation of Gallery Server Pro automatically provides the correct language, without any intervention by the user. You do not need to choose one language for everyone, nor do your users need to click a special link to read the version in their language. How cool is that!

Be aware that some text in your gallery cannot be automatically served in different languages. This includes any text that is directly editable by an administrator, such as album titles and summaries, and media object titles. It is expected that you edit them directly in your preferred language.

Gallery Server Pro ships with English resources by default. Support for additional languages is provided in language packs which can be downloaded in the Language Translation forum. Deploying a language pack is as simple as copying a few files into the web application. And you can deploy as many packs as you like.

At the moment there is only a Dutch translation and a partially complete Spanish translation, and they are for an older version of Gallery Server Pro. But that is about to change, as I have just finished putting together a process that makes it very easy for volunteers to translate text into their language. I am providing a utility called the Zeta Resource Editor that lets you open two resource files side by side. To create a new translation, make a copy of the English resource file and name it according to your language. For example, the Dutch version of GalleryServerPro.resx is GalleryServerPro.nl.resx. Then you open both files in the Zeta editor:

The two files are merged into a single grid where you can easily compare the two languages. Edit the column GalleryServerPro.nl.resx to contain the translation for the text in the column to its left (GalleryServerPro.resx). That's it. No messing around with the underlying XML or that primitive resource editor in Visual Studio.

After an initial translation is complete, it must be updated when new versions of Gallery Server Pro are released. Each resource has a date stamp for when it was last updated. The Zeta editor automatically looks for this date stamp and highlights the resources where they differ. For example, here is a screen shot of the 2.0 version of the Dutch resource when compared to the 2.1 version of the English resource:

The yellow, green, and salmon colored cells indicate a resource that must be updated. As you update each one, the background turns white. You know you are done when all the rows are white! (FYI, the first column is always light blue.)

Translators Needed!

Gallery Server Pro is open source and supported entirely by volunteers and donations. If you are able to contribute by providing a translation in your language, we would love your help! As a thank you, I will send everyone who submits a complete translation a copy of the Dilbert book Casual Day Has Gone Too Far.

To get started with a translation, check out the Getting Started thread in the Language Translation forum.