On this page, we will learn to add the photos from Picasa Web Album into Google Page Creator in a simple way. In a first time, we will explain what is Picasa Web Album and why this service can be useful to store pictures on the web. In a second time, we will describe how to add a first album in your pages. In the last part, we will explain how to improve this gallery of photos.

For each 'result', you can click on the picture to see the real result.

What is Picasa Web Album ?

Picasa Web Album is a service from Google, free and easy to use. If you are familiar with Google Page Creator, you should already have a Google account and the sign will be extremely simple. The main interface of Picasa looks like :

On the previous picture, you can see that you can manage your photos in different albums which can be public or not. Indeed, in Picasa, you can share photos with your friends or your family. But for us, you have especially 1024Mo of storage only to store your photos on the web!

I have never seen the storage limit from Google Page Creator, because Google provide enough different services for any type of media files, so why not use them? For this tutorial, I will use an album that you can see here. This album is private (you need the authkey) and contain some photos with captions above.

One of the most interesting things for Picasa Web Album is that you can use a sort of FTP software for the upload of many pictures. This software is... yes Picasa. In fact, it is Picasa2 but it is really nearby. You don't need to use this sofware for the upload but it is simpler and faster. The main page of Picasa is here.


How to add Picasa Album into Google Page Creator ?

Now we will see how to add all the pictures of a Picasa Album into Google Page Creator. The better way I found to do this was precisely to use the script of Picasa Album. You can see different thumbnails above these lines, click on them to see them in a wide size and follow the steps. It is like a presentation powerpoint... This presentation is only for public albums.



In the previous presentation, we learn to add a very simple album into the Googlep Page Creator pages. I don't think that it is really complicated so we can now improve somewhat the difficulty. Let's go!


Now, you have a private album and you want to use this script. No problem, you just need to give the authkey number. This number can be obtained in the URL of your Picasa Album when you are in Picasa Web Album, as shown on these pictures :

Just select the end of this URL, copy it and paste it as the third parameter of the function as shown in this example :


The authkey is just a number to prevent anyone to see your albums and is absolutely not an access number or something which give complete access to the album. It is just another reference to this album. For more information about this key, read this short article of Google, here.



Sometimes, it could be useful to indicate to the visitor what sort of pictures he is watching. For this, just add a title to this album in the fourth parameter, as shown here :

writeAlbum('gilles.rasigade','USAUniversityOfIllinois','d1BnbF7s-2I','My Title !');

Note that if you don't need an authkey for having access to your album, you just let the third parameter empty as :

writeAlbum('gilles.rasigade','USAUniversityOfIllinois','','My Title !');

Result :



Your album is too big for you ? You prefer having smaller pictures ? No problem, just indicate a specific height to your album in the fifth parameter as :

writeAlbum('gilles.rasigade','USAUniversityOfIllinois','d1BnbF7s-2I','My Title !',150);

This height doesn't have quotes around because it must be parsed as an integer. This height is given in pixels.

Result :



