Thursday, March 17, 2011

Better looking galleries in IE9

Gallery Server Pro makes extensive use of rounded corners and drop shadows to make a great looking gallery. While other browsers have supported these features for a while, IE has lagged behind. Now I am pleased to report that IE has finally caught up! After you upgrade to IE9 your galleries will suddenly look a little more awesome.

For example, here is a typical album as seen in IE8:

album_view_ie8

Now the same album in IE9:

album_view_ie9

The thumbnail images, the frame, and the paging controls all have nice rounded corners, and the images have a nice drop shadow effect.

When you click an image, this is what IE8 will show:

mo_view_ie8

The same image in IE9:

mo_view_ie9

Astute observers will notice that the IE8 screen shots *do* have a drop shadow similar to the IE9 shots. That is because years ago I decided I couldn’t wait for IE to add drop shadow support, so I implemented a complicated hack to simulate the effect with nested div tags and images. I describe the technique in this blog post. Gallery Server Pro still uses the older technique for IE 8 and earlier, but all other browsers – including IE9 – get the new CSS drop shadow. The end result is that using CSS instead of a hack results in much simpler HTML, allowing for such basic improvements as centering images. Here is an image in IE8 – notice how it is left-aligned:

image_not_centered[4] 

The same image in IE9:

image_centered[4]

These are just a few of the places where better CSS support results in a better looking gallery. To get these improvements, all you need is IE9 and any version of Gallery Server Pro 2.4.0 or higher. Enjoy!

Thursday, March 10, 2011

Add the Facebook comment widget to your gallery

One of the frequent requests I get is the ability for users to comment on photos and other media objects. I am considering adding this feature – in fact, it is one of the items you can vote for in the poll I am running. But today I discovered a technique for incorporating the Facebook comment widget right into your gallery. I enabled this feature on an album in the demo site so you can see for yourself. Feel free to leave a comment on one or more photos – I’ll purge them periodically.

This is not for everyone. Users need a Facebook account, and it is a little tricky to set up and maintain. For these reasons, I am reluctant to add this as a built-in feature. But for some of you this will be an excellent addition to the gallery.

Here is what it looks like:

gsp_with_facebook_comments

There are a few steps getting this to work.

1. Add a script tag to the web page hosting the gallery control.

Open default.aspx in a text editor and add this line somewhere in the <head> section:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

2. Update mediaobjectview.js

Two javascript functions in \gs\script\mediaobjectview.js must be updated to call the Facebook API. In showNextMediaObject() and showPrevMediaObject(), find this line of code:

document.body.style.cursor = "default";

Then add this line just *before* it:

if (typeof (FB) != 'undefined') FB.XFBML.parse();

Because the file is minified, it is difficult to edit, so for your convenience just grab the one used on the demo site. If you are running a different version than the one on the demo site you’ll have to manually edit the file. To make this easier, you could edit the un-minified version that is in the source code download (Website\gs\script\mediaobjectview.debug.gs) and then run it through any minifier (like this one).

3. Enable HTML editing and add the ‘fb:comments’ tag.

Log in to your gallery as an administrator and turn on HTML editing on the User Settings page. Then add ‘fb:comments’ as a valid HTML tag.

image

4. Update each media object caption with the Facebook HTML snippet.

For each media object where you want to enable comments, edit the caption and add this HTML after the regular caption:

               <div id="fb-root"></div>
<fb:comments href="http://www.site.com/default.aspx?moid=8274"></fb:comments>

Replace the URL with the actual URL to your media object. Notice there are several spaces before the first <div>. That is intentional, as it provides a buffer to prevent Gallery Server Pro from accidentally rendering the comment widget on the thumbnail image. Save your changes and then refresh the page. The Facebook comment widget should appear just below the caption.

Pretty cool, huh?

Updating the caption for every media object is pretty tedious, so below I describe a shortcut.

Disclaimers and caveats

BROKEN CAPTION EDITING – This technique breaks the ability to edit a caption on the single media object view. Once you comment-enable a media object, the only way to edit its caption is through the Edit Captions task available in the Actions menu. And when you do, you have to be careful not to edit the Facebook HTML that is part of the caption.

Remember, Gallery Server Pro was not designed for this comment widget, so it is kind of a hack to add it to the comment field. If you don’t like this limitation, then don’t use this technique.

