Building a Thumbnail page with ThumbsPlus




Thumbs Plus is a thumbnail viewer and page builder.  Cerious Software has a Demo you can use but it limited on enabled functions and time is about a 30 day trial.  Get it here.  It will open in a new window.
 

This is a step-though for creating a page of thumbnails for graphics which will be put in a table.  You can then copy the table to your own page or use the page as is.  What it actually does is:  make a thumbnail size copy of your images and builds a table for them - each thumbnail will be linked to their original image and viewers will click on either the image or image name to view the larger size image.

Step 1

This is the main page of ThumbsPlus.  You select the folder your images are in where I put the "1" in red.  You can now view the images and select the ones you want in the page, which is what you have to do to edit a page that has already been built or you can build the page using all of the image by selecting none.  I favor moving the images I want to use to a temp folder.  That way I don't have to select any for the initial page.

Step 2

When you are ready to build the page, you will find the option in the Image menu as shown above.

Step 3

In the first window,  item 1 is where you can select a scheme you have already built;  item 2 is where you can select preset color combinations for your page;  item 3 is where you name your page - html is the default extension and there is a place to change that if necessary.

Step 4

Table format is where you set up the information for the table.  Item 1 is the number of images you want going down (column);  item 2 is the number od images you want going across (row);  item 3 is the number of pixels you want in the border around and in-between the table.  If you want to choose a color for the border, put checkmark in the box next to 'color' by clicking in it then use the drop down color selector to choose a color.  Item 4 is the space between images boxes (divider lines) and item 5 is where you set how much room you want between the divider line and the image.  I just click in the box next to 'centered' for most pages.

Step 5

Thumbnail Format is where you set the quality of the thumbnails and sizes.  I take one of the images into PSP and resize it to see what the actual dimensions would be but  all you are setting in the image size and the program will fit the image into that size.  Item 1 is the image width;  item 2 is the image height;  item 3 is where you set whether you want the images to be gif or jpg formats;  item 4 is where you set the quality you want for the thumbnails;  item 5 allows you to reduce the resolution of the thumbnail and item 6 (if checked) tells ThumbsPlus to use the original image instead of making a new thumbnail is the original image size is smaller than the settings.

Step 6

Input Files window is where you tell the program how to handle all the images.  Item 1 is where you tell it if you want all of the images in the folder or just the ones you have already selected;  item 2, 3 & 4 allow you to make decisions as to if you want the original images copied into the same folder as the folder you choose for the thumbnail page,  whether you want to force all file name to lower case or use them as you named them and if you need names compatible for Netscape (for web publishing of the page, you should check this one).

Step 7

File Information window is where you select the information you want displayed by each thumbnail on the page.  This information relates to the original image and not to the thumbnail.

Step 8

Miscellaneous Options is where you can change the default page extension to the format you use on your pages (item 1);  item 2 is for setting a target attribute - when you have framesets on the site, you have to tell designate which frame window the page is to load to - if you don't use framesets, you will leave this one blank;  item 3 designates what you want to be used for the link to the original image;  item 4 allows you to choose attributes for the links by checking the things you want or leaving them blank.

Step 9

This is where you set your meta tags and page title.  Item one is the title of the page that show in the top of the browsers;  item 2 are comment tags for searches and general information;  item 3 is where you set the path to the page you want people to go when they are done viewing your images.  In instances where you have more than one page generated - the home button will be on each page.

Step 10

Here's where you designate whether you want the page, thumbnails and original images in the same folder or you can choose to customize your file structure.

Step 11

Here you will set the path for the folder you want the pages and files in on your hard drive.

Step 12

Last page!  If you leave item 1 check marked, ThumbsPlus will build the page and immediately open it in your web browser for viewing.  It em two is where you can save the scheme for future use.  If you thin you will use the same settings again, you can give them a name and then click on the 'save' button before you click on the 'finish' button.  If you are using the Demo version, it only allows you to save 3 setting schemes - the registered version allows as many as you want.

There's a lot more to this program than meets the eye and they have a manual for download.

Close Window when Finished.

tutorial by CSGreen