Topic: How to Create and Easily Updated Gallery?

Hi, I was wondering if someone could help me please?
I am trying to put together multiple gallery pages for someone's website which they want to be able to update, re-order, tag etc in their own time. They need to be able to do this easily as they do not understand html at all and do not want to have to come to me everytime they want to make changes. They have a Google account and have uploaded, sorted and named their albums already through Google's Picasa Web Albums online. I've already tried embedding an album as a slideshow directly from PWA but it looks awful. I came across the SimpleViewer Picasa Template and it looks as though it could create the exact look they are after, eg white borders, large image above, five thumbnails underneath etc. Perfect!
I've had a look at the instructions and it looks like they need to have Picasa 3 installed on their computer, and to have created the albums in this software on their hard-drive, before exporting to html. They haven't done this. However, I now realise that they can download their finished galleries from Google to Picasa 3 after installation, so can get around the problem that way. From what I can gather, once the html code has been generated through SimpleViewer and embedded into the site, it will only display the images included at the time of its creation. Is this correct? This will not do as they will want to add, remove or re-order images in the future. What I would like to know is, is there a way to use SimpleViewer to embed galleries from their online account into their website, which can then added to/updated easily without the need for any further code generation? I would just like to know if this is a possibility and if so, how this would work. I would be happy to pay for the Pro version if this will do the trick.
Many thanks,
Bek.

Re: How to Create and Easily Updated Gallery?

Hi Bek,

Unfortunately, SimpleViewer does not currently support pulling images from Picasa in the same way in can with Flickr. It has been suggested.

You might try this website  http://www.paulvanroekel.nl/picasawebal … pleviewer/  for a method that is supposed to work using Picasa with SimpleViewer, although I have not had success yet; But it might be my shortcoming, and not Paul van Roekel's method.

If someone is starting fresh, you can simply have them jump into Flickr.

If someone is already invested in time into Picasa, then....

If you give Paul van Roekel's method a try, and have success, it would be great if you sent me an email (in my profile)

Good Luck

Last edited by Dave Pitman (2012-04-06 16:20:14)

Re: How to Create and Easily Updated Gallery?

I have just tried Paul van Roekel's script today and it seems to work fine (though it did not work the last time I tried it, possibly due to the Google/Picasa servers having a bad day).
His online demo still does not seem to work but the script which generates the XML file for SimpleViewer does. It can be downloaded from this page.
Just edit the 'xml.php' file in a plain text editor and change lines 7 and 8:

$userid = 'YOURUSERNAME';
$album = 'ALBUMNAME';

... to reflect your own Picasa Web username and album name.
For an example try:

$userid = 'picasateam';
$album = 'VegasWeekend';
Steven Speirs
SimpleViewer Support Team.

Re: How to Create and Easily Updated Gallery?

Thankyou both for your quick replies, it is much appreciated. I will give it a go later and hopefully I'll get it working.
Cheers,
Bek.

Re: How to Create and Easily Updated Gallery?

Steven Speirs wrote:

I have just tried Paul van Roekel's script today and it seems to work fine

Hi Steven, 

All I get is "No images specified in Gallery XML"

It makes no difference if I set the username and albumname, or the alernate "build feed URL",  same result.

Since the steps are so simple, I don't know how I am not complying with them, but I must be, somehow?

Can you share a copy of a working XML.php for examination?

Also, I am confused as to how the sv.js library is used.  index.html, from Paul's download package contains no calls to SV js that I can see. Perhaps it just needs the .swf file?

And,  even if the script were to work (for me), doesn't the XML file need edited in order to specify user defined options?

I know you are not the support for Paul, but since you have it working, you get my Q's, sorry!  smile

Re: How to Create and Easily Updated Gallery?

Here are a couple of test galleries.
In each case, I have uploaded the 4 files from the download package and the only modifications I have made were to change the username and album name in each case.
[Gallery removed.]: Username paulvanroekel, Album Name BlackAndWhite
[Gallery removed.]: Username picasateam, Album Name VegasWeekend
Here is the complete 'xml.php' file for Test gallery 2:

    <?php

