Code Written by Jeff Lewis
http://www.jefflewis.net
This code is freely available to modify. It is not permitted to sell any programs made using this code. If you are going to host this code on any other website for download, I ask that you add a link to my site (http://www.jefflewis.net).
To read in image size information, this program makes use of code developed by David Crowell:
' CImageInfo
'
' Author: David Crowell
' davidc@qtm.net
' http://www.qtm.net/~davidc
This program will generate code that you can copy and paste into a photo index page, so that it will show thumbnails of each of the photos you want in that gallery. It uses .css so that you can put a caption underneath the photo, but still allow the photos and captions to dynamically move to different rows as the user resizes the browser window (as opposed to having the rows fixed when using tables for layouts).
When you click on one of the thumbnail images, it takes you to an html page with the picture on it, instead of linking directly to the picture. The advantage is that it incorporates navigation links into that html page, so that if a visitor wants to view all of the photos, it's just a matter of clicking "Next" on each page, and not having to repeatedly hit the "Back" button on his/her browser, finding the next image, and clicking on it.
Another advantage to using this program is that it incorporates a javascript into the html page to dynamically resize the image to fit into the browser window. Most browsers will automatically resize an image if it's too big to fit into the window, but they only do this when the picture's linked to directly, not when it's embedded in a page. Simply using a "width=100%" or height=100%" in the img tag doesn't work well, because the browser window could be too small in either width or height, and there's no way of telling beforehand what it's going to be. Also, if the browser window is bigger than the image, that stretches the image to larger than its original size, making it look pixellated. So, I wrote the java script that's included in this program to mimic what most browsers do when viewing the image by itself. It also has the option, like in most browsers, to view the image full size even if it would make it bigger than the browser window. If the user has javascript disabled, or for some reason the script doesn't work on their particular browser, they still see the image in its original size.
For an example of the types of pages made with this program, take a look at one of the photo pages on my website:
http://www.jefflewis.net/photos.html
This program is meant for people with at least a basic working knowledge of html coding and image manipulation. This program does not do any actual graphics manipulation, so you must rely on other programs. I use and recommend IrfanView, which does a pretty good job at batch image resizing.
http://www.irfanview.com/
I wrote this program as a tool for myself, to help me make the photo galleries on my website, and not as an end unto itself. As such, I did not program in any error checking. If there are any mistakes in any of the user enterred data, it will cause an error which stops the program from running. For this reason, I recommend saving the current configuration before trying to run any of the parts of the program. That way, if you make a mistake and the program crashes, you don't have to re-enter that data.
An important note that I want to put write here in the introduction, the program requires the file PPGDefault.ini to load up its initial configuration each time you run it. If that file is missing, the program won't run. You can overwrite the file with your own information, but it must still be present with that file name.
Before explaining any specifics, let me give a general overview of how to use the program, so that it will be a bit easier to explain things later on. The first thing is to copy the images you want to use into the directory you want to work in, set their resolution to what you want, and also make thumbnails of all of the images. Once that's done, you set the inputs in the text boxes of the program. Once everything's ready to go, save the current configuration first, and then hit the button, "Read Graphics Directory." This will look at the directory you have the graphics stored in, and create the input list needed for the next part of the program. That input list can also be saved as a text file, and pasted into the program at a later time without having to use the "Read Graphics Directory" button. You can also change the order of the images, or make several other changes to the input list. Once the input list is in the program, you hit the button, "Create Page for Each Photo, Generate Thumbnail Code at Right." Using the input list provided, this will take each image, generate the html code to go on the photo index page (you'll have to copy and paste it), and generate an html page for each photo in the graphics directory that you've specified.
Actually, to go into just a little more detail, the "Read Graphics Directory" button is really just a quick little bit of code that I wrote to help setup the Input List for the first time. What I normally do is save that Input List as a separate text file where I manipulate it, and then copy and paste it into the program. The Input List is a little more than just the images and their thumbnails- it also has the captions that're going to go under each image on the index page.
The first step is to get your images setup in the format that you want to use on your site. You'll probably want to copy (not move) the images into the directory you're working in, so that you don't lose the originals. My general practice is to make the full-size images 600 pixels tall, maintaining the original aspect ratio so that the width comes out at whatever it needs to be (usually 800 for landscape pictures, 450 for portrait pictures). If the pictures are .jpgs (as they usually are), I save them at an image quality of 7.
You must also set up the thumbnails. I usually store them in a sub-directory of the one holding the main images, that I've usually titled "thumbnails." One of the requirements of this program is that the thumbnails have either the exact same name as the original image, or the exact same name with a suffix added to the end (e.g. image.jpg as the original and image_sm.jpg as the thumbnail) For my personal website, I set the height to 100, once again maintaining the original aspect ratio so that the width comes out at whatever it needs to be (usually 133 for landscape pictures, 75 for portrait pictures). At the website I maintain where I work, I set the height to 80 (width of 106 for landscape, 60 for portrait). And once again, I usually save .jpgs an at image quality of 7.
Of course, the image sizes above are only for the standard aspect ratios of 4:3 and 3:4. If you've cropped your image to a different aspect ratio, or used a source with a different aspect ratio, the numbers will be different.
I figure the easiest way to explain the inputs is to just list each input text box and give a brief description of what it's used for in the program, and add any special notes needed.
File Type:
The type of file to read in. Must be in the form of *.extension. This only controls what types of files are looked at when hitting the "Read Graphics Directory" button, and no other part of the program. Your input list can contain mixed file types, and the program will handle it just fine. So, if you have multiple file types that you want to use in the same gallery, just run the "Read Graphics Directory" routine a few times with the different extensions, copying and pasting the different Input Lists into a separate text file where you can combine them into one list. The program only handles 3 letter file extensions (so use .jpg, not .jpeg).
Graphics Path String for HTML Code:
This is the path that will go into the HTML code, specifying where the images are located relative to the index page. For instance, say your index page was photo_gallery1.html, located in your root directory, and your graphics were located in the subdirectory graphics/gallery1, then you would make the text for this input, "graphics/gallery1/" Note that it's very important to remember to put that forward slash at the end of it, since the VB code won't do it. If your images were in the same directory as the index page, you would leave this box blank.
Thumbnail Path String for HTML Code:
This is the path that will go into the HTML code, specifying where the thumbnail images are located relative to the index page. It works just the same way as "Graphics Path String for HTML Code," so read above for more detail.
HTML Filename Prefix:
By default, the name of the html file for each image is simply the image file name with the original extension replaced with .html. Whatever you put into this textbox will be added to the beginning of the html file name. This could be useful for, say, having multiple methods of organizing pictures in the same directory. For example, in my aircraft image archive, I want all of the images in one directory, but for browsers, I have the sorted alphabettically, or grouped by category (such as prop driven, jet, etc.) The categories even overlap a little bit, so by putting a prefix on the html file names, I'm able to have all of those multiple organizations in one directory containing the pictures.
Indent Value:
It's good practice to indent your html code to make it easier to follow. The VB code will automatically indent the code that it generates. However, if the index page that you're going to paste the thumbnail code into already has some type of structure, you may want to indent the generated html code by a certain amount to make it consistent with your page. The number here is how many spaces the code will be indented.
# Caption Lines:
This is the number of caption lines that will appear below the image on the index page. This must be set properly for both the the "Read Graphics Directory" button and the button, "Create Page for Each Photo, Generate Thumbnail Code at Right," since the VB code doesn't automatically determine how many caption lines there are. In my experience, forgetting to set this to match the Input List has been one of my most common errors. Note that when you hit the "Read Graphics Directory" button, it will generate the Input List with blank caption lines. You then modify the lines by putting in your own text. Also note that you must have the same number of caption lines for each image. This value can be set to zero if you don't want captions.
Digital Camera Prefix Length:
When running the "Read Graphics Directory" routine, it automatically determines the alt text for each image (which is also the caption it will have on its individual html page) by using the name of the file itself (minus the extension, and converting underscores into spaces). If all of your pictures have a prefix of the same length that you want to remove, such as the original file name of a digital camera, enter in the number of characters you want removed in this box. For example, when I take pictures with my digital camera, I keep the original name, and then add a description (this keeps the images in chronological order even when sorted alphabetically). So, I might end up with a file named, "DSC01876-Market_in_Chichicastenango.jpg." Since the prefix of this file name, "DSC01876-," is 9 characters long, I'd enter a 9 into this input for the program, and that prefix will not get put into the alt text.
Index Page Link:
On the html page for each individual image, there is a link to return to the index page. This is the url that will go into that link. Since I usually put my images in a sub-directory, I make this url a full url, not relative (i.e. starts with "http://").
Photo Page Title:
On the html page for each individual image, this will be the title of the page. Note that all individual pages end up with the same title. I suppose if you want to play around with the code, it would be easy enough to make the title include the alt text for the image.
Graphics Path for Input to VB Program:
This is the path on your own local computer where the VB program will find the images (usually c:\...). The easiest way to get this is to open in Windows the directory that the images are in, and then from the address bar copy and paste the full path into the VB program. If you're going to do it that way, you have to have Windows set up to display the full path in the address bar (Tools > Folder Options, View tab, checkbox Display the full path in the address bar). IMPORTANT: Make sure that you put a backslash at the end of the path. Copying and pasting from the address bar won't do it, you must add it manually.
Thumbnail Path for Input to VB Program:
This is the path on your own local computer where the VB program will find the thumbnails (usually c:\...). See above for the easiest way to do this. IMPORTANT: Make sure that you put a backslash at the end of the path. Copying and pasting from the address bar won't do it, you must add it manually.
Thumbnail Suffix:
If your thumbnails have a suffix, enter that here. If not, leave blank. (e.g. image.jpg as the original and image_sm.jpg as the thumbnail, "_sm" would be the suffix)
File List:
This is the input for the routine, "Create Page for Each Photo, Generate Thumbnail Code at Right." You can get this either by hitting the button, "Read Graphics Directory," or copying and pasting from a text file. I suppose if you really wanted to, you could also type it all in manually, but that kind of defeats the purpose of this program, doesn't it.
Current Photo:
Not a user enterred input. Since this code isn't exactly optimized, it can take several seconds for it to run to process all of the images and generate the code and each of the pages. This box is a kind of progress indicator, and a verification that the program is actually running, and not locked up.
HTML Output to Copy and Paste:
Not a user enterred input. This is the html code to copy and paste into your photo index page.
After you've enterred in all of the text boxes, hit this button to save all of that data into an .ini file that you'll be able to load later. This could be extremely useful for 1) if you made a mistake enterring that information that causes the program to crash or 2) if you come back to this project later on, you can simply load that .ini file to get the configuration back.
This loads up any configurations that you've saved in any .ini files using the "Save Current Configuration" described above. By default when the program loads, it loads the PPGDefault.ini. You can overwrite this file if you want to, but if you delete it, the program won't run.
Once all of the inputs are set up properly, this is the routine to run. It will generate the Input List for you in the File List text box. From there, I recommend that you copy and paste the Input List into a separate text file that you save, in case you want to use it again at a later date, and also to give yourself a bigger window to manipulate the list. Actually, this part of the program came after I wrote all of the code to generate the thumbnail code and individual pages. I was originally converting some old pages to this new format, so I used Excel to manipulate the old source code to get the Input List. The first time I wanted to make a new photo gallery from scratch, I wrote this code as a quick way to generate the Input List.
For each image there are 4 important parameters specified in this list: -the image file name -the thumbnail file name -the alt text (which will also be used as the caption on the individual photo page) -the caption text that will be used on the photo index page
The first three of those are specified with a "image=," "thumb=," or "alt=" corresponding to the parameter. The caption text that will be used on the photo index page does not have any special indentifier, it's just there, but it is followed by a
tag on each line.
If you want to change the order of the images in the gallery, simply move around the entries. The program is not sensitive to the number of lines between individual entries, so you don't have to be super careful while doing this.
The end of the file list must be the string "END." That will tell the program to quit processing the list.
Below is an example of a simple, two image Input List, after I added some text for the photo captions:
image="DSC00385-Sunset_on_Tahiti.JPG" thumb="DSC00385-Sunset_on_Tahiti.JPG" alt="Sunset on Tahiti"<br> Sunset on Tahiti<br> <br> <br> <br> image="DSC00388-Fountain_in_front_of_Meal_Wagons_where_we_had_dinner,_Tahiti.JPG" thumb="DSC00388-Fountain_in_front_of_Meal_Wagons_where_we_had_dinner,_Tahiti.JPG" alt="Fountain in front of Meal Wagons where We Ate Dinner, Papeete, Tahiti"<br> Fountain in front of Meal<br> Wagons where We Ate<br> Dinner, Papeete, Tahiti<br> <br> END
This is where the magic is. This is the routine that reads in your Input List, gnerates the thumbnail code to go on the index page, and creates an individual html page for each photo, with the cool javascript to dynamically resize the photos, and the navigation links to go to the previous or next photo in the gallery. As this routine runs, it outputs into the textbox, "HTML Output to Copy and Paste." Simply copy and paste that code into your photo index page. The individual photo pages that it makes are made in the same directory as the one containing the images.
On the photo index page, I've found it necessary to have a "container" to hold all of the thumbnails. Otherwise, you can get some weird effects where content from below the thumbnails gets mixed in with them. I know it's no longer kosher to use tables for layout on web pages, but I've found them to work well, and consistently across different browsers. If you want to just copy and paste what I use, here's the table that I use in my code to hold the thumbnails. Note that I have a lot of other layout on my page, which is why this code is indented so far.
<table bgcolor="FFFFFF" border=0 cellspacing=8 cellpadding=1>
<tr>
<td>
Put thumbnails here
</td>
</tr>
</table>
You need to have a separate css file to make the thumbnails work properly with their captions. If you don't, you'll only get one thumbnail per row, and it will look pretty silly. Here's the code you need to have in your .css file:
div.float {
float: left;
padding: 3px;
text-align: center;
font-size:xx-small
}
div.float p {
text-align: center;
}
If you've never used css before, simply make a file called photos.css in the same directory as the photo index page will go. Copy and paste the above code into that file. In the code for your photo index page, in the head, copy and paste the following code:
<style TYPE="text/css"><!-- @import "photos.css"; --></style>
I think that should be everything you need to know to make photo pages using this program. If you have any questions, e-mail me at webmaster@jefflewis.net