NO SUPPORT – Gallery Server Pro does not provide support for the Facebook comment widget, so you are on your own. I did minimal testing and don’t know how robust it is or even whether it is a good idea. It may kill your hamster. That said, I am curious to hear your feedback and experiences.

Comment-enable your whole gallery (or just an album) in one step

Rather than update each media object one at a time, you can execute a SQL statement against the database to comment-enable all your media objects at once. Here is some example SQL – it adds the necessary Facebook HTML to any existing text in the Title column of the gs_MediaObject table.

SQLite:

UPDATE gs_MediaObject
SET Title=Title || "                <div id='fb-root'></div><fb:comments href='http://www.site.com/default.aspx?moid=" || MediaObjectId || "'></fb:comments>"

SQL Server:

UPDATE gs_MediaObject
SET Title=Title + "                <div id='fb-root'></div><fb:comments href='http://www.site.com/default.aspx?moid=" + MediaObjectId + "'></fb:comments>"
WHERE FKAlbumId=XXXX

Add a WHERE clause – like in the second SQL – to update the items in just one album. It is beyond the scope of this post to tell you how to execute SQL, so if you don’t know, you’ll have to learn or just forget the idea.

As you add objects to your gallery, you will need to manually update each caption or re-apply the SQL. But don’t run the SQL more than once against the same set of media objects, or you’ll start to get multiple copies of the Facebook HTML.

More information

To learn more about the Facebook Comments Box, read the documentation. It includes information about moderation tools to help you manage the comments.

I think some of you will really like this trick. Let me know how it goes!

Wednesday, March 9, 2011

Vote for the features you want to see

Now that Gallery Server Pro 2.4 is good and solid I am thinking about the next major features for 2.5. What should they be? I have a hunch, but I want to be a bit more scientific about this, so I created an online poll. Vote for the features you want to see here:

http://forum.galleryserverpro.com/yaf_postst1517_Vote-for-the-features-you-want-to-see-in-GSP.aspx

There is a very good chance that the top two or three vote-getters will make into into 2.5, so make yourself heard! And if you want a feature that isn’t listed, want to add detail, or you want to remind me of a previous feature request that is important, add your comment to that thread.

Thursday, March 3, 2011

2.4.6 patched with minor bug fixes

Since releasing 2.4.6 on February 21, a few bugs have surfaced. I wanted to quickly fix them instead of making you wait for the next release, so I updated the existing 2.4.6 versions to include the fixes. These were updated today, so if you downloaded them earlier, you may want to upgrade.

These bugs were fixed:

  • BUG: ArgumentOutOfRangeException on account creation page when anonymous browsing is disabled
  • BUG: Auto-synch fails when images contain GPS data
  • BUG: (DotNetNuke only) Auto-sync function causes error emails to not be sent
  • BUG: “String was not recognized as a valid DateTime” error after enabling auto-sync in non-United States cultures
  • BUG: Cannot play audio or video when option 'Allow anonymous browsing of high resolution images' is disabled

There were also a few changes in behavior for the HTTP handler that serves media files to the browser:

  • A request for a resource that no longer exists now returns an HTTP 404 status code. Previously it returned 200 (OK) with an empty body. This change helps search bots know when to remove an item from its database.
  • File-not-found errors are no longer logged as an error. This is because search bots re-indexing a site can generate hundreds of file-not found errors by requesting items that had been moved or deleted since the last time. This shouldn’t be treated as an error.
  • A request that fails the security test now returns an HTTP 403 (forbidden) status code. Previously it return 200 (OK) but didn’t include the media file. This is basically a “best practice” change that shouldn’t have much impact.

The final change is that e-mails are no longer sent each time an auto-sync begins and ends. They are, however, logged to the error log – even though they are not errors. (Note to self: In a future version rework the error log to be an EVENT log.)

Upgrading

If your current version is earlier than 2.4.6, follow the standard upgrade instructions in the Admin Guide. If you are already on 2.4.6, just replace the following files in your bin directory with the ones from the 32-bit or 64-bit download (doesn’t matter, since these three are the same in both):

  • GalleryServerPro.Business.dll
  • GalleryServerPro.ErrorHandler.dll
  • GalleryServerPro.Web.dll

DotNetNuke Users – Download the latest ZIP module and install just as you would a new module. The installer will ask if you want to repair the current installation. Choose yes.