SimpleViewer – Automatic building of the XML file

For those that have never used SimpleViewer, it’s a free Flash application that makes great portfolio pages.

To start, I wanted an easier way to update my gallery. I didn’t like the idea of having to rewrite the page or rebuild the gallery every time I wanted to add a picture. So I wanted to make it as automated as possible. Ideally I should be able to upload a full sized image and a thumbnail and the script take care of the rest, and it does.

This script is similar to the PHP build script available at the SV site, but this one does it in real time so that a new file doesn’t require rebuilding the data files. This script is the data file.

On to the instructions:
1 – Copy the PHP code from the bottom of this posting to a file named simpleviewer_portfolio.php
2 – Upload pictures if you need, although you probably already have them there.
3 – Edit the file. You must edit the paths under $thumbPath, $imagePath, and $webRoot. You probably will want to edit the title as well. For now, you can just leave the rest of them as defaults.
4 – Upload the file to your server.
5 – Edit the page that your album appears on. Instead of taking threepages to describe the edit, I’m just going to show what mine looks like. The changes are in line 3 and line

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600px" height="450px" align="middle">
<param name=FlashVars value="xmlDataPath=/simpleviewer_portfolio.php" />
<param name="wmode" value="transparent">
<param name="movie" value="viewer.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="BGCOLOR" value="#ffffff" />
<embed src="viewer.swf" width="100%" height="100%" align="middle" quality="high" scale="noscale" bgcolor="#ffffff" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="xmlDataPath=/simpleviewer_portfolio.php" wmode="transparent" />
</param></object>

Other than the bold, it probably looks a lot like your page.

Now all you need to do to add pictures to your gallery is upload two files to the correct directory and the next time someone views your gallery the new stuff will be there. You won’t notice anything different than most SimpleViewer portfolios, but if you want to see this working my portfolio is here.

One tip, if you name your files like I do and set the sort order to DESC the new files will always be first. I name files based on date, so files from today would start with 20050707. That way every time I upload new stuff it is at the beginning of the album instead of the end.

The only flaw is that the caption is left blank. I supposed I could have some sort of text file in the image directory that stored captions, but that goes against the plan of simplicity. And I don’t use the captions anyway :-D

Code

< ?php

/*  simpleviewer_portfolio.php

    Copyright 2005 Ryan Nutt
    http://www.hi-photo.net
    
    Feel free to use this script on your site, but I would
    appreciate a link to my site or an email to say 'Hi!'.
    */

/*  Usage:
    You will need two directories with images, one with full sized
    images and one with 45x45px thumbnails.  Each full sized image
    file must have a corresponding thumbnail file.
    
    You will also need to set up SimpleViewer to use an XML
    data source, and point that data source to this script.
    
    Inside <object> tags for SimpleViewer add
    <param name=FlashVars value="xmlDataPath=path/to/this/file/simpleviewer_portfolio.php">

    You will also need to add
    FlashVars="xmlDataPath=path/to/this/file/simpleview_portfolio.php"
    inside the <embed> tag.
    */

/*  Settings    */
/*  thumbpath and imagepath are the two directories that hold
    your thumbnails and images respectively.  These are relative
    paths from your webroot.    */
$thumbPath = "images/simpleviewer/large/";
$imagePath = "images/simpleviewer/thumbs/";

/*  sortOrder - The order to sort the images in.  Can be either
    ASC, DESC, or NONE     */
$sortOrder = "DESC";

/*  Title - self explanatory    */
$title = "Title for your album";

/*  webroot is the full path to your web root.  For many this will
    be /home/username/public_html/ - If you're not sure what to put
    here, ask your hosting company.     */
$webRoot = "/home/username/public_html/";

/*  thumbnailrows and thumbnailcolumns determine how many rows and
    columns of thumbnails to display.   */
$thumbnailRows = 5;
$thumbnailColumns = 2;

/*  navDirection is either left to right or right to left   */
$navDirection = "LTR";

/*  navPosition is the location of the thumbnails   */
$navPosition = "right";

/*  SimpleViewer Settings - These are the settings that determine
    the look of SimpleViewer.  Please visit the Simple Viewer site
    for more information.   */
$maxImageDimension = 400;
$textColor = "0x000000";
$frameColor = "0x000000";
$bgcolor = "0xFFFFFF";
$frameWidth = 2;
$stagePadding= 20;

/*  End of Settings     */

/*  Script code
    You shouldn't need to edit anything beyond this point
    */
    
header("Content-type: text/xml\n");
header("Content-Transfer-Encoding: ascii");

$outstring = '';

$outstring .= '<simpleviewer_data maxImageDimension="'.$maxImageDimension.'" textColor="'.$textColor.'" frameColor="'.$frameColor.'" bgColor="'.$bgcolor.'" frameWidth="'.$frameWidth.'" stagePadding="'.$stagePadding.'" thumbnailColumns="'.$thumbnailColumns.'" thumbnailRows="'.$thumbnailRows.'" navPosition="'.$navPosition.'" navDirection="'.$navDirection.'" title="'.$title.'" imagePath="'.$imagePath.'" thumbPath="'.$thumbPath.'">';

$imagearray = dirlist($webRoot.$imagePath);
if ($sortOrder=="DESC")
    {
    rsort($imagearray);
    }
elseif ($sortOrder=="ASC")
    {
    sort($imagearray);
    }
for ($i=0; $i<count ($imagearray); $i++)
    {
    $outstring .= '<IMAGE>';
    $outstring .= '<name>'.$imagearray[$i].'</name>';
    $outstring .= '<caption></caption>';
    $outstring .= '';
    }
$outstring .= '</count></simpleviewer_data>';

echo $outstring;

function dirlist($directory)
    {
    /*  Create an array to hold directory list  */
    $results = array();

    /*  Create handler for directory    */
    $handler = opendir($directory);

    /*  Keep going until all files in directory
        have been read  */
    while ($file = readdir($handler))
        {
        if(strlen($file) > 4 && substr(strtolower($file), strlen($file) - 4) === '.jpg' && !is_dir($file))
            {
            $results[] = $file;
            }
        }

    /*  Close the handler   */
    closedir($handler);

    /*  Close out   */
    return $results;
    }
?>