Picassa in the content area

[Jacob Søndberg]

I have been trying to implement a Picassa picture gallery into the content-area of the CMS. Picassa's layout is outstanding. It is very simple to implement Picassa in an ordinary html webpage since Picassa generates a html page that you can link to, and that way view the picture gallery. This is how it looks:
http://www.pokkers.net/Pokkers%20-%20Ho ... index.html

I have tried different solutions, but so far without any succes. Has anybody implemented Picassa succesfully? In that case how?

I think Picassa is the best picture gallery on the web, so we should try to find a solution.

[Dr.CSS]

The link goes to a Simpleviewer album page...

When you get a Picassa html page from it look at the source code and use just the album code in your page, you may have to change the paths to your images...

[cyberman]

Have you tried this ?

http://dev.cmsmadesimple.org/projects/simpleviewer/

[Jacob Søndberg]

Thanks for the answer but I still have some problems.

The html page from Picassa contains code in both the header and body.

How do I add the code in the header? 

[Dr.CSS]

The code in the head is a link to the CSS, rather simple CSS...
Which you would want to change as it will mess with the rest of your CSS...
You would have to put the HTML generated by it into the Content area of the page with out the or parts then change the links as you will have to upload all the target.html pages into a folder on your site... seems like a lot of work/changes just to use a simple layout like they use, you could just use their layout and make an Album template to achieve the same effect...
First |

Previous Picture |

Next Picture |

Last | Thumbnails

BODY {
MARGIN-TOP: 70px; FONT-SIZE: 11px; BACKGROUND-ATTACHMENT: scroll; BACKGROUND-IMAGE: url(logo.gif); MARGIN-LEFT: 80px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #ffffff
}
TD {
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
P {
BACKGROUND: white
}
H1 {
FONT-SIZE: 12px; COLOR: #979797; FONT-FAMILY: Helvetica, Verdana, Arial
}
A:hover {
COLOR: #804c4c; BACKGROUND-COLOR: #f0efe3
}
H2 {
FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
H3 {
FONT-SIZE: 18px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.textsm {
FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.textbg {
FONT-SIZE: 20px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.textreg {
FONT-SIZE: 12px; COLOR: #979797; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

[Jacob Søndberg]

Thanks Mark. Now my Simple Viewer album is running, but I can only have one album running.

In the content area I have added the code and changed the viewer.swf path to the folder "Pokkers_HO" as you can see below.

SimpleViewer requires Macromedia Flash. Get Macromedia Flash. If you have Flash installed, click to view gallery

var fo = new FlashObject("Pokkers_HO/viewer.swf", "viewer", "100%", "60%", "3", "#FFFFFF");
fo.addParam("quality", "best");
fo.write("flashcontent");


It works when the imageData.xml file is placed in the root library but when I change it to the Pokkers_HO library the program do not open. The viewer tries to open up, but the program cannot find the imageData.xml although it is placed in the Pokkers_HO folder. In the imageData.xml file I have change image path and thumbnail path to:  imagePath="Pokkers_HO/images/" thumbPath="Pokkers_HO/thumbnails/".

The folder Pokkers_HO contains these files

imageData.xml   
index.html
readme.txt
viewer.swf
flashoject.js
images folder
thumbnail folder.

It is as if I need to change a path to the imageData.xml file some place, but I can´t find it anywhere in the files above. Can you tell where I need to change this path and maybe what I am doing wrong. I am familiar with webprogramming so dont hessitate sending me code or a tecnical description.

Thank you very much for the help.

Jakestar 

[osnet]

I wonder if a little module for re-rendering picasa html web albums would be well recieved? Just something that would take content from between the BODY tags and re-write the paths.. 

[Jacob Søndberg]

I figured out how to implement the Picassa Simple viewer web albums into the Content Area.  "Folder1" is the folder on the server where the Simple Viewer album i stored.

1. You need to insert the code below into the content area. Folder1 is the folder-path to the album.

SimpleViewer requires Macromedia Flash. Get Macromedia Flash. If you have Flash installed, click to view gallery

  var fo = new FlashObject("Folder1/viewer.swf", "viewer", "100%", "60%", "3", "#FFFFFF");
  fo.addVariable("preloaderColor", "0xffffff");
  fo.addVariable("xmlDataPath", "Folder1/imageData.xml");
  fo.addParam("quality", "best");
  fo.write("flashcontent");


2. Change the path to Image/Folder1 and Thumpnail/Folder1 in the imageData.xml file

3. Insert the following code in the header of the template

This solution works but if someone comes up with a smoother solution, I would like to hear from you.

Jakestar