Using Simpleviewer 1.8.5

UPDATE 22SEP08!!: Simpleviewer has been updated. I've updated the content of this tutorial to reflect this. More advanced customization has been added to Simpleviewer in the latest version, but I'll stick to the basics.

     So, you want to build your own photo gallery? Simpleviewer is an easy to use gallery code with an attractive format that's almost completely customizable. In this tutorial, I'll run through all the steps you'll need to set up your gallery. Here is an example of a gallery on my page, using the same files and code presented here: Sample Page

     First off, download my Simpleviewer template. Download the .zip file by clicking here. This has been updated to the newer version of 1.8.5. You can download from here, or- and this might be a better idea- you can download from the Airtight Interactive site. Remember, though, that the new version does NOT come with the file, buildgallery.php. You have to download that separately from HERE. I use the PHP version.

     When you unzip this archive, you will find a folder entitled template, which has 2 subfolders- images and thumbs- and 4 files. All of what you see was created by the nice people at Airtight Interactive and was then modified suit my needs. The files we will be modifying for your gallery will be index.html, buildgallery.php, and later on, gallery.xml. The index.html file is your gallery webpage. Simpleviewer is a Flash movie that happens to have your images as its frames. The movie needs to placed on a webpage. index.html is that page. The buildgallery.php file is what creates your gallery- it organizes your images and creates thumbnails and includes info like locations of items, colors, background images, user interface, etc. The gallery.xml file is modified when you upload your gallery images and run buildgallery.php. I'll explain more about that later.

     You'll be using this template folder for every gallery you create, so you'll want to keep it around. Create duplicates of it(or create a new folder and copy the files and folders into it). Each gallery should have a unique folder name. So, do that now- create a new folder and title it something simple and unique. Do not include spaces or punctuation. Copy the files from template and paste them into your new folder. You will be uploading this entire new folder to your server.

.

Preparing Your Images

     Before you begin uploading anything, you need to format your image files properly. Everything needs to be a baseline(standard) JPEG in a suitable size for web browsing. Before opening any of your image files, know that they way I have the buildgallery.php file set up, it will display images in your gallery in alphabetical order. If your uploading images off your digital camera- they should already have a name and a number, so they should be in chronological order with a common file name and an ascending number. If your uploading images from numerous sources, you might want to retitle some of them so they arrange alphabetically in the order you want them presented. Do this BEFORE opening them up in Photoshop(and we will be using ONLY Photoshop in this tutorial).

     Once you have all your images in order, we're ready to begin resizing them and moving them to the simpleviewer folder. Open all your images at the same time in Photoshop. Simpleviewer was created to handle around 50 images at a time, but I've exceeded that by a bit and not had any stability issues. Anyway, resize your images to whatever size you want them to be presented on the web. I use 7" as the measurement of the long side of my image with 72 dpi as the resolution. Note: Simpleviewer resizes these images in the gallery presentation area based on the web broswer window size of the computer viewing them. Only when the user clicks on Open image in new window do they see the image at full size. Since Simpleviewer is a Flash movie, the images cannot be saved by the user until the actual image file is accessed and opened in a new window in this manner.

     What you want to do is save each file into the images folder in your new gallery folder. Doing this process over and over again is extremely time consuming, so what I do is create a Photoshop Action for this saving process. This is an optional section:

Optional Section! If you're fine with the way you format your images, then skip this section.

1. In Photoshop, set the size/resolution of your image.
2. Go to Window> Actions. The Photoshop Actions palette will show up.
3. Click the little arrow in the upper right of this palette, and in the drop-down menu, select New Action...
   
   

4. • Select a Name for your action- this will only be a temporary action, so don't think too hard.
   • The Set is whatever Actions folder you're placing your action in. In the image above, I just happen to have an actions folder entitled KUrt. You can create a folder, if you want- but it's not really necessary. You'll probably want to delete the action you're creating now, as soon as you are done with this set of images, or when you start a new one.
   • Function Key is important. Set it to whatever key you want- just make sure it's not being used. I am using Cmd+F1.
   • Don't worry about Color.
5. Hit RECORD- watch what you do from here on out- everything you do will be recorded by Phtoshopp, so do ONLY what I say.
6. Go to File> Save As... and browse to the images folder in your new gallery folder and hit Save.
7. A jpeg dialogue will come up. Make sure that Baseline"Standard" is selected and hit OK.
8. Close your image file.
9. In the Actions palette, hit the square to stop recording.

     In your gallery folder, right click on buildgallery.php and open it with any text editing software. On a Mac, it's probably TextEdit. On a PC, WordPad. Now, let's breakdown what you're seeing and what you need to change. Pictured below is the top portion of the file and the only part we need be concerned with right now. I've clipped off all the credit info at the top.

