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
- Import your existing Gallery Javascript OR load file listings generated by ACDSee or Windows
- Easily add or remove images with the clidk of a button
- Edit all attributes of images, including easily setting landscape or portrait image orientation
- Sort, sort, sort -- easy click-n-place interface makes for easy re-ordering
- Generated script is easily copied and pasted into your page
- 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.
top of page
Just for me! Hah!
These were my top pet-peeves.
When editing image info I want to see...
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
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)
- My images aren't appearing on the Edit or Sort areas
- The import function is misreading the dimensions from my Javascript
- How can I get Google and other Search Engine to index my Images?
- What's ACDSee?
- How do I generate an ACDSee File Listing?
- How do I generate a Windows File Listing?
- 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:
- Check the filename
- Did you upload the image (and the thumbnail) onto the server
- Did you upload them into the correct directory
- Check the values for the image width and height.
The following apply to when you cannot see any of your images:
- Check the Fullsize image directory and Thumbnail image direcory you've specified on the Gallery Setup tab;
- Are you using relative URLs for the image directory or thumbnail directory? If so you might need to set the base URL on the Getting Started tab. If this editor is one server (or domain) and your images are on a different one, or located in other directories, relative URLs may not work. Include "http://" and end with a forward slash "/"
- You've done the above but the images still don't show up? Check that the image directories and base URL end with a foward slash ("/")
- Did you upload the images (and the thumbnail) onto the server;
- Did you upload them into the correct directories;
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:
"file","description","width","height","title","date","extra1","extra2","extra3","extra4"
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.
- 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"))
- 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.
- 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)
- 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"
- Type "exit" to close the window.
- Open the file you just created (it's in the directory where the files were)
- 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
G:\Projects\PBTS\photos\images\eu05>exit
G:\Projects\PBTS\photos\images\eu05>
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:
[thumbs]
color_9791.jpg
IMG_0002.jpg
IMG_0012.jpg
IMG_0020.jpg
IMG_0026.jpg
IMG_0031.jpg
IMG_0033.jpg
IMG_0059.jpg
IMG_0064.jpg
IMG_0065.jpg
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! |
Revisions
| 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)
top of page