Picasa and PrettyPhoto updated for BlogEngine.NET 2.0

4. January 2011 19:52 by rtur.net in Extensions  //  Tags: ,   //   Comments (56)

picasaextlogoI have updated Picasa extension for BlogEngine.NET 2.0. If you haven’t use it before, take a look at instructions here, the way it works didn’t change much. I made it better match new admin UI, but functionality stays very much the same.

It used to utilize Lightbox as JS container to pop-up picture in the pretty frame, I decided to change it to use PrettyPhoto instead. Main reason is that I’m still planning to implement slideshow that original theme I’m using implements, and it based on PrettyPhoto library, so I’ll go with it. I’ll probably convert Lightbox for BE 2.0 anyway because it is pretty much the same process I went through with PrettyPhoto.

You most likely want to use both together, installations is simple – download and copy files to corresponding location in your website. Picasa folder has sample styles in Readme.txt – you can copy those to your theme and may be modify to match it. Enter your Gmail credentials in Picasa settings page, and all your albums should be listed like this:

picasaadminPrettyPhoto seems to have issue with IE 9, I’m looking into way to make it work there. Otherwise it works well. But if you already have Lightbox up and running, you might opt to use it with Picasa. The only change you would have to make is open Picasa/Admin.aspx.cs App_Code/Extensions/Picasa2.cs and replace “prettyPhoto” with “lightbox” in exactly one place. Just search for this word and replace it. When I get Lightbox working, I’ll probably add a way to choose between two in Picasa settings. To use Picasa, copy album (or slide show) link listed as tag in that settings table and paste it anywhere in the post or page. Result should be something like test album below. Drop a line here if you run into issue.

Picasa2.zip (6.30 kb)

PrettyPhoto2.zip (61.82 kb)

Comments (56) -

Voja
Voja
1/5/2011 2:15:13 PM #

Hi,
I love your extension.

Is it possible to extend it to have one page to show all public albums (one pic for each album) and when you click on a photo it will load all pictures in it?

/Voja

rtur.net
rtur.net
1/5/2011 4:32:15 PM #

Yes sure can be easily done. I'll take a look at it later this week.

Current News
Current News
3/8/2011 11:39:11 AM #

Rtur, was wondering if you figured the above question out.  Thanks.

Guy
Guy
1/12/2011 10:39:15 AM #

I have this in a separate page thanks to Jonah Carneskog.  Take a look at http://thenetheryfamily.com/gallery.aspx

If you like I could send a link for the page/code.

voja
voja
1/13/2011 12:56:25 PM #

Hi Guy,
your albumpage is just what I was looking for. I would be extremly happy if I could get a copy of your code for the page.

/Voja

jonah
jonah
3/8/2011 9:04:40 AM #

... or you could just ask me for the code.

voja
voja
1/6/2011 4:08:27 AM #

great!

I think you are missing the bin folder with the Google.GData.*.dll files in the picasa2.zip.

Is it possible for a extension to save data between requests?

/Voja

rtur.net
rtur.net
1/6/2011 9:34:36 AM #

Thanks - missing Google DLLs added.
Yes it is possible - in what scenario you need it?
I noticed you having issues with comments - what browser you are using and what error you see if any?

voja
voja
1/6/2011 1:03:47 PM #

Hi,
I get a javascript error (but not every time).
I get the error with IE 8 (OS: Windows XP).

I was thinking about using a dynamic tag like [Picasa] and when the page is loaded the first time all public albums are fetched from picasa. A first "fake" album is presented with the first photo from each album. When a album photo is clicked the same page is called again with the albumid in the request.

For that to work I need to store all albums in a session object and I need to read the request string to get the selected albumid.

/Voja

The error I get in IE is (and I'm missing the ReCaPTCHA box):

Rad: 1
Fel: 'BlogEngine.comments.nameBox.value' är null eller inte ett objekt

in translation:
Row: 1
Error: 'BlogEngine.comments.nameBox.value' is null or not an object

rtur.net
rtur.net
1/6/2011 2:09:47 PM #

Weird, spammed myself trying to reproduce it with no success :) But I see others also having this issue, need to figure this out.

I think easiest would be adding another dynamic link, perhaps "AlbumList" that will load album covers. Clicking cover would reload page with album ID in the query string, so extension knows to ignore AlbumList and load photos instead.

