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), and e-mail me (webmaster@jeff.lewis.net) with a link to the page where you are using it.
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 has nothing to do with how to use the program, and is really just an elaboration of a few points made in the overview, so if you don't want to read this, just jump right ahead to the instructions.
I've always been a fan of liquid layouts for web pages. What that means, in case you don't know, is designing a web page so that when people resize their browser windows, the page layout changes to accomodate it. It's not really anything new - in the early days of the web, most pages were liquid. Fixed layouts are the more recent innovation. There are pros and cons to either way. Fixed layouts can give you more control over your design. Plus, if lines of text get too long (for instance, if somebody has a big monitor and the web browser running full screen), it's actually harder to read, because once you get to the end of a line, you have a tough time finding the start of the next one. So, fixed layouts address that. (That's pretty easily solved in a liquid layout by somehow specifying a max width for your page, but letting it be as small as the user wants. Unfortunately, the trick most people use to accomplish this involves tables, and tables have fallen out of favor with a lot of web designers for layout purposes). The main advantages to liquid layouts are giving your visitor more freedom. For one, you never know what type of hardware they'll be browsing on. Sure, most new computers come with big monitors, but there are still plenty of people using older computers. Plus, blackberries and PDAs are pretty popular, and you never know when someone might visit your site with one of them. And even on computers with big monitors, you never know how the user might want to resize windows to make them fit on their monitor for whatever reason. So, in my mind, liquid layout still seems like a good goal for web designers.
The other feature I wanted for the index page with all the thumbnails, is that I wanted to be able to put captions underneath them. That's not quite as easy at it sounds, since there's no built-in html tag that lets you do that. Most people accomplish it by using tables, but as I wrote above, I prefer liquid layouts, so tables were out. I ended up finding a way to do that with .css, but it was so long ago that I found it, that I can't remember where it was.
So, that was basically my original inspiration for writing this program. I wanted a liquid layout with captions, but none of the existing automated programs I could find would do that. So, I wrote a simple program that generated the html for the index page with the thumbnails, and linked directly to the pictures themselves.
Later, I had a project for work, where I had to include photo credit along with the pictures. So, I couldn't just link straight to the pictures - it had to be a link to an individual html page with the photo credit. The main problem I had, was making sure that the picture would fit in the browser window. If you've ever followed a link to a big picture (by itself, not embedded in an html page), you'll have noticed that your browser automatically resizes the image to fit in the window. And it does it whether the browser's too short (height-wise) or too narrow (width-wise). Unfortunately, there's no type of conditional resizing built into html - you can specify the height or width as a percentage of the window size, but you should see the probelm with that. If you specify width, and the user shrinks their browser's height, the picture wouldn't be too wide, but it would be too tall to fit into the window, and vice versa if you specify height. Additionally, there's the problem of what if you specify the width that way, but the user has a monitor bigger than your image. The browser would try to stretch the image to fit, and it would become pixellated. Once again, I couldn't find anybody else that had done this before, so, I came up with my own javascript that would handle the resizing, whether the image was too tall or too wide for the browser, but wouldn't stretch it bigger than its actual size. Once I had that, it was easy enough to add a few other features to those individual html pages (like navigation links), and that's about where this program stands today.
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 most of the common tasks you use for preparing images for the web, such as cropping and batch image resizing & renaming. (In fact, I have Adobe Photoshop, and still end up using IrfanView for most of my website work.) Plus, it's free.
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.
A new option as of version 2.2 of this program is limited support for using 3 different image resolutions. This could be useful for an archive of images that are high enough resolution for printing. The way I've used it is to have 1.) low resolution thumbnails, 2.) intermediate resolution for previewing, and 3.) high resolution suitable for printing. In this case, I usually limit the intermediate resolution images to 600 pixels tall. More information on how to use this option is discussed below, in the section, Support for 3 Image Resolutions/Individual Pages Link to Full Size Images.
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.
checbox for Individual Pages Link to Full Size Images:
Check this box if you want the image included in the individual html pages to link to a bigger image. More information can be found below, in the section, Support for 3 Image Resolutions/Individual Pages Link to Full Size Images.
Suffix for Intermediate File - must be in same directory as full res image:
If you are going to have the image included in the individual html pages to link to a bigger image, this is the suffix that must be a part of the file name for the image that will be on the individual html page. More information can be found below, in the section, Support for 3 Image Resolutions/Individual Pages Link to Full Size Images.
Save Current Configuration
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.
Open Saved Configuration
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.
Clear File List
Self Explanatory - clears the "File List" textbox.
Clear Output Box
Self Explanatory - clears the "HTML Output to Copy and Paste" textbox.
Read Graphics Directory
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 File List.
This routine will generate an entry for every image in the directory specified by Graphics Path for Input to VB Program. So, if you want the thumbnail images in the same directory as the full size images, temporarily move the thumbnails to a different directory before hitting this button, and then move them back once the File List has been generated.
This File List is what the program will read in order to generate the html code. You can originally generate this list with the Read Graphics Directory button, but you can the go and modify it manually from there if you want to (for example, to rearrange image order, or to edit image captions).
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 <br> 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
Create Page for Each Photo, Generate Thumbnail Code at Right
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.
Create Slideshow List
This creates a list to be used for creating a slideshow (the slideshow is a javascript that I developed - not necessarily the best, but it works). It outputs into the textbox, "HTML Output to Copy and Paste." Copy and paste that code into the appropriate section of your slideshow page. More info is available in the section Creating Slideshows.
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>
As I said, the support for this option is still very limited. I made it specifically to create this archive (still under construction as of the time this Readme was written), and haven't made it very general, yet. So, if you want to use this option, you have to follow pretty much the same directory structure I used for that archive . Specifically, the intermediate size images MUST be in the same directory as the full size images, and the intermediate size images MUST have a suffix appended to the filename (example image.jpg for the full size image, and image_reduced.jpg for the intermediate size image).
Since this option was simply piggy-backed onto the existing code, the setup's a little different. Let me run through a quick example to explain. For the sake of this example, lets assume that the thumbnail is image_sm.jpg, the intermediate image is image_reduced.jpg, and the full size image is image.jpg. In the File List input box, the entry for this image will need to look like this (don't forget that you'll still need to end that list with an END):
image="image_reduced.jpg" thumb="image_sm.jpg" alt="Alt Text"<br> Caption Text<br> <br> <br> <br>
If you use the "Read Graphics Directory" to generate the file list, it will generate an entry for every image in the directory specified by Graphics Path for Input to VB Program. Further, the thumb= will simply be the images from that directory, with the thumbnail suffix appended. You should be able to see the problem with that based on the File List structure specified above. So, the way to specify the File List for these 3-resolution archives, is to temporarily move the thumbnail and intermediate size images to a separate directory. Specify a suffix for the thumbnails in the "Thumbnail Suffix" textbox (like _sm), even if your final archive will have the thumbnails in a separate directory without a suffix (you'll see why in a minute). Now, hit the Read Graphics Directory button. Copy and paste the File List it generates into a text editor to do a couple Replace All's to get the File List looking like above. To spell it out specifically, after first running "Read Graphics Directory," the list entry for each image will look something like this:
image="image.jpg" thumb="image_sm.jpg" alt="Alt Text"<br> Caption Text<br> <br> <br> <br>
Copy and paste that into Notepad, and run a Replace All, replacing all instances of ".jpg" with "_reduced.jpg" and end up with something like this:
image="image_reduced.jpg" thumb="image_sm_reduced.jpg" alt="Alt Text"<br> Caption Text<br> <br> <br> <br>
Then, run one more Replace All, replacing all instances of "_sm_reduced.jpg" with "_sm.jpg" (or, if your archive will have the thumbnails in a separate directory with suffixes, replace "_sm_reduced.jpg" with ".jpg") and end up with something like this:
image="image_reduced.jpg" thumb="image_sm.jpg" alt="Alt Text"<br> Caption Text<br> <br> <br> <br>
Then, you can copy and paste that back into the File List input box, move the thumbnails and intermediate size images back into their permanent directories, and run the program to generate all the html.
This is a method I developed for displaying a slideshow of the photos. It makes use of javascript, using the writeln method to dynamically create the slideshow pages. It also loads the next image in the slideshow while the current image is being displayed, and won't advance to that picture until it is loaded. I haven't incorporated the conditional image resizing into the slideshow that's used in the pages for individual photos, so users could conceivably still crop wide photos, or enlarge small photos to greater than 100%, making them become pixellated. This method may not be fancy nor use the best coding practices, and it's not fully HTML 4.01 compliant, but it works.
The Photo Page Generator program only creates the file list that this method needs to work. You will also need 3 html files setup with the appropriate code. I have included 3 templates that you will need to modify for your own needs:
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