• umask(022); This is a bit of code that my server admin was nice enough to put in. I found myself not being able to create new galleries, and it turned out that sandwich.net(my host) had just updated their .php server. James Renkin- the administrator of sandwich.net was nice enough to look through this file and make this correction.
• textColor : Pretty self explanatory. Just put in your hexdecimal code AFTER the "0x". You can find a chart of hexadecimal colors HERE.
• frameColor : Obviously, the color of your frames. The 660066 is a purple color, but you can put any color you want here.
• thumbnailColumns and thumbnailRows : The rows and columns of your thumbnails. I have a 5x4 display- that's 5 across and 4 down. I find that it works nicely in all browsers, and leaves enough room for a paragraph of descriptive text beneath it.
• Your Gallery Name Here : Enter the title of your gallery. If you include any punctuation, you will have to use ascii text. Punctuation like apostrophes or quotes can muck up the code(which is also filled with such punctuation, necessary to its functionality), so you have to use the ascii equivalents. HERE is a page with a table of the ascii equivalents to various characters.
• $showDownloadLinks = true; : You shouldn't mess with this, but I thought I'd point it out. This creates that little line of text so that the user can click and open the image in a new window. As stated before, the images you see on your gallery page are only parts of a Flash movie. Thus, you cannot save them. When you click on the download link, it accesses the actual image file used by the Simpleviewer and displays it on a new page in its full size, allowing for download.

index.html

     The only thing you need to change here is the title, which will be displayed in a web browser and the background color, which is the last item in the SWFObject code line. For my galleries, I use #000000- black.

     As long as the permissions are set like in the above image(owner: read and write), you should be fine. Now, open your web browser and type in the gallery folder's address and then "/buildgallery.php." The URL should look something like "www.yourpage.com/photos/yourpics/buildgallery.php." Hit enter and the .php file should do the rest. In a few moments, you get a page that tells you that thumbnails were created for each image. If you open the thumbs folder in your gallery folder, you will see that a thumbnail has been created for all your images.

     Now, to view your gallery, just navigate to your html file- the one you re-titled before. The URL should look something like "www.yourpage.com/photos/yourpics/yourpics.html(or whatver you titled your html file)." Your gallery should open up and the thumbnails should be displayed. Beneath the thumbnails, you should see the underlined text "Open image in new window." Pretty boring, huh? You probably want to add proper captions to your pics. So...

     When you ran buildgallery.php, in addition to writing the gallery and creating thumbnails, it modified the gallery.xml file. With your FTP program, download/get the imagedata.xml file and download it or place it into your gallery folder, replacing the existing version. When you open it with a text editor, you'll get a text file that has header data- written from the buildgallery.php file you edited before, and an entry for each image. This is where you will add your caption.

     You can see, at the top is the color and format info you saw and edited before. You can change it again here, if you wish. Each entry that follows "<IMAGE><NAME> is a seperate image file that need a caption. You should recognize your image's filenames here. You need to type where I have indicated in red: in between the bracket after "CDATA" and before the "<A href". You can even type html links in here, as you normally would in html. Don't make your caption too long or it will run off the page. When you see your gallery.xml file, the caption areas will be blank, obviously- unlike my example, which already has some captions. Just type all your captions in(this is the worst part of this version of Simpleviewer) and be sure to type a line break after your caption, so that it is separated from the "Open image..." link. To create a line break, simply type <br> . Save and re-upload the gallery.xml file back to your gallery folder on your server. You may have to restart some browsers to see the changes. Delete the buildgallery.php file from the folder on your server, otherwise, anyone could type in the buildgallery.php url and rewrite your gallery, which would reformat your gallery.xml file. Note(in yellow) where the text "Open image in new window" appears.

     Based on reader response, there a few more points to consider with Simpleviewer:

• Make certain that your jpgs are baseline/standard jpgs and that they are 72dpi in resolution. This is a very common problem. If your thumbnails in your gallery are going fine until you reach one image, and then the rest of the thumbnails are all X's, open your images folder and look at the file sizes. Look for the problem jpg(where your first X is on your thumbnail list). Chances are, it's bigger than the rest- say 300Kb, as opposed to the 80Kb size of the rest of your images. If not, open that image(in Photoshop) and make sure that it's a baseline/standard jpg. Simple way to do this: go to File--> Save As, and then save it exactly where you got it from(your images folder) and then see what type of jpg it thinks it is when that part of the save dialogue come up. If it's not baseline/standard, save it as such, re-upload it to your images folder and then run buildgallery.php again. Most of the time when your thumbnails won't load, it's a problem with the original jpg image.
• Make sure that, when modifying the colors in the buildgallery.php file, you use the "_x______" format.For example, let's say you want a light blue color: 99CCFF. Typing the standard hexadecimal code you would use in html- #99CCFF - won't work here. You need to type 0x99CCFF instead. A reader wrote to me and couldn't figure out why their colors weren't taking, and this was why.
• You can ALSO make your customizations in the gallery.xml file. Since the buildgallery.php file creates the data in gallery.xml you could just modify the finished gallery.xml file instead. Changes to the buildgallery.php file have no effect unless you run it again. No need to do that, simple edit the top lines of the gallery.xml with your changes.
• In some browsers, like Internet Explorer, changes made to the gallery.xml file will not be reflected until you close and then relaunch the browser. Hitting refresh/SHIFT+refresh won't do the trick. No doubt, some people have been driven mad when they upload their newly updated gallery.xml file and then find that it has changed nothing.
• The PHP version of your host server makes a difference. For example, I have to type umask(022); to tell the code what version I am using. If you're having such problems, contact your host server's tech support. This is, however, very rare.
• Do you have an extra thumbnail that's showing up like an X in your gallery? Check your images folder and make sure that every file in there is actually an image file. Sometimes, if you're looking at your folders in thumbnail mode on your computer, Windows will create a thumbs file to help it display the images quickly. Delete this file from your images folder and check to see if Simpleviewer attempted to create a thumbnail for it in your thumbs folder and delete that too, if it exists.

Click below to enter: