Thumbnails

There are several ways of making "thumbnails".

The first two below will make a smaller image clickable to the larger original photo, using just the original photo.

Using percentages:

and the height will be automatically adjusted proportionally.
The % can be adjusted from 1 to 100%.

Using pixels:
and the dimensions here are in pixels.

You can also use just a width dimension and the height will be adjusted automatically; or you can use just a height dimension and the width will be adjusted automatically.

But it is better to use both width and height for faster loading.

The width of the Webtv screen is about 540 pixels on a webpage and about 390-400 pixels on a e-mail page.

Neither of the methods above reduce the load time of the "thumbnail"---the byte size is still the same as the larger original photo.

In order to reduce the byte size and load time of the thumbnails you need to resize the original photos at places like Image Magick or Webfx or my.imager.com --- take the original photo there and resize it to a smaller version (100x80, for example) and then upload it to your Webtv scrapbook or transload it to store that smaller version at your website.

If you are transloadng it to a website such as geocities or angelfire, be sure to rename the smaller image to something different than the original photo's filename during the transloading process.

Then to produce a clickable thumbnail image to the larger original photo, use:

The code and a demo for placing the images side-by-side in a table is below.

And another slightly different demo of tabled thumbnails is here.

Image Magick
http://magick.net4tv.com/MagickStudio/scripts/MagickStudio.cgi

Enter the url, press "view".
Press "resize" on the next page.
Then enter the dimensions you want to make the image and put a ! at the end of it ( such as 80x100! )
(or use a % to reduce the image, such as 50% or 25%),
then press resize.
When the resized image is displayed again, go to the top of the page and press "output'.
Choose the format (gif or jpg), multiple files, and press output again.

Then transload the resized image to your website or use an uploader to transfer it to your Webtv scrapbook.

myImager.com
http://www.myImager.com

Click onto "file", then "open".
Enter the url of the image, and press "upload".
Click onto "edit", then "resize".
Enter dimensions for the desired image size (several options there) and press "resize".
When the resized image is returned,
press "file", then "save".
A temporary url will be shown on the next page.
You can transload the image directly from myImager.com to a non-webtv-website by filling in the information below the temporary url.
If you are using the Webtv scrapbook, then click onto the temporary url of the image, and go to an uploader to transfer the image to the scrapbook
( http://www.Webscissors.com or http://www.mimes.com/s
are two of many that you can use)
Then obtain the url of the thumbnail photos by using one of the methods described here:
http://www.geocities.com/willxwill/whatthe.html
And you can also click onto the temporary url that is shown and obtain its temporary url by pressing "go to" on the keyboard, then press "show current".
Then highlight the url by holding down the "Cmd" key and press "A", and save it by holding down the "Cmd" key and press "C".

Webfx (use the shrink option)
http://www.newbreedsoftware.com/webfx/

And a simple table format for the thumbnails is below,
using the larger, original photo in the <<>a href> tag,
and with 4 thumbnail photos on each line (all centered) and using the dimensions of 100x80 inside the image tags (for faster loading of the thumbnailed images).

Repeat the middle portion of the code below (from and including <<>tr........to........<<>/tr> ) to make as many rows as you want in the table.

<<>table width="100%" border="3" cellspacing="5" background="http://url of image">

<<>!-- 1st row of thumbnails -->
<<>tr align="center" valign="middle">

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>/tr>

<<>!-- 2nd row of thumbnails -->
<<>tr align="center" valign="middle">

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>td><<>a href="http://url of larger image">
<<>img src="http://url of small image" width="100" height="80">
<<>/a><<>/td>

<<>/tr>

etc
etc
etc

<<>/table>

More information on tables:

http://junior.apk.net/~jbarta/tutor/tables/index.html

Another demonstration of tabled thumbnails

a few more codes