1. Getting Started: An Overview & Some Editor Customization Options

What this does:

You can customize the data associated with each image. Three attributes are required for every picture: filename, width and height. You may set defaults for any attribute except the filename.

Features & Benefits

  1. Import your existing Gallery Javascript OR load file listings generated by ACDSee or Windows
  2. Easily add or remove images with the clidk of a button
  3. Edit all attributes of images, including easily setting landscape or portrait image orientation
  4. Sort, sort, sort -- easy click-n-place interface makes for easy re-ordering
  5. Generated script is easily copied and pasted into your page
  6. Output HTML that will allows search engines to index all of your image data

top of page

Making this editor work for you

Depending on your gallery's needs, the images involved, or the manner in which you typically add image you might want to customize some aspects of this editor. You do not need to change any of the settings below, but I do. I have a set way that I work with my galleries and find that sometimes I wish the editor fit into this process a little better. What do you know but I got my wish.

Cherry-picking the info stored in your Gallery

You may only need images in your gallery, choosing not to set titles etc for any of your images. You may tell the editor to hide info you don't want or use. This is not yet implemented.

Include "Title" field     Include "Extra 1" field
Include "Description" field Include "Extra 2" field
Include "Date" field Include "Extra 3" field
Include "Extra 4" field

top of page

Just for me! Hah!

These were my top pet-peeves.

Hide filenames while editing (will not affect how your final gallery is displayed). This feature is here because sometimes you're at the Pasadena Central Library, working on your laptop and you discover that you have some really, really long file names that annoy you. And you happen to have ftp access --- so you add a checkbox to the page, just like so.
Hide Titles during editing. Might as well since you are able to hide filenames.
Base URL:
The location of your images (and thumbnails) may be relative, if this editor isn't on the same machine/URL use this field to adjust this. For example: http://www.pizzabytheslice.com/

When editing image info I want to see...

the fullsized image
the thumbnail

Why would I change this? Sometimes your images are quite large and you do not need to see them in order to add, delete, or annotate them. Or your screen realestate may be quite limited. At home I've two 19" monitors, but sometimes I'm on a laptop.

top of page

2. Import Your Javascript or ACDSee File Listing

This page allows you to edit your existing Photo Gallery script or import a list of your image files. If have neither a script nor a directory listing, skip ahead to the next step.

Check the FAQs for supported gallery functions, or for tips on generating file listings: Windows directory listings or ACDSee directory listings

  1. Copy and paste your Photo Gallery Javascript (or listing) into the area below.
  2. Then click the "Read My Javascript" button. (or ACDSee or Directory Listing)
  3. Move on to the next task of reviewing your Gallery Setup info (ummm, on the next tab, silly)

Caution! Doing this will wipe-out all of the other edits you make within this wizard so click once, click wisely, and walk away.

Paste your Javascript or directory listing below

Gallery Setup

Here is the information the gallery needs in order to find your images -- and their thumbnail versions -- as well as setting-up the default dimensions and various other bits of rubbish.

Fullsize image directory:
Thumbnail image directory:
Thumbnail width (pixels):
Default Image Dimensions (pixels): Width: Height:

4. Edit Image Info

Click a thumbnail image and set the properties for that image. Problem seeing an image or its thumbnail?


Image Properties

Image Number:
Dimensions: Default Rotate 90° Other Width: , Height: pixels
Extra 1:
Extra 2:
Extra 3:
Extra 4:

Sort your images

  1. Click on one or more images that you wish to move as a group
  2. Click the "X" where you'd like the selected images placed. As soon as you click the target All of your selected images will be Placed at that position.

Click Clear button to deselect your images/reset the move

Click an Image once to select it. Click again to de-select it.
The order in which you click-select images is not used when re-ordering the images.


5. Your New Script

Search Engine Image Page

You've now expended quite a bit of effort and you might want search engines such as Google or AllTheWeb to index your images BUT you might not be aware that few engines (none that I know) read Javascript. Meaning they'll never learn about your images. That's where the code below comes in. Copy and past this either in a hidden area of your page or on a Ghost Page (useful if you have a popup gallery.

For more tips visit the help F.A.Q.

About, Troubleshooting, Revisions, Etc.

top of page

About this Editor

