Wednesday, September 29, 2010

Release Candidate Available for DotNetNuke Module

Today I am making available the Release Candidate for the Gallery Server Pro 2.4 DotNetNuke Module. It is stable, tested, and functionally complete. It also contains a number of new features not included in the beta released last month. Read my earlier blog post for background information and installation instructions.

Even if you are not interested in the DotNetNuke version, the next version of GSP will also contain these features, so keep reading.

The demo site shows off the major features and even allows you to upload and manage files for testing purposes:


Beta users: If you used the beta, you must uninstall the module before installing the release candidate. The media files will not be deleted when uninstalling, but you will lose the captions and other data stored in the tables. I anticipate – but cannot promise – a smooth upgrade to the general release that does not involve any data loss.

The release candidate contains the same 30-day trial that will be in the final version. It works just like the stand-alone version in that it is fully functional for the first 30 days. When the trial ends, a watermark appears on images and the Site admin area becomes read-only. Restore full functionality by purchasing a product key at SnowCovered (available once the full version is released).


Key Benefits

The main features of the DotNetNuke module are the same as the stand-alone version:

  • Intuitive, flexible user interface
  • Share any file: photos, video, audio, documents - anything!
  • Support for zero-maintenance community galleries
  • Powerful user security with flexible, per-album granularity
  • Integrates with existing users and roles
  • Scalable to hundreds of thousands of objects
  • Metadata extraction. Supports these formats: EXIF, XMP, tEXt, IFD,  and IPTC
  • Image watermarking with your own text and/or image
  • AJAX-enabled for more responsive UI
  • HTML templates allow complete control over how media objects are rendered

Plus, there are some great new features in 2.4. These will also be available in the 2.4 version of the stand-alone version, which should be released within a few weeks of the DNN version.

  • Customizable user interface
  • Optional treeview navigation
  • Thumbnails extracted from video, PDF, HTML, TXT and EPS files
  • Multiple galleries
  • HTML5 support for <video> and <audio> tag
  • CSS rounded corners and shadows
  • IE9 users receive CSS rounded corners/shadows, while older versions use fallback technique
  • Improved .NET 4 support
  • Reorganized site admin pages
  • Moved contents of galleryserverpro.config to database (reduces app restarts)
  • No longer uses the ASP.NET profile provider

The web site and Admin Guide covers the existing features, so for this post I will focus on what is new in 2.4.


Customize the UI

Prior to 2.4, Gallery Server Pro had a single “look” – there was a header and footer, and the contents were either a thumbnail view of an album or a single view of a media object. This worked well for many users, but didn’t offer much flexibility when developers tried to integrate a gallery into an existing site.

For example, one couldn’t automatically show a slide show of an album on the home page. Now you can, as seen in the screen shot above and on the home page of the online demo. This scenario, and many others, are made possible through a new Gallery Control Settings page in the Site admin area. Here is a screen shot of the actual settings used for the slideshow demo:


The key settings are:

  • View mode – By setting it to “Show a single media object”, we tell GSP to show one image at a time rather than a thumbnail view of an album. There is also a new treeview mode.
  • Default gallery object – We set it to the album “United States Scenery”.
  • Display options – We select the checkbox to override the default settings, then turn off most of the UI elements. We also turn on the option to start the slide show when the page loads.

These settings offer a lot of flexibility for controlling how your gallery looks with just a few clicks of the mouse. Each setting has a helpful popup tooltip with info and advice:



Thumbnails from videos and other file types

I covered this feature in my earlier blog post, so rather than repeat myself I’ll use the magic of the web and point you to it.


Multiple galleries

A gallery is a collection of albums and media objects that are bound together with a common set of settings, such as file storage location, watermark settings, image size, allowed file types, and whether user albums are enabled. Starting in 2.4, each web application can contain multiple galleries. This is a big difference from the pre-2.4 notion of multiple galleries, which allowed a single database to share galleries from multiple *applications*.

The demo site illustrates the usefulness of multiple galleries. There, in a single web application, are five galleries to demonstrate all the major features, with each gallery roughly linked to each menu link. The galleries are managed in the new Gallery Manager:


The screen shot shows the five galleries and their media files storage location. Each instance of the module on a page is linked to one gallery. For example, the home page that contains the slide show is linked to the gallery “Slide show gallery”; the remaining demo pages are linked to their corresponding gallery. Two galleries are re-used – the Demo4 and Demo6 pages point to one of the other galleries since they don’t need their own.


