Introducing the WRGprettyPhoto BlogEngine.NET Extension

Published: Wednesday 26 May 2010 @ 07:27 -07:00 UTC by gogman

UPDATED 6 July 2010: WRGprettyPhoto 1.1 - contains minor bug fixes and reliability improvements - Download WRGprettyPhoto.1.1.zip – 3.72kb.

When I decided to adopt BlogEngine.NET as my primary website publishing platform, I knew there might be a few issues with the scripts I had been using on my old site. As I began testing, I discovered, much to my chagrin, that one of my favorite scripts – Lightbox 2 – did not work with BlogEngine.NET.

After a little research, I discovered that the incompatibility came down to a much used function in the JavaScript library for the blog sharing the same name as a function in the Scriptalicious library: function $(id) in the blog library and function $(element) in the Scriptalicious library.

I looked through both sets of code and decided that rewriting the code to use a different function name was just too much work and would complicate upgrading either set of scripts.

Deciding to find an alternative to Lighbox 2, I went to the extensions page on the BlogEngine.NET website and saw an extension named prettyPhoto. After visiting the author’s page and checking out the prettyPhoto javascript library website, I installed the extension and support libraries.

For some reason, the extension failed to work for me. I am not sure why it did not work, but it just did not. By this point I was set on using prettyPhoto so I manually set it up and got it working. It was at this point that I sadly realized I would no longer be able to use Live Writer’s built in Lightbox 2 editing support due to the different tag names used by prettyPhoto and the lack of the reference to the Lightbox 2 library on the site.

This got me thinking, why not write a prettyPhoto extension that not only “tricks” Live Writer into enabling support for Lightbox 2 but also works with that support in a smart way to enable prettyPhoto to use it. And while at at it, why not make it smart enough to only load the prettyPhoto library and the jQuery library only when needed?

After reading the BlogEngine.NET extension developer documentation, I jumped right in and after a few hours of learning, coding, and testing, I had my new extension completed: WRGprettyPhoto 1.0.

Download WRGprettyPhoto.1.1.zip – 3.72kb

 

Features:

  • Enables and works with Lightbox 2 support in Windows Live Writer.
  • Saves bandwidth by only referencing the prettyPhoto script when needed.
  • Optionally saves bandwidth by only referencing the jQuery script library when needed.
  • Complete control over the appearance of prettyPhoto from within the extension settings without ever needing to write code.

Setup:

  1. Download prettyPhoto (minimized version recommended) and extract the prettyPhoto folder in the archive into the root folder of your website.
  2. Download the WRGprettyPhoto archive and copy the WRGprettyPhoto.cs file from the WRGprettyPhoto archive into the App_Code\Extensions folder.
  3. Optional: If you use Windows Live Writer and want to use the built in support for LightBox2 with prettyPhoto, copy the file file lightbox.js from the WRGprettyPhoto  archive into the prettyPhoto\js\ folder.
  4. Optional: If you already have the jQuery library script referenced in you site you may skip this step. If you do not and would like WRGprettyPhoto to dynamically load and unload jQuery as needed then download the jQuery Library (minimized version recommended)  and place it in a folder on your site. I place mine in a folder off the root folder named Scripts.

Configuration Notes:

If you enable Live Writer Lightbox 2 editing support for use with prettyPhoto you MUST complete setup step #3 and refresh your blog settings in Windows Live Writer. Once you do this you should see the following when you click the options button after inserting an image into your post:LiveWriter_LightBox_Support All you have to enter here is the gallery name for the photos you wish to display in prettyPhoto.

If you wish the have WRGprettyPhoto mange the loading of jQuery only when needed, you MUST complete setup step #4. The URL you enter must be a relative URL (eg: Scripts/jQuery.js) to the location where you have placed the jQuery library. A leading slash is not required.

The other options on the extensions page are pretty self explanatory.

Support and Licensing:

Please send me any bugs or feature requests you may have ASAP. You may either use the contact form or the comments on this post.

This extension is not licensed in any way and is given away free for you to do with what you will. All I ask is please keep the comment header in the extension source code intact and link back here if you improve upon or use WRGprettyPhoto as a base for your own custom extension.

Happy blogging!

Tags:
Categories: BlogEngine.NET | BlogEngine.NET Extensions | Blogging | Development | Freeware
Comments (19) | Add Comment | Permalink | Post RSSRSS comment feed

Comments

Seattle dui lawyer
Seattle dui lawyer United States on 5/31/2010 5:51:46 PM

Thanks for the help. These will to any version of blog engine?

gogman
gogman United States on 5/31/2010 11:58:36 PM

Heya Seattle DUI Lawyer,

I have only tested this extension on 1.6.1 of BlogEngine.NET. In theory it should work on 1.6.0.

The prettyPhoto and jQuery library should work on any version BlogEngine.NET.

In theory the extension should enable Lightbox 2 support in any version of Windows Live Writer that supports Lightbox.

Hope that helps!

davidlt
davidlt Lithuania on 6/14/2010 4:21:39 PM

Could it be used without Live Writer?

gogman
gogman United States on 6/14/2010 4:27:37 PM

Absolutely. You just have to tag your photos in the editor as per Lightbox or prettyPhoto instructions using the "rel" tag.

davidlt
davidlt Lithuania on 6/14/2010 4:54:51 PM

So I did, I example:
<a href="/davidlt/image.axd?picture=2010%2f6%2fVM4.tiff" rel="prettyPhoto" title="This is the description"><img src="/davidlt/image.axd?picture=2010%2f6%2fVM4_t.tiff" width="60" height="60" alt="This is the title" /></a>

The problem is that I don't get prettyBox effect. It's just like direct link.

prettyPhoto CSS loaded, lightbox, jquery and prettyPhoto JS is loaded too

I have BlogEngine 1.6.0

gogman
gogman United States on 6/14/2010 5:04:24 PM

Try rel="prettyPhoto[some_name]"

I am pretty sure you always have to include the parameter for prettyPhoto in the "rel" tag.

I am not sure if rel="prettyPhoto[]" would work, but it might - I have not tested it empty.

davidlt
davidlt Lithuania on 6/14/2010 5:16:43 PM

It looks like prettyPhoto initialization is missing. By writing it is JavaScript console everything started to work.

gogman
gogman United States on 6/14/2010 5:23:54 PM

Interesting! So the JavaScript code to initialize prettyPhoto is missing?

Try removing the the code you added and try the rel tag as "prettyPhoto[z]" and see if it is there.

And thanks so much for reporting this!

davidlt
davidlt Lithuania on 6/14/2010 5:37:30 PM

It's not working. I hope it doesn't have anything to do with Web.config permissions. I just noticed that NETWORK_SERVICE (IIS APS.NET) does not have write permissions. And even though I does allow enable/disable extensions, I get:

Changes will not be applied: Access to the path 'd:\wwwroot\davidlt\Web.Config' is denied.

Might be related?

davidlt
davidlt Lithuania on 6/14/2010 6:25:02 PM

Found your bug.
Actually was generating initialization code, but the syntax is not correct:

$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({allowresize:false,animationspeed:'fast',opacity:0,9,showTitle:false,theme:'light_rounded'});});

Look at opacity. You are using plain ToString(), which looks at CultureInfo. On my system Lithuanian is set.

Example:
csharp> Console.WriteLine(num.ToString("G", CultureInfo.GetCultureInfo("lt-LT")));
10,123
csharp> Console.WriteLine(num.ToString("G", CultureInfo.GetCultureInfo("en-US")));
10.123
csharp>

gogman
gogman United States on 6/15/2010 5:39:10 AM

Thank you so much!

I will admit that cultural aware code escapes my ability at times.

I'll add you bug fix to the code and update it. Would you mind if I credit you and link to your website in comments in the code?

davidlt
davidlt Lithuania on 6/15/2010 12:43:40 PM

Fine with me, added by blog can be accessed by davidlt.name or blog.davidlt.name (maybe this one better);

Wouter
Wouter Netherlands on 6/24/2010 8:24:14 PM

Seems like a promising extension!
However, is it correct that also for the thumbnails the complete photo is used, but then scaled down by using a width and heigth attribute?
(for pages with a lot of photos (like my photo blog) this would be terrible for the performance and used bandwidth!)

I also have tried to use a Lightbox solution inside BlogEngine, but hated it to have to upload the large images using FTP and having to write all the html anchor and image tags by hand...

gogman
gogman United States on 7/6/2010 12:01:44 AM

Hi Wouter,

The thumbnails are actually separate files that are posted when using a publishing tool like Livewriter.

Yes, sadly you will have to do it all by hand if you are not using a publishing. I can think on no way to do it otherwise.

Carroll B. Merriman
Carroll B. Merriman United States on 7/25/2010 4:55:00 AM

You site is nice. But i Tried to subscribe, but the rss is not working.

gogman
gogman United States on 7/27/2010 1:40:17 AM

@Carroll B. Merriman

The RSS feeds seem to be working just fine for me. Not quite sure what the issue you are having is.

david garcia hong kong
david garcia hong kong United States on 8/1/2010 7:06:45 AM

Howdy, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam comments? If so how do you prevent it, any plugin or anything you can advise? I get so much lately it's driving me mad so any assistance is very much appreciated.

Gimps Ray!.

gogman
gogman United States on 8/1/2010 8:05:50 AM

@david garcia hong kong,

I do get spam, quite a bit actually. I was running the Recapcha and AkismetFilter extensions, but they seemed to cause post-back issues so I disabled them. I turned on comment moderation and set it up so if I delete a comment that IP and commenter are banned. If a comment is approved then that user can post comments with no moderation required. I also have it set to email me any when any comments are posted regardless if the user is approved or not so regardless where I am (excepts at sea) I can approve or delete the comment.

-gogman-

revotrad
revotrad India on 8/18/2010 6:22:06 PM

Really helpful one,,,,,,,
Handy also(but after reading all comments)

Add comment

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading