Coast Guard Station Ludington

Ludington North Breakwall LightFlotilla 9WR 31-6
Ludington, Michigan
(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 cheap otherwise

Step one: Set up directories

  1. 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 webspace.
  2. 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 photos
  3. 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.
  4. 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.  Just keep them separate.

Step two: Acquire XnView photo browsing software

  1. I love this program! And It is free for personal and non-profit use. Go to http://www.xnview.com/ and check it out.
  2. 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).
  3. Download and Install the program, very simple, no sign-up or anything, no nagging.
  4. Eventually you will want to customize the toolbars and the many options, but no need to bother yet.

Step three: Prepare the "Original" photos

  1. 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.
  2. 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.
  3. 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.
    xnview_howto1.jpg
  4. 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

  1. 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.
  2. 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.


    xnview_howto2.jpg
  3. Click on "Create" to see your new creation in your default web browser.

Step five: Modify html code and stylesheet to your needs

  1. Easiest way is to just use my files and edit them.
  2. To do that, just download file _SX-CGA.zip and expand it into a convenient location.
  3. Edit the html code for the files thumb.html and page.html, as desired.
  4. Edit the CSS file style.css as desired.
  5. Edit the background color graphics header.png as desired, or create new ones.
  6. 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

  1. Using FTP, copy the entire directory contents for each gallery subdirectory, to the corresponding subdirectory on your web space.
  2. 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.
  3. Verify that any links back to your flotilla homepage and photo page work. If not, you may need to add or subtract a "../". Each "../" 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 subdirectory.
-Frank L. (Ludington Flotilla FSO-CS)