HTML5 support

Most browsers – including Internet Explorer 9 – now include some level of support for HTML5. The <video> and <audio> tags in particular have great potential for Gallery Server Pro, since it offers the promise of cross-browser video and audio playback without any dependence on plug-ins. So, in the spirit of moving toward this multimedia nirvana, 2.4 now renders <video> and <audio> tags for browsers and files that support it. For example, .webm, .ogg, and .ogv files are sent to the browser with this syntax:

<video src="getmediaobject.ashx?t22if9isNfsY" controls autobuffer ><p>Cannot play: Your browser does not support the <code>video</code> element or the codec of this file. Use another browser or download the file by clicking the download toolbar button above (available only when downloading is enabled).</p></video>

In Google Chrome, it looks like this (click the image to go to the actual video):


This .webm video will play in Firefox 4, Chrome, IE 9 (when VP8 codec is installed), and Opera. For IE 9 users without the VP8 codec or for versions of IE8 and earlier, users will see this:



CSS rounded corners and shadows

Gallery Server Pro has sported drop shadows around images for a while now:


The technique, which I adapted from Position Is Everything, was a fairly complicated combination of nested div tags and images. Here is what it looks like under the hood:

<div class="gsp_floatcontainer">
<div class="op1">
  <div class="op2">
   <div class="sb">
    <div class="ib">
     <img id="mo_img" src="getmediaobject.ashx?CDZHDoCF" alt="Penguins.jpg" title="Penguins.jpg" style="height:187px;width:250px;" />

Here is the supporting CSS:

.gsp_floatcontainer {overflow:hidden;width:100%;}
html > body .gsp_ns .op1 {background:url(../images/shadow_tr_8x8.png) right top no-repeat;
html > body .gsp_ns .op2 {background:url(../images/shadow_bl_8x8.png) left bottom no-repeat;
html > body .gsp_ns .sb {background:url(../images/shadow_800x800.png) bottom right;}
html > body .gsp_ns .ib {position:relative;left:-8px;top:-8px;border:1px solid #a9a9a9;}

Now that all modern browsers – even IE9 – support drop shadows and rounded corners, I was able to simplify it down to this:

<div class="gsp_i_c">
  <img id="mo_img" src="getmediaobject.ashx?CDZHDoCF" alt="Penguins.jpg" title="Penguins.jpg"
style="height:187px;width:250px;" />

And the new CSS:

.gsp_ns div#divMoView .gsp_i_c {border:1px solid;border-color:#AAA #444 #444 #AAA;margin:0 auto 15px auto;padding:2%;
-moz-box-shadow: 8px 8px 8px #636363;-webkit-box-shadow: 8px 8px 8px #636363;box-shadow: 8px 8px 8px #636363;

We went from five div tags to one, and the result looks great:


IE8 browsers and earlier will still get the old HTML, but everyone else benefits from the new CSS support.


Elimination of galleryserverpro.config

The configuration file galleryserverpro.config in 2.3 and earlier versions contained the MIME types, HTML templates, and most of the settings that were exposed in the Site admin area. While this made it easy to edit in any text editor, it was not compatible with the multi-portal features in DotNetNuke. In addition, ASP.NET would restart the web application each time the file was edited, resulting in delays and potential interruptions for users.

I moved these settings to database tables for 2.4.


Elimination of ASP.NET profile provider

Previous versions of Gallery Server Pro used the ASP.NET profile infrastructure to store user profile data such as whether the metadata popup was visible and the user album ID (when user albums are enabled). This worked well but had two flaws:

  1. Web.config modification – The web.config file had to specify the profile provider and the profile properties. If a developer was already using the profile provider, she had to merge the GSP profile properties with the ones she had already defined. This sometimes causes issues with existing code that interacted with the properties, since they were not aware of the new GSP properties.
  2. DotNetNuke profiles – DotNetNuke provides its own profile mechanism that I tried to tap into, but it would have required a lot of work to handle the settings for multiple galleries within a portal, plus it fragmented the settings for GSP – some settings were managed in the DNN profile management and others in the GSP admin screens. Better to have them all in one place.

In the end I created a new table gs_UserGalleryProfile and wrote custom code to interact with it, completely bypassing the ASP.NET profile mechanism and eliminating the dependence on web.config changes and the DNN profile API.