Flotilla 9WR 31-6
(formerly Flotilla 20-06)
The Ludington Auxiliary Meetings are held every second Thursday of the month at 7:00 pm in the Ludington Coast Guard Station.
The Public is always invited to attend.
HOW I CREATED OUR PHOTO GALLERIES
These photo galleries have several advantages over picture "Hosting Sites"
- No advertising to cheapen the experience
- The only links are at the top, returning to the Flotilla homepage or the Flotilla photo page
- Pages have orange and blue coloring, to look "Auxiliary-ish"
- If desired, there can be a caption below each photo.
- There are many options to customize the pages and picture sizes to your needs.
- Pages use Cascading Style Sheets, which can be changed to your needs.
- Very space-efficient, a directory of 9 photographs takes up about 600 kbytes
- The software used is free for personal or non-profit use, very
Step one: Set up directories
- Create the same directories on your
harddrive and on the webspace. Optionally, you can create
everything on your harddrive, and when finished, FTP it all to the
- In the top directory (where index.html lives), create a
subdirectory named /photos.
Generally I use /images for webpage
images, logos, etc... and /photos for
- Under the /photos subdirectory, create a subdirectory for each photo gallery (This is manditory.) You
could name them /badger05-09, /fall_conf_2002,
etc...NEVER use spaces in a filename, very bad habit.
- Elsewhere on your harddrive, create subdirectories to hold all
the original photos. Name them something like /badger05-09_ORIG,
/fall_conf_2002_ORIG, etc... Or put all
these directories under a directory named /photos_ORIG.
keep them separate.
Step two: Acquire XnView photo browsing software
- I love this program! And It is free for personal and non-profit
use. Go to http://www.xnview.com/
and check it out.
- Read the licensing information and decide if you qualify for free. If not, registering is very cheap. If you like the program and don't register, at least send the guy a few bucks, it's really worth it. (Note: I'm just a user, I have no connection with XnView).
- Download and Install the program, very simple, no sign-up or
anything, no nagging.
- Eventually you will want to customize the toolbars and the many options, but no need to bother yet.
Step three: Prepare the "Original" photos
- Crop each photo as needed. I try to keep the image to a standard 4/3 ratio after cropping, but you don't have to.
- If needed, re-name the photos so as to make them display in the sequence you want. I use XnView's batch rename function to rename my photos with useful names like badger05-09_01.jpg, badger05-09_02.jpg, etc... That's a lot more useful than DSCN0478.JPG. And the _01, _02, _03 at the end makes them show up in order.
- Optional: For each photo, type a caption into the "embedded
comments" data field. To do this, highlight a photo and press
Ctrl+D. If you don't want your photo galleries to have captions,
don't bother with this.
- Save each file, in full resolution, as .jpg. Be sure the .jpg
options are set for something like 65% quality. You want the .jpg
compression. These files are going back into the _ORIG
directories, and are now sacred originals.
Side note: To save processing time, digital cameras do NOT compress their .jpg files. If you make a habit of re-saving them (with compression) as you move them from your camera to your computer (use XnView's batch processing), all your photos will magically take up 1/3 as much harddrive space and display faster. And if you really have to email full-resolution photos, it will go much faster for everyone.
Step four: Create a test photo gallery
- Using XnView, navigate to the _ORIG photo directory of interest (full-resolution sacred originals). Highlight the photos you want to place in the new test photo gallery. To select all, click on one, and then press Ctrl+A.
- With the "Web page Create" box in view, select the options and
enter the data as shown (see notes below):
Template folder - find where XnView put your templates folder, probably under "Documents and Settings".
Template - select "Simple[Blue]" for now.
Misc: Title - Enter the tile you want at the top of the page. It is also shown in the visitor's webbrowser heading, and in the bookmark if the user saves a bookmark.
Misc: Header - This is the subtitle shown on each photo page.
Thumbnail, Format and Picture - Leave as shown for now
Information Displayed - If embedded comments were added to the photo files as above, set as shown, otherwise, clear the check mark.
Output: Directory - Navigate to the output directory you created earlier (not the ORIG directory, the one for your actual webpage files.
Output: (other) - Leave as shown for now.
- Click on "Create" to see your new creation in your default web browser.
Step five: Modify html code and stylesheet to your needs
- Easiest way is to just use my files and edit them.
- To do that, just download file _SX-CGA.zip
and expand it into a convenient location.
- Edit the html code for the files thumb.html and page.html, as desired.
- Edit the CSS file style.css as desired.
- Edit the background color graphics header.png
as desired, or create new ones.
- When creating your photo gallery pages as described above, click on the top field "Template folder", and navigate to your _SX-CGA directory and select it.
Step six: Upload each photo directory to your web space, add links
- Using FTP, copy the entire directory contents for each gallery
subdirectory, to the corresponding subdirectory on your web space.
- Add a link on your "photo gallery" webpage to the file thumb.html
in each gallery directory. Be sure to include the subdirectory
name in the link. And make it a "relative" link.
- Verify that any links back to your flotilla homepage and photo
page work. If not, you may need to add or subtract a "../".
"../" will go up one level in your web
space directory structure. For example, I had to go up two levels
as I have a photos20-06
subdirectory and a badger05-09
-Frank L. (Ludington Flotilla FSO-CS)