Introducing the WRGprettyPhoto BlogEngine.NET Extension

26. May 2010 15:27 by gogman in BlogEngine.NET, BlogEngine.NET Extensions, Blogging, Development, Freeware  //  Tags:   //   Comments (25)

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!

Comments (25) -

Seattle dui lawyer
Seattle dui lawyer
6/1/2010 1:51:46 AM #

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

gogman
gogman
6/1/2010 7:58:36 AM #

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
6/15/2010 12:21:39 AM #

Could it be used without Live Writer?

gogman
gogman
6/15/2010 12:27:37 AM #

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

davidlt
davidlt
6/15/2010 12:54:51 AM #

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
6/15/2010 1:04:24 AM #

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
6/15/2010 1:16:43 AM #

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

gogman
gogman
6/15/2010 1:23:54 AM #

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
6/15/2010 1:37:30 AM #

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
6/15/2010 2:25:02 AM #

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
6/15/2010 1:39:10 PM #

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
6/15/2010 8: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
6/25/2010 4:24:14 AM #

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
7/6/2010 8: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
7/25/2010 12:55:00 PM #

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

gogman
gogman
7/27/2010 9: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
8/1/2010 3:06:45 PM #

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
8/1/2010 4:05:50 PM #

@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-

Dave
Dave
9/22/2010 7:21:53 PM #

finally got this working tonight but I've noticed every time Live Writer posts the code, is uses the value "rel=lightbox" rather than "rel=prettyPhoto" and then I have to go back and edit by hand.  Am I doing something wrong here or did I miss something in the setup instructions?

gogman
gogman
9/23/2010 1:09:22 AM #

@Dave,

Thanks for using the extension!

The add-in should work with both the stock prettyPhoto code stock rel tags WLW inserts. Just make sure under the extension settings you have the "Enable Live Writer Lightbox 2 editing support for use with prettyPhoto." check-box checked. I don't think it's enabled by default.

I built it this way to allow it to work with existing HTML that a user might have and to allow both LightBox and prettyPhoto to live side by side.

If that does not work, I would say just do a reinstall and make sure you put all the files where the instructions say and then make sure the check-box is checked.

Hope that helps!

Dave
Dave
9/23/2010 4:42:14 PM #

Hey thanks for getting back to me and thanks for the extension!  I'm admittedly a noob at this stuff (I'm more a network and hardware geek) so I apologize if I dont have all the terminology correct.  I have followed the instructions verbatim.  I'm using the latest version of WLW (14.0.8117.416) and when I place a picture in the post, here is the code WLW generates (with the extension enabled for LW Lightbox 2 editing support for pretty photo).

<p><a href="$XPDFrag01[7].jpg" rel="lightbox"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="XPDFrag01" border="0" alt="XPDFrag01" src="$XPDFrag01_thumb[4].jpg" width="120" height="90" /></a></p>

I added the bold for emphasis but in any event, this code does not work and has to be manually modified to specify "prettyphoto" in the rel tag.  Once I make the edit by hand, voila, success.

Am I overlooking something or has something perhaps changed in WLW since the extension was written?

gogman
gogman
9/23/2010 7:52:16 PM #

@Dave,

You should not have to change any of the tags. When you publish the post to your blog, the extension should work with the rel="lightbox" tags if the check box is enabled. All you should have to do in WLW is simply add an image and set the Lightbox properties then publish. The extension should do the rest automagically.

Try a test post and let me know if that works.

Dave
Dave
9/26/2010 10:16:29 AM #

Classic PEBCAK error.  I was over thinking it.  Great extension.  Thanks again!

gogman
gogman
9/27/2010 12:15:51 PM #

@Dave,

You're welcome. Smile

Chris Downes
Chris Downes
10/22/2010 8:40:55 AM #

Windows Phone 7 is released next month.  With the previews it appears more groomed and less problematic to master than previous renderings but has access to a slimmer choice of apps. This element will be  important to its success or failure.

Comments are closed

About The Bloggers

gogman

gogmanBorn naked, unable to communicate, walk, or feed himself, Gogman overcame these handicaps to become a technologist, decent open water sailor, pretty darn good cook, husband, cat lover, and mediocre blogger.

Gogman works as the CTO at Atomic Goat Studios, an independent game studio start-up located in Southern California developing games for the PC, XBox 360, and Windows Phone 7.

Member Hawaii Yacht Club

dantwo

dantwoFound in a universe that probably exists, Dantwo prides himself on his ability to use the laws of nature to perform complex tasks; such as operating a keyboard.

A graduate student and teaching assistant by trade, he is also found enjoying games, technology, rudimentary philosophy, and observing the universe.

We miss you Andrew

Recent Comments

Comment RSS