Google+ Conntected Gallery How-to

The What
Picasa web albums are great in great part due to their integration with Google+. If you’re like me, you have a lot of images on Google+ and you want to have a portfolio page on your blog. To keep it simple, like me, you also need a way to display a portfolio album from Picasa/Google+ on your site.

You could create your own thumbnails, and HTML, to show a pop-up of the full-size image when the thumbnail is clicked; but, that’s a lot of effort. Wouldn’t it be nice if you can just give some gallery plug-in your Google+ user name and album name then have it display the images for you? Wouldn’t it also be great if this gallery was viewable on every browser including mobile browsers on tablets like the iPad?

That’s what I asked myself and, after much research, I found Galleria (if you’ve followed me on Google+ you know I’ve been working on this for weeks). In this post, I’m going to show you how to do all that and create a Portfolio like you see below. (By the way, I am in no way connected with Galleria and I have nothing to gain by telling you about it. I use it and it works, so I’m sharing :)) Disclaimer done, now let me show you how to use it.

The How
First, you need your own site and to have FTP access.  Unfortunately, this will not work with Blogger or other services that do not allow you FTP access. Believe me, I tried. You can “sorta” get it working if you use blogger, but it will be problematic. Find me on Google+ if you want more details.

Second, you will need to download Galleria here.  The download will also include Galleria, the Classic Theme, and the Picasa plugin you will need.  By the way, the classic theme is free, but you can buy other themes from Galleria.  I stuck with classic for now.

Third, upload Galleria to a folder on your server.  Now, upload your galleria files up to your galleria directory.  Once you’re done, your FTP directory should look like this:

Almost there, now create a new page for your site and call it Portfolio (or whatever you want).  Copy the code below and paste it into the editor.  By the way, if you’re using wordpress, be sure to use the HTML editor, not the visual editor.

The code I use is below.  You might be wondering why it’s formatted as it is (i.e. why isn’t it neat with line breaks between each of the includes).  The reason for that is WordPress likes to add paragraph tags everytime you hit enter and that will screw up how your portfolio looks.  Keep it simple, just copy the HTML below as is and paste it into your page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script src='./galleria/galleria-1.2.5.min.js' type='text/javascript'></script><script type="text/javascript" src="./galleria/plugins/picasa/galleria.picasa.min.js"></script>
<div id="gallery" style="height:615px;width:820px;"></div>
<p><script  type="text/javascript">Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');   
$('#gallery').galleria({
    debug: false,
    picasa: 'useralbum:111852119488463725230/Portfolio', // 'galleriajs' is the username and 'Demo' is the album ID
    picasaOptions: {
overlaybackground:' #cccccc'
    }});</script>

Finally, now just change the numbers after “useralbum” in the code above to whatever your Google+ user name is.  That will give Galleria your username, then just give it the album name you want.

For me it’s: useralbum:111852119488463725230/Portfolio.  Yours will be different, make sure you use your info unless you want to show my portfolio on your site.

That’s it!  You should have a fully functioning page.

Problems?
If you’re having issues, checkout the documentation pages on Galleria’s website.  Also, you can ping me on Google+ .  I’ll do what I can to help but please know, I will try hard to help you but I can’t debug everyone’s site.