In Picasa Web Album, you can add captions to each picture. It can be useful for photos by example but here, it will be useful later to sort your pictures and select just some of them in one album. Here, we will just choose if you want or not display these captions. The value of this sixth parameter should be true (if you want to display them) or false (if don't). By default, the captions are shown so if I don't want to show them, I write :

writeAlbum('gilles.rasigade','USAUniversityOfIllinois','d1BnbF7s-2I','My Title !',150,false);

This parameter doesn't have quotes around as the height because it must be parsed as a boolean.

Result :


Filter your photos from one album

new! It is now possible to display only the first photos of an album. Just enter an integer for this parameter and you will display only the first pictures you want.

Now if you have an album with a thousand of photos and you want to show only a part of them, you can with this seventh parameter (and I think some organization in your album!). This filter works for the captions of each picture and not on the file names (it is an arbitrary choice, I'm agree). By example, in this album of photos, if I just want to select the photos with 'Photo' in their captions, I write :

writeAlbum('gilles.rasigade','USAUniversityOfIllinois','Y6vzYSz8GlA','My Title !',150,true,'Photo');

I'm agree, the length of the calling begin to be quite long but it is not really difficult for now. And it won't! With this line, I will just display the pictures with the word 'Photos' in their captions. It is not really useful for this example but if you have an album in Picasa with some pictures on the Italia and the Spain (why not? they are beautiful country!) and with captions organized as : 'Italia - bla' and 'Spain - bla bla', you can select all your photos of Italia in one hand and all your photos of Spain in the other hand.

Note : if you want to filter several words, just write : 'word1|word2|word3|...'. You need to be really organized but it is possible.

I use this technique for just select correct pictures to the tutorial presentations. By example, the presentation on this page use this parameter to select only the pictures with 'PicasaAlbum - ' in their captions. You don't see 'PicasaAlbum - ' in their captions? That's right and it is explain in the next point!

Result :


Replace words in captions

If your have a well organized album but you don't want to display some parts of the captions, it is possible with this parameter. As explain above, I use this for erase the 'PicasaAlbum - ' from my captions. For doing this, you just need to write :

writeAlbum([...],'Photo','PicasaAlbum - ||');

In this label 'PicasaAlbum - ||', the first part 'PicasaAlbum - ' do the reference to the words that must be replaced, the second part '' (empty here because I want to erase it) is the label of replacement. If you want to replace more words, just continue this label with the same logic : A0|A1|B0|B1|C0|C1|...

Result : (value 'photo|ABCDE|')


Specify a target

This parameter can be used if you want to specify a specfic target when the visitor click on one of your picture. Its value must be the id or name of an iFrame. I'm sorry, you need here to use some HTML. So, if you specify in your page an iFrame, anywhere, with an id, you can launch the links directly in this iFrame by filling this parameter.

By example, if you want to open your pictures in a specific iFrame called 'myiFrame' by example, just write :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame');

By default, the script will call a specific HTML page which can display correctly your picture in the dimensions of the iFrame without deformation. It can be change by a next parameter.

Result :


Vertical Album

For the moment, this album was always horizontal. It could be interesting to have the same album but vertical. Just indicate this choice to the function by writing :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame',true);

This value must be true or false as the parameter for the captions. The problem now is that if you don't specify a width, the script will choose to fill a width of 300px. If you have the narrower album, you can modify the width with the next parameter.

Result :



This parameter works exactly as the height parameter. Just indicate here a number of pixels. For me, I need to try several times to find the correct size. Note that the function still use the previous height, so if you don't modify it, you will have a very small album. You can increase the height and decrease the width as you want, the pictures should be automatically adapted.

Result :



This parameter is used in complementarity of the target parameter. If you want to specify an URL to all of your pictures, you can here. Beside this, you can enter specific names. If you want that all your pictures link to your Picasa Web Album, just enter 'album', as :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame',false,-1,'album');

Note : The width=-1 indicate that no specific width will be used. The script will use 100%.

Here, the script will create the link to your album with the user name, album name and if necessary authkey number.

Result :

If you want to create a wiki style to your enlarge photos, just enter 'wiki' as :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame',false,-1,'wiki');

This time, it will call another HTML page which can display your pictures and their captions with the Wikipedia's style. Could be useful in complementarity of an iFrame...

For other URLs, just enter the link here. If you had entered a specific target, this URL will be open in this target. By default the target is '_blank' (open in a new window).



Now you can specify of you want to display your album as a slideshow. This parameter must be true or false because it must be a boolean. The script will automatically display your album as a slideshow and you will just need to specify the properly width end height. By example, for the simplest slideshow, you must write :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame',false,-1,'',true);

Result :

If you just want to insert a slideshow to your web site, you can just call with the same logic the function :



Temporisation timenew!

This slideshow can be adapted in height and width and you can with this parameter modify the time between two transitions of pictures. By default, the time is 4000 milliseconds (4 seconds) and is the time by default for the Picasa Web Album Slideshow (yes, I am not really original...). So now, if you want to decrease by two times this temporaisation just specify 2000 (for 2s=2000ms) in the next parameter, as shown :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame',false,-1,'',true,2000);

Result :


Fading timenew!

Here, you will specify the time for doing the transitions with the fading effect. By default, this time is 750ms so if we want to increase it a few, just write :

writeAlbum([...],'Photos','PicasaAlbum - ||','myiFrame',false,-1,'',true,2000,1000);

Here, you will have 10 steps of fading of 100ms for doing the transitions. If you don't want to have transitions by fading, just enter here -1. The script will understand that you don't want to show transitions.

Note that if the time between two transitions is inferior to the time for doing a transition, the script will increase your time between the two transitions. If you want to display a really fast slideshow (why not?), you will need to adjust these two parameters or to enter -1 for the time for one transition.

Result :



Here you will find a list of all the parameters for this album :

  • Function name : writeAlbum();

  • Param #1 : User Name - String;

  • Param #2 : Album Name - String;

  • Param #3 : Authkey - String;

  • Param #4 : Title - String;

  • Param #5 : Height - Integer;

  • Param #6 : Captions - Boolean;

  • Param #7 : Filter - String;

  • Param #8 : Replace - String;

  • Param #9 : Target - String;

  • Param #10 : Vertical - Boolean;

  • Param #11 : Width - Integer;

  • Param #12 : URL - String;

  • Param #13 : Slideshow - Boolean;

  • Param #14 : Temporisation Time - Integer;

  • Param #15 : Fading time - Integer;