I've written this for my own use -- but thought some of y'all might find it useful as well, so here it is, blemishes and all.

The Need

Why an editor? If you need to ask, you've either never setup a Javascript Photo Gallery or perhaps only have one or two galleries to maintain. Heck, managing 4 or 5 galleries? Not such a problem. However, when that number passes 20 large galleries, well, it becomes a pain in the ass. And PITA is uncool. This is suppose to be a fun hobby, remember?

Pizza contains more than 30 galleries, the number growing monthly. Thus my first aim is to be able to quickly create new galleries. Let's label this goal number one.

Putting aside momentarily the number of photo galleries consider instead the number of images contained in all of these galleries, spread all over the site, this truly strains any workflow. We want a smaller workload, not more. For example more than 300 images are in my 2005 European vacation photo galleries, and pulling these together was really sucky, particularly since I wanted to include locations (country and city) and descriptions for most of the photos. Even loading all of the images into the gallery was a pita. Sure, Dreamweaver's regular expression search and replace was a nice help, but then the task of sorting, etc, etc... trust me, it was taking too long to build or edit these galleries. So goal number two: speedy gallery setup.

Lastly, I've found myself going back to some of the older galleries, wanting to re-order images or add notations. Also, I wanted to do something so that they'd show up on Google's image search (alltheweb seems to read EXIF data and thus many of my images already appeared there). So the last goal for an editor was being able to import already completed gallery info. No re-work.

The Steps

OK. The editor had to work for me and my needs and mesh well with the tools I use. Most of my galleries begin with an ACDSee generated directory listing of images (I keep all images for each gallery in their own directories, so this is just one click within ACDSee). So on the Import tab you'll note the ACDSee option. Copy, paste, press a button, and bang -- the gallery is ready for editing. Cool.

As mentioned the need to go back and modify existing galleries was also key. Thus I'm able to open an existing photo gallery web page, select the Javascript portion where the images are added (plus the bit about where they're located), paste this into the Import textarea, and finally click "Read My Javascript". Check. We're now able to modify the gallery.

Even for those rare instances where I start with an empty gallery -- no file listing and no pre-existing Javascript -- the editor works well. Skip the import step and go directly to "Setup". Enter the directories where the images and thumbs may be found and then click onto the "Edit Images" page to start adding pictures.

The Outputs

The "Your New Javascipt" page creates script you may copy and paste back into your web pages, as you'd expect. The Search Engine tab requires some explanations, which are buried in the FAQ on this page.

I forget what I was talking about here... some diatribe about why I made the editor and why it does things. Who cares? Just try it.

top of page

F.A.Q. (Frequently Asked Questions)

  1. My images aren't appearing on the Edit or Sort areas
  2. The import function is misreading the dimensions from my Javascript
  3. How can I get Google and other Search Engine to index my Images?
  4. What's ACDSee?
  5. How do I generate an ACDSee File Listing?
  6. How do I generate a Windows File Listing?
  7. Which gallery functions are supported?

My images aren't appearing on the Edit or Sort areas

There are several reasons why you may not be able to see an image. If you are able to see some images, but cannot see others, try these:

The following apply to when you cannot see any of your images:

If you've tried all of the above and there are still problems there might have been a problem importing your Javascript or ADCSee File Listing. Look at the Javascript generated by this editor on the Your New Script tab. Email me if there is a problem.

top of page

The import function is misreading the dimensions from my Javascript

The Import Javascript feature reads addImg calls based on (at the mercy of) the ReorderArgs command, and if this isn't set within your Javascript then the assumed order for the arguments is the default for the PBTSGallery itself. At this time the default argument order is:


Try explicitly adding a ReorderArgs call that matches the way you're using addImg.

Also note that if you import Javascript that includes the ReorderArgs function, then re-run the import using the Javascript from a different photo gallery, but the second does not include the ReorderArgs function, then the arguments order from the prior import will be used. I've gotten burnt on this a couple of times.

top of page

Search Engine Indexing of Your Images

Presently -- fortunately -- search engines do not index or execute Javascript. This is as it should be. But, you ask, what about those of us who want all the extra notes we've added to our Javascript photo galleries to be included in searches? Moreover, what if you want the images themselves to appear on Google or AllTheWeb? For these folks, and I'm one of them, there's hope.