voja
voja
1/9/2011 2:36:10 AM #

Hi again,
how do I get the query string from the extension code?

/Voja

rtur.net
rtur.net
1/9/2011 1:41:16 PM #

Looks like BE doesn't like query strings, I fixed it in latest source so it will be fine going forward, but for now as another option you might use cookie instead. I actually got it working as prototype with 2.0 but it needs more testing.

Eric Mooney
Eric Mooney
1/6/2011 4:37:38 PM #

hey Ruslan

thanks so much for updating your picasa extension for BE2.  I do however get a funny error when displaying the post with the album in it.

Execution of request failed: http://picasaweb.google.com/data/feed/api/user/eric.mooney1@gmail.com/album/morning fog?kind=photo

Any ideas ?

rtur.net
rtur.net
1/6/2011 5:57:44 PM #

You need to get rid of space in the album name. It is used as ID in API calls and encoding/decoding seems inconsistent.

Eric Mooney
Eric Mooney
1/7/2011 4:43:50 AM #

thanks for that.  that worked by changing the album names.  it does list the albums with the spaces in the extensions too.

onto the next part.. sorry - lightbox or prettyphoto doesnt pop up for me.  im thinking its some issue with the inbuild jquery? it just loads the image in the page instead of popping up.  cant see any errors, any ideas on that??

sorry for all the queries :(

Eric

voja
voja
1/8/2011 12:08:14 AM #

It seams like IE 8 detects some kind of error on the page:
The error is on row 10 (<body onload="setupMenu()">
)


Användaragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
Tidsstämpling: Sat, 8 Jan 2011 05:58:16 UTC


Meddelande: Ett objekt förväntas.
Rad: 10
Tecken: 1
Kod: 0
URI: http://rtur.net/blog/post/2011/01/04/Picasa-and-PrettyPhoto-updated-for-BlogEngineNET-20.aspx

Steve
Steve
1/9/2011 4:24:30 PM #

I'm having a problem with the slide show portion of this extension. Albums work fine. The slide show just doesn't work. No error, just not functioning. The only clue i'm getting is a warning in the Firefox Error Console: "Warning: Unexpected token in attribute selector: '!'.
Source File: http://localhost:62246/blog03/page/test-slideshow.aspx
Line: 0"

Also, my album comes up as a bullet list. How does one change the format?

rtur.net
rtur.net
1/9/2011 6:46:33 PM #

Not sure why show wouldn't work, it is almost identical technically to the album. To change format use CSS stylesheet. I put demo styles in the "readme" file, but you might change it for your site.

Steve
Steve
1/11/2011 9:10:37 PM #

Hi,
For reasons unknown the slide show is working now. Go figure.
I added your CSS defaults to my style sheet. After trying to fix my problems, I have reverted to your defaults.
I got rid of the bullet list, and thumbnails now display in blocks. The problem I am having now is that the thumbnails are about half the size of the blocks and displayed in the upper left corner. The full-size pictures are all larger than the album blocks. None of the CSS changes I have made have had any effect, and I can't find any other CSS settings that would override what i am doing. The only thing I have found that will make the thumbnails fill the blocks is to set #AlbumList img to width:100%, but that distorts the images.
I'm probably missing obvious, but any direction to can provide would be appreciated.

rtur.net
rtur.net
1/11/2011 9:23:09 PM #

Did you try "thumbnail width" in extension settings? I set it to 144 to match style.

Guy
Guy
1/12/2011 10:35:00 AM #

Do you have the PrettyPhoto extension working with Syntax Highlighter enabled as well?

rtur.net
rtur.net
1/12/2011 4:11:45 PM #

Yes, I've never turned it off. This page for example has a code block: http://rtur.net/blog/post/2010/05/11/This-is-hot!.aspx

Jimmy Sigenstrøm
Jimmy Sigenstrøm
1/13/2011 10:27:17 AM #

Thx
Works like a charme.
No blog without a decent piece of software to display images, sp you saved the day. ;o)

Guy
Guy
1/13/2011 8:20:34 PM #

When I use IE8 to view this post the lightbox function does not work.  However it does funciton in Firefox and Chrome.  I installed on my test system and I get the same result.  When I disable Syntax Highlighter it does funciton in my test system.

Does anyone else have issues here with IE?

rtur.net
rtur.net
1/13/2011 8:37:16 PM #

It seems to be an issue with PrettyPhoto package itself. When I go on their site (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) and scroll to demo section, I'm getting same behavior in IE9. Image pops up, but "height" does not hold and it collapses back to narrow horizontal block.

barcode software
barcode software
1/17/2011 5:18:53 PM #

I haven't tried the PrettyPhoto package myself. I'll have to check it out. IE always seems to have problems. The world needs to be on Firefox and Chrome I think. Oh well. I like the look of your test album by the way.

John
John
1/19/2011 11:33:20 AM #

I've been working on the Lightbox and PrettyPhoto functionality for BE20 and finally got it working like I wanted yesterday. I used the WRG extension - which needed some significant modification to get things working properly, but got it all working. I've been using IE 8 without any problems and will test it later today with firefox.

rtur.net
rtur.net
1/19/2011 1:55:33 PM #

Cool. Let me know if you'll get it posted - I definitely don't want IE users having issues.

John
John
1/19/2011 4:48:31 PM #

I tested in IE 8 and Chrome and it works as expected... If you want to check it out, its running on the first few posts at my photo blog - www.photoblast.com

Peter
Peter
1/29/2011 1:37:24 PM #

Hi

I can't get the extension to load pictures from my album. I keep getting an "Object reference not set to an instance of an object"- error. Can anyone help?

rtur.net
rtur.net
1/29/2011 1:47:16 PM #

Make sure you have google DLLs in the /bin folder.

Steve
Steve
2/8/2011 3:02:49 AM #

Hi,
I'm trying to call a Picasa slideshow on my BE 2.0 site.
The page runs fine on my local development machine, but when i upload it to my host server, i get the following error:
Request for the permission of type 'System.Net.WebPermission, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed
i have tried building the site in .Net 3.5 and 4.0 and in full trust and medium trust. None of that seems to make a difference.
I did have better luck by precompiling the site, but i really don't want to do that while i'm still building and adding more features.
Any ideas on what might be wrong and how to fix it?

rtur.net
rtur.net
2/8/2011 9:23:22 AM #

That usually happens when host have trust level set strictly to medium. If you have a way changing trust level, IIS remote or control panel provided by host, try changing it to "High".

Jeffrey Patton
Jeffrey Patton
2/12/2011 6:24:10 PM #

Just downloaded your code, and on running under webmatrix to test out the functionality I received compiler errors on:
picasa.cs
prettyphoto.cs
lightbox.cs

Here is the error:
Picasa.cs(16,22): error CS0246: The type or namespace name 'ExtensionSettings' could not be found (are you missing a using directive or an assembly reference?)

I had to add the following to the using section on each file in order to get the site to finally load up.

using BlogEngine.Core.Web.Extensions;

Looking forward to testing this out, I just moved from Django to BlogEngine and miss my Photologue app.

Thanks,

Jeffrey Patton
Jeffrey Patton
2/12/2011 6:39:31 PM #

Hi, me again. Unless I missed something, user controls\picasa\admin.aspx was calling ~/admin/admin1.master which is a file that didn't exist on my system.

Also, the previous error showed up again after changing that to point to ~/admin/admin.master I had to add (using BlogEngine.Core.Web.Extensions;) to user controls\picasa\admin.aspx.cs.

I now see the admin interface for the control. I suppose it's entirely possible that I extracted my files in the wrong place altogether.

rtur.net
rtur.net
2/12/2011 6:54:05 PM #

Yes looks like it. Admin1.master is an old file existed before 2.0, it was changed to Admin.master a while before 2.0 released, so you probably pooled source for older version.

Jeffrey Patton
Jeffrey Patton
2/12/2011 7:28:36 PM #

That's it, I just noticed you have a download link on the original page where the instructions are to configure it, and I bet that's what I did...duh..sorry!

Eric Mooney
Eric Mooney
2/14/2011 3:40:15 AM #

Hey Ruslan,

Ive been trying to figure out why i cant seem to get the prettyphoto extension to work.  the picasa album is working fine, but prettyphoto just doesnt want to pop up.  so after reading comments here, i done a double check.  it seems i have it working, just not in IE as it works in Chrome.  I checked out this page too where the picasa album is working and the same happens with ie and chrome.

http://www.ericmooney.org/files/screenshot029.jpg
http://www.ericmooney.org/files/screenshot030.jpg

any pointers would be most welcomed.
Thanks
Eric

Jimmy Sigenstrøm
Jimmy Sigenstrøm
2/28/2011 2:09:54 AM #

Hi

I´m getting this error from the script, but it worked when i first installed it. Got any idea on what went wrong.?

Detaljer om fejl på websiden

Brugeragent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; Tablet PC 2.0)
Tidsstempling: Mon, 28 Feb 2011 08:05:09 UTC


Meddelelse: Objektet understøtter ikke denne egenskab eller metode
Linje: 4
Tegn: 5
Kode: 0
URI: http://www.sigenstrøm.dk/User%20controls/PrettyPhoto/js/PrettyPhotoStarter.js

rtur.net
rtur.net
2/28/2011 8:39:43 PM #

Most of the time when I run into errors like this, it ends up been too many jQueries conflicting with each other. I would look at the page source for ".js" and make sure only one jQuery included.

Jimmy
Jimmy
3/13/2011 6:00:37 AM #

Hi Sorry about the late answer.!

Here is a copy of the sourcecode taken from blogengine

using System;
using System.Text;
using System.Web;
using System.Web.UI;
using BlogEngine.Core;
using BlogEngine.Core.Web.Controls;

namespace App_Code.Extensions
{
    [Extension("PrettyPhoto2 - jQuery lightbox clone", "1.0", "<a href=\"http://rtur.net\">Rtur.net</a>")]
    public class PrettyPhoto2
    {
        private const string PrettyPhotoFolder = "User controls/PrettyPhoto";

        public PrettyPhoto2()
        {
            BlogEngine.Core.Page.Serving += ItemServing;
            Post.Serving += ItemServing;
        }

        static void ItemServing(object sender, ServingEventArgs e)
        {
            if (HttpContext.Current.CurrentHandler is BlogBasePage)
                (HttpContext.Current.CurrentHandler as BlogBasePage).LoadComplete += BasePageLoadComplete;
        }

        static void BasePageLoadComplete(object sender, EventArgs e)
        {
            var basePage = sender as BlogBasePage;
            PreparePrettyPhoto(basePage);
        }

        private static void PreparePrettyPhoto(BlogBasePage basePage)
        {
            var litLinks = new LiteralControl {ID = "ppControl"};

            if (basePage.Header.FindControl("ppControl") == null)
            {
                var scriptLinks = new StringBuilder();
            
                const string js = "<script type=\"text/javascript\" src=\"{0}{1}\"></script>";
                const string css = "<link type=\"text/css\" href=\"{0}\" rel=\"stylesheet\" />";

                scriptLinks.Append(string.Format(css, Utils.RelativeWebRoot + PrettyPhotoFolder + "/css/prettyPhoto.css"));
                scriptLinks.Append(string.Format(js, Utils.RelativeWebRoot, "Scripts/jquery.js"));
                scriptLinks.Append(string.Format(js, Utils.RelativeWebRoot, PrettyPhotoFolder + "/js/jquery.prettyPhoto.js"));
                scriptLinks.Append(string.Format(js, Utils.RelativeWebRoot, PrettyPhotoFolder + "/js/PrettyPhotoStarter.js"));

                litLinks.Text = scriptLinks.ToString();  
                basePage.Header.Controls.Add(litLinks);
            }
        }
    }
}
The folder PrettyPhoto with the folders css, images and js are all in a folder named PrettyPhoto under "Usercontrols"

The .cs file is in the folder "Extensions"

rtur.net
rtur.net
3/13/2011 1:57:56 PM #

I actually meant html source of the page, sorry for not been clear. But even though, see that line that adds jquery.js? Chances are you already have it, and commenting out that like might resolve js conflicts.

Nick
Nick
2/28/2011 10:36:34 AM #

I'm looking at converting my dasBlog to BlogEngine.net, and was trying to get your Flickr plugin to work with BlogEngine.net 2.0 and it doesn't seem to work. I can see the FlickrBar in the drop down list of widgets to add, but when I click the Add button, nothing happens. Are you planning on updating this to work with Blogine.net 2.0 as well?

Thanks

Nick
Nick
2/28/2011 10:47:24 AM #

OK - I just downloaded the refreshed version from the Gallery (the download off the extension page from your blog does not work), and I got it to work.

Unfortunately, it won't serve my needs because I can't seem to be able to configure it to only show MY photos (even if just the public ones). I can only show photos based off of a search term, but that could be anyone's.

Any chance of adding a small new feature?

rtur.net
rtur.net
2/28/2011 8:36:17 PM #

I did not look into authentication for Flickr yet. If it is not hard to use on .net side, that could be an easy addition. I just did not needed it at the time.

Erika
Erika
3/10/2011 9:03:29 PM #

I'm having an issue getting the album or gallery to show.  I created a new page and copied either and both tags to the new page - but it displays as actual text. I reviewed the previous posts and made sure I had no spaces in my gallery names, i have the Google DLL's and I've installed the latest version...

Clearly missing something here...

rtur.net
rtur.net
3/10/2011 9:27:07 PM #

If list of albums show up in admin UI and you copy-paste tag from there, you should be good. Try to use only album and add tag to one of the posts, check both list and single post. Also try different browsers to see if it makes any difference. If it still not working, send me a link so I can look at actual site, may be will spot something out of order.

Erika
Erika
3/10/2011 11:09:05 PM #

Killed all my browsers and started a fresh instance...works fine now. CRAZY!

Now for my next question. Were you able to extend the gallery to for the request by Voja? It's exactly what i'm looking for as well.

"Is it possible to extend it to have one page to show all public albums (one pic for each album) and when you click on a photo it will load all pictures in it? "

rtur.net
rtur.net
3/11/2011 1:45:06 PM #

Not yet, probably after we launch dnbegallery.org which is currently my first priority.

Erika
Erika
3/10/2011 10:00:58 PM #

Thanks for the quick reply!

2 albums show in the gallery and I can click the thumbnail through to Picasa. One private and one public. Neither work :(  

Copied/Pasted only the album tag into both a Page and a Post - IE7, IE8 and FF 3.6  

Still no luck. Unfortunately, I haven't launched the site and am working on localhost. It's going to take me a day or two before I'm in a position to get everything to the web.  Any other thoughts?

Neil
Neil
4/10/2011 6:29:55 PM #

Hello,

Thanks for your work on this extension.. I have it installed on my blog and I'm having problems with the full screen images aligning with the Right Hand Side of the page -  as an example check out this post and click the image:

http://www.linxs.net/geoblog/post/2009/07/06/Pipeline-Geotechnics-Introduction.aspx

Do you have any idea why this might be occuring? I had a look through some of the obvious stuff - created a post with mimimalistic formatting and had the same problem.

Hope someone has some ideas!

NB

rtur.net
rtur.net
4/11/2011 10:55:41 PM #

I've seen this on some themes before. The reason is that "body" element in your theme set to 980px. PrettyPhoto attaches itself to the body and expects it to be full page. This messes their javascript calculation forcing picture to the right. Solution is to add a wrapper "div" after body to hold content and set it to 980px instead.

Neil
Neil
4/12/2011 12:42:01 PM #

Super, I'll give it a try, and thanks for working on the extension - it's way beyond my capabilities to pull off!!

NB

Kamyar
Kamyar
5/7/2011 5:43:24 AM #

Thanks Rtur. Very handy. However, I have noticed that I lost Windows Live writer support for Lightbox after using your extension. But the workaround is fairly simple and you can add an option for you extension's built in support.
WLW just needs a dummy lightbox.js to support it. I have addded an empty lightbox.js in User Controls/Prettyphoto folder. (just a comment inside it to let users know that this is not the real lightbox) and added a couple of lines to your extension:  
in ItemServing event:  
if (e.Body.Contains("rel=\"lightbox"))
{
e.Body = e.Body.Replace("rel=\"lightbox", "rel=\"prettyPhoto");
}
And in PreparePrettyPhoto:
scriptLinks.Append(string.Format(js, Utils.RelativeWebRoot, PrettyPhotoFolder + "/js/lightbox.js"));  
And it worked like a charm!
Thanks again.

rtur.net
rtur.net
5/11/2011 5:58:29 PM #

I'll check this out, thanks for suggestion!

Graham
Graham
5/16/2011 4:45:25 PM #

Hi, appreciate the efforts.

Just one item to raise, its possible to have access to picassa without a gmail email address.

I had a root around and sorted it, but maybe make the gmail.com a text box so it can be overwritten with a different domain.

Keep up the good work!

Regards
Graham

Pingbacks and trackbacks (2)+

Comments are closed