// Simpleviewer for Picasa Web ALbums
// get all the details on www.paulvanroekel.nl/picasawebalbums/


    $userid = 'picasateam';
    $album = 'VegasWeekend';
    
    
    // build feed URL
     $feedURL = "http://picasaweb.google.com/data/feed/api/user/$userid/album/$album?imgmax=912";
     // $feedURL = "http://picasaweb.google.com/data/feed/api/user/$userid?kind=photo";


    // read feed into SimpleXML object
    $sxml = simplexml_load_file($feedURL);
    
    // customize your gallery
    echo "<simpleviewergallery title=\"$album\" textColor=\"FFFFFF\" galleryStyle=\"CLASSIC\" frameWidth=\"5\" thumbColumns=\"2\" thumbRows=\"4\" >\n"; 


    // iterate over entries in album
    // print each entry's title, size, dimensions, tags, and thumbnail image
    foreach ($sxml->entry as $entry) {
      $title = $entry->title;
      $summary = $entry->summary;
      
      $gphoto = $entry->children('http://schemas.google.com/photos/2007');
      $size = $gphoto->size;
      $height = $gphoto->height;
      $width = $gphoto->width;
      
      $media = $entry->children('http://search.yahoo.com/mrss/');
      $thumbnail = $media->group->thumbnail[1];
      $content = $media->group->content;
      $tags = $media->group->keywords;
  
          


        echo "<image imageURL=\"";
        // url van photo
        echo $content->attributes()->{'url'};
        echo "\" thumbURL=\"";
        // url van thumb
        echo $thumbnail->attributes()->{'url'};
        echo "\">";
        echo "<caption>";
        echo $summary ;
        echo "</caption>";
        echo "</image>";
        echo "\n";

   
        }
        

    echo "</simpleviewergallery>";

?>

Perhaps it has something to do with the PHP installation on your web server (such as SimpleXML not being enabled).
I cannot find the requirements for his script anywhere on his web site but I may be overlooking them.

Also, I am confused as to how the sv.js library is used.  index.html, from Paul's download package contains no calls to SV js that I can see. Perhaps it just needs the .swf file?

Paul's example uses a version of SimpleViewer prior to v2.1 (when the 'svcore' folder was introduced). It uses only the SWF file and does not support Universal Playback.
Thankfully, his script was written for SimpleViewer v2.x so his 'xml.php' file can be used with the current version of SimpleViewer (v2.3.0). Just use the following embedding code:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars={};
flashvars.galleryURL="xml.php";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

... and include his 'xml.php' file (with your chosen username and album name) in your gallery folder.

And,  even if the script were to work (for me), doesn't the XML file need edited in order to specify user defined options?

Yes. You would need to add your gallery options to line 20 of the 'xml.php' file (as attributes to the opening <simpleviewergallery> tag).

Steven Speirs
SimpleViewer Support Team.

Re: How to Create and Easily Updated Gallery?

Got it Steven.  It was that the album was not quite public; It was public with a direct link, but needed to be just plain public. I didn't notice at first because no type of login was necessary to see the album.

Thank you for the hand holding, it is much appreciated.

Re: How to Create and Easily Updated Gallery?

Thankyou all for the replies. I have managed to successfully set up a gallery showing images from Picasa. My only issue is that I am trying to replicate a particular gallery someone had their heart set on. I would like it to look as much like the Whiteout Theme gallery from Pikachoose as possible - http://themes.pikachoose.com/whiteout/index.html .
It is almost there, all I need to do is to move the thumbnails, in a single row, under the main image. At the moment, the main image is to the right of the thumbs and changes in size depending on the number of thumbnails set. If possible I'd like the image caption to sit just under the image and above the thumbs. There are also borders and shadows around the thumbs but not the main image and I have no idea how to change this either. I've had a look at the provided files and there doesn't appear to be a .css file. If there was one then I could probably figure out what to do based on the code from the pikachoose gallery. So far I've modified the original "index.html" code and the "xml.php" code, as far as I know how. My modified gallery still has the thumbs down the left side. I am thinking that there must be a way to move them under the main image, because I originally tried to create the gallery with svBuilder, which gave me the option to customise the layout. I got it to look almost like the Whitout Theme as there were options to set the maximum image size, gallery width and height, gallery style and frame colour and width. The was the option to set the thumb position to either top, bottom, left or right and change the number of columns and rows. I have managed to change the original values for some of these options myself in my own gallery.html and the provided .xml file but couldn't see how to change them all. Any help on this would be greatfully appreciated. Cheers.

Re: How to Create and Easily Updated Gallery?

It is almost there, all I need to do is to move the thumbnails, in a single row, under the main image.

Set the following in your gallery's XML file, in your case, 'xml.php'. (See below for details.)

thumbPosition="BOTTOM"
thumbRows="1"

If possible I'd like the image caption to sit just under the image and above the thumbs.