Using this editor to generate HTML versions of your galleries you may choose to use either the hidden approach (non-human visible) or a separate page, what I call a Ghost Page (useful for when you're using a popup gallery). In either case, your image data will be indexed.

Solution 2: Javascript/CSS... make a div with style sheet property visibility:hidden; so it won't appear or mess up the drawing. Then, set an onLoad to clear the area using Javascript: document.getElementById("myHiddenInfo").innerHTML= "";. Thus, before the user's browser does all that downloading, the HTML is gone, plus, it was never visible.

Solution 1: Ghost pages... static HTML pages containing all of the meta-data about your images and links them. This (admittedly ugly) page lives "behind" your gallery, mirroring the data in a format more suitable for search engine spiders. When this page is crawled search engines associate all of your text the images (meaningful filenames are also a big help).

So, what if a user clicks onto this lousy, ugly page? Sure, you don't want humans to see this page, right? Well, taking advantage of the very problem that got us here -- that search engines ignore script -- we'll use Javascript to redirect from the ugly page to the purty photo gallery page. Place the reload script at the top of the page.

top of page

What's ACDSee?

ACDSee is just a fantastic image and media browser I've been using for several years. I'll not go into why even now, with Adobe's new Bridge being bundled with everything they crank out, ACDSee still fills a niche. If you need a good way of organizing thousands of media files: jpegs, avis, pdfs, etc (everything except Illustrator and Painter formats), I recommend ACDSee.

top of page

How do I generate an ACDSee File Listing?

This has been moved in the most recent ACDSee version. It's now under Database » Export » Generate File Listing. Generate the file listing, select all of this text, copy it, and paste it into the textarea on the Import tab of this editor. Below is an example of what the ACDSee7 listing looks like.

Listing of [1 Folder: nature] at 12:06:43 PM on 7/6/2005
7 file(s)    1 subfolder(s)    318.3 KB (325,894 byte(s))

Filename                Size (KB)   Image Type       Modified Date          Image Properties   Caption   Rating   
---------------------   ---------   --------------   --------------------   ----------------   -------   ------   
[thumbs]        6/27/2005 7:18:43 PM
hummingbird.jpg         35 KB       JPEG             6/13/2005 6:19:00 PM   500x333x24b
IMG_3315.jpg            46 KB       JPEG             6/13/2005 2:30:00 PM   500x333x24b
IMG_3317.jpg            49 KB       JPEG             6/13/2005 2:30:00 PM   500x333x24b
IMG_3382.jpg            66 KB       JPEG             6/13/2005 2:30:00 PM   333x500x24b
IMG_3398.jpg            42 KB       JPEG             6/13/2005 2:30:00 PM   500x333x24b
IMG_3404.jpg            44 KB       JPEG             6/13/2005 2:30:00 PM   333x500x24b
IMG_3418.jpg            40 KB       JPEG             6/13/2005 2:30:00 PM   333x500x24b
warden-granny.gif       21 KB       CompuServe GIF   6/16/2005 2:03:00 PM   319x399x8
whouse-halloween.gif    36 KB       CompuServe GIF   6/16/2005 2:03:00 PM   319x384x64

For comparision purposes here's an ACDSee5 file listing:

Listing of D:\Projects\mambo\images\gallery at 10:44:00 AM on Fri, Jul 15 2005
31 file(s)    1 subfolder(s)    1.1 MB (1,120,004 byte(s))

Name        Size               Date   Image Properties   Description
--------   -----   ----------------   ----------------   -----------
[thumbs]           7/6/2005 5:57 PM
007.jpg    34 KB   7/6/2005 5:36 PM   500x333x24b jpeg
009.jpg    35 KB   7/6/2005 5:36 PM   500x333x24b jpeg
016.jpg    39 KB   7/6/2005 5:36 PM   500x333x24b jpeg
017.jpg    44 KB   7/6/2005 5:36 PM   500x333x24b jpeg
019.jpg    34 KB   7/6/2005 5:36 PM   500x333x24b jpeg

top of page


How do I generate a Windows File Listing?

For Windows users there are many ways to do this, all with the same inherent problem: you'll get a list of files, but it won't have the dimensions (width and height) information. For this reason it's very important that you set the default dimensions on the Setup tab BEFORE you import the file listing.

  1. Open a DOS or Command window (on the Start button located on the Task Bar choose Run and type "cmd" in the Open line, click OK (depending on your version of windows you might need to type "command"))
  2. Change drives, if needed. If the files you want are located on a different drive type the drive letter plus that dot-over-dot, is that a semicolon? Yeah, so my files are on my "G" drive, I type: "g:" followed by the return (enter) key.
  3. Change directories, if needed. Again, I have my files buried several directories deep. I type "CD" for "change directory" followed by space plus slash plus directories like so "cd Projects\PBTS\photos\images\eu05", this happens to be where I have my gallery images (OK, i'm lying, i'm much more anal about my directory structures than this, but the real path would be so long an tedious you'd never trust me again, and that would make me a little sad)
  4. Now we'll just request a directory listing ("dir" command), with the B-switch, this supresses all information except the file names. We don't need creation date, file size, permissions, etc. we just want the file names. We'll "pipe" the output to a text file (I'm naming my file "files.txt", you do whatever makes sense to you). This means we direct the results of the dir command to be written to a file instead of writing the info on the screen. thats the Greater Than sign followed by the file name we want. Warning: if this file already exists it will be overwritten. So here's the command: "dir /b >files.txt"
  5. Type "exit" to close the window.
  6. Open the file you just created (it's in the directory where the files were)
  7. Select all of the file's contents and paste them into the import textarea. Click the Read File Listing button. Done!
Microsoft Windows XP [Version 5.1.2600]
(C) Copyright 1985-2001 Microsoft Corp.
C:\Documents and Settings\Courts>g:
G:\>cd Projects\PBTS\photos\images\eu05
G:\Projects\PBTS\photos\images\eu05>dir /b >files.txt

Note: if you ommit the /b switch the files listing will not work with the import command because the file list will look like this:

06/09/2005  01:46 AM            31,505 IMG_3125.jpg
06/09/2005  01:46 AM            16,776 IMG_3135.jpg
06/09/2005  01:46 AM            34,955 IMG_3136.jpg
06/09/2005  01:46 AM            34,566 IMG_3141.jpg
06/09/2005  01:46 AM            29,970 IMG_3157.jpg
06/09/2005  01:46 AM            45,889 IMG_3180.jpg
06/09/2005  01:46 AM            26,759 IMG_3183.jpg

What we want is this, just file names (no dates, etc.) like this:


top of page

Which gallery functions are supported?

Presently this editor is solely concerned with the images, not the gallery behaviors (such as slideshow or which bits of info should be emitted within your HTML). Thus, there are only 7 functions it will read an generate. Theese are:

  setImgDir( "images/photos/" );
  setThumbDir( "images/photos/thumbs/" );
  setThumbWidth( 100 );
  setDefDims( 300, 225 );
  reorderArgs( "file","description","title","width","height" );
  addImg( "01.gif", "About an hour before the parade and this kid's bored", "Different Size", 300, 225 );
  addImg90( "02.gif", "", "Second Picture" );

top of page

To Do & Revision History

Known Bugs/Issues/To-do list

Delete Image doesn't work consitently. Under some conditions I think I've seen info lost, but haven't been able to recreate this. It's a perception.
Looses default info
Re-order args function not supported
Watch out for embedded quotes
This sucks!



0.05 July 27, 2005 Put the file name back into the search engine HTML generator (had removed this in 0.02), and now parse the file name -- replacing dashes and underscores with spaces so "my_favorite-shirt.jpg" is added to the description as "my favorite shirt". Should make some options, eh?
0.04 July 15, 2005 Changed ACDSee Regular Expression to handle version 5 file listings in addition to ver.7.
0.03 July 5, 2005 Added Windows file listing import, then had to... oh, nevermind. Grrr.
0.02 July 1, 2005 Added ability to set the Base URL so Ludlow could edit the SCAG galleries from his office.
0.01 June 20, 2005 First attempt at pulling together RegEx strings and other bits I'd had laying about to make this editor.

top of page

Terms of Use

Same-same. As with the Gallery itself, This is released under the Creative Commons agreement (see below)

Creative Commons License

top of page


Not Seeing an Image or Thumbnail?
Try one of these: