blog
Using jQuery Colorbox with Images Stored in Sitecore

This article concerns the use of Sitecore-managed images in Jack Moore's jQuery Colorbox plugin (jacklmoore.com/colorbox).

The Problem

As all images stored in Sitecore are stored in the database, Sitecore uses an 'ashx' handler to get the images, thus making the file extension on the image's URL '.ashx'. This is a problem for the Colorbox plugin, as it uses a RegEx to determine the image type from the URL.

Colorbox Solution

The developers who created Colorbox were kind enough to supply the 'photo' attribute. This attribute forces the plugin to render the URL as an image, even if the image auto-detection (the RegEx) fails.

$('target').colorbox({ photo: true });

Sitecore Solution

After hearing about this issue and the Colorbox, a co-worker of mine, Doug Couto (Sitecore MVP), let me know about an alternative approach that, though extreme for this situation, I could use in the future, involving only a Sitecore setting change. Doug pointed out that, although 'ashx' is the default, Sitecore included a very useful little setting, "Media.RequestExtension", that forces Sitecore to render the URL for Media Library items using the media's actual extension. All that need be done is to change the value of this setting to an empty string, and Sitecore will use the extension of the item as it was uploaded to the Media Library. You can find Doug's original comment below.

Note: While the "Media.RequestExtension" setting is very handy and useful, changing it for an issue like this one means that you are actually changing ALL of the media links across the entire site. If this is something that you want, i.e. you are not a fan of the ".ashx" extension replacing the real extension of your media, then this solution is for you.

2 Comments
Post a Comment

 
  • Comment by Doug Couto on May 20, 2013
    Good tip, Zach. While ASHX is the default, there is a setting in the Sitecore web.config that forces Sitecore to render the URL to a Media Library Items using the Items actual extension, Media.RequestExtension. If you set the value of this setting to empty string, Sitecore will use the extension of the Item as it was uploaded to the Media Library.
    • Comment by Zachary Kniebel on Mar 20, 2013
      That's an excellent solution, Doug - thanks! For all who wish to use this solution, be note that this change will affect the entire site, but may simplify things by avoiding issues like this.