This can be achieved only with SimpleViewer-Pro and by using a Fixed Layout: http://simpleviewer.net/simpleviewer/pr … html#fixed
In order to use SimpleViewer-Pro with the Picasa Web script, you would replace the 'simpleviewer.swf' file from the script's files with the 'simpleviewer.swf' file from the SimpleViewer-Pro download package ('simpleviewer_pro_230/web/svcore/swf/simpleviewer.swf').

There are also borders and shadows around the thumbs but not the main image and I have no idea how to change this either.

Again, SimpleViewer-Pro is required and you would then set:

imageFrameStyle="NONE"
imageDropShadow="FALSE"
thumbFrameStyle="SQUARE"
thumbDropShadow="TRUE"

I've had a look at the provided files and there doesn't appear to be a .css file.

All the above options are set as attributes to the opening <simpleviewergallery> tag in the gallery's XML file.
Change the following line in the 'xml.php' file:

echo "<simpleviewergallery title=\"$album\" textColor=\"FFFFFF\" galleryStyle=\"CLASSIC\" frameWidth=\"5\" thumbColumns=\"2\" thumbRows=\"4\" >\n"; 

... and add the options alongside the existing ones (use a \ before each " when entering each option).

Steven Speirs
SimpleViewer Support Team.

Re: How to Create and Easily Updated Gallery?

Thanks for the response, you've been very helpful!

Re: How to Create and Easily Updated Gallery?

Thankyou for the help so far, the gallery is looking so much better. There are, however a couple of things I would like to fix and I can't see how from the configuration options.
I've added a drop shadow to my main image (imageDropShadow) but it is only visible along the right and bottom edges of the border. I would like it to surround the whole image, like it does for the thumbnails, as my main image has a white border and is set against a white background. It looks really odd as it is at the moment. Is this possible and how would I go about it?
Also, I would like the caption to sit in a sized box with a border and over the main image, like in the Pikachoose gallery and to automatically show when there is a caption. At the moment, I have the caption overlaying the bottom of the image, the text is dark over a semi-transparent white background. However, it only displays when the user hovers the mouse over the image. I would like it to always display when there is a caption and not display at all when there isn't. The settings I have used for this are: captionBackColor=\"FFFFFF\" captionFontName=\"Helvetica, Arial,_sans\" captionFontColor=\"333333\" captionFontSize=\"18\" captionPosition=\"overlay_BOTTOM\". Is there anything else I can do to improve this?
I know I'm being really picky, I just fell in love with the Pikachoose whiteout gallery and want to reproduce it as accurately as I can, if at all possible.
Thanks for all your help, you've been amazing!
Bek.

Re: How to Create and Easily Updated Gallery?

I've added a drop shadow to my main image (imageDropShadow) but it is only visible along the right and bottom edges of the border. I would like it to surround the whole image, like it does for the thumbnails, as my main image has a white border and is set against a white background. It looks really odd as it is at the moment. Is this possible and how would I go about it?

The only drop shadow configuration option available is dropShadowStrength.
There is no option to determine the sides of the main image on which the drop shadow is displayed.
You could, however, add an image frame and/or drop shadow to your images using an image manipulation program such as Photoshop before using the images in SimpleViewer. You would then disable SimpleViewer's own image frame and drop shadow by setting imageFrameStyle="NONE" and imageDropShadow="FALSE".

Also, I would like the caption to sit in a sized box with a border and over the main image

It is not possible to add a border to the caption area. You can, however, choose the color for the caption background (via captionBackColor) and the opacity of the caption background (via captionBackOpacity).

At the moment, I have the caption overlaying the bottom of the image, the text is dark over a semi-transparent white background. However, it only displays when the user hovers the mouse over the image. I would like it to always display when there is a caption and not display at all when there isn't.

Set showOverlay="ALWAYS". You may also like to disable the image number ('x/y') which forms part of the caption, by setting showImageNumber="FALSE".

Steven Speirs
SimpleViewer Support Team.

Re: How to Create and Easily Updated Gallery?

Thanks Steven,
I had a feeling I wouldn't be able to get it looking exactly how I wanted. I just wanted to be certain before I gave up.
I've managed to find a solution to the drop shadow problem by making the image border colour a very pale grey so that it JUST stands out from the white background, but isn't obviously grey. I think it would look a lot better if the images were given a frame and dropshadow in Photoshop but there are about 200 images on the site, with more to be added soon, and the lady it's for is incredibly busy and will be adding further images herself to her Google account. She is a complete techno-phobe, so I can't see her spending hours on the computer doing that, the less she has to do the better!
Thanks for all the advice, the gallery looks great!
Bek.