Making Thumbnails


   A thumbnail is a smaller version of an image. To use a thumbnail, you will need to find your scrapbook URL. You can refer to my quick link Finding Your Scrapbook URL for help with this. We use thumbnails mainly as image links that you click on to go to the full sized version of the image or a webpage. I will cover three examples of using a thumbnail: 1) a simple image reduced to thumbnail size; 2) a thumbnail sized image linking to a webpage; and 3) a thumbnail sized image linking to a full sized version of the image. I will conclude with showing how to put thumbnails into a table. Now, you can go to your webpage.

   The first example is to make a simple thumbnailed size image. Choose "add an item". Then, choose "heading". In the heading box put:

<img src="URL of image" height="80" width="80">

You can, of course, replace the height and width of 80 with any dimensions that you want. I would say that for image to qualify to be called a thumbnail, it should be fairly small, but the size is your choice.

   Now, we will make this thumbnail into a clickable image. So, we will make the next example a thumbnail link to a webpage:

<a href="URL of webpage"><img src="URL of image"></a>

See how this is just like a regular link, but using an image instead of a text for a link?

   The next example and maybe the most popular use of thumbnails is to have a thumbnail linked to a full sized version of that image. Why do this? One reason is to fit more images on one page. Another reason is for faster loading time, although I don't notice this in Pagebuilder. Some people believe this, though. Your code for a thumbnail image linking to full sized version of the image is:

<a href="URL of image"><img src="URL of image" height="80" width="80"></a>

   Some of you may want to center your thumbnail image. To do this, we can use the center tags:

<center><a href="URL of image"><img src="URL of image height="80" width="80"></a></center>

The div tag to center the thumbnail will work with all three examples above.

   Sometimes, you want to put thumbnails in a table. Then, for a table of thumbnails linking to a larger image, we would have:

To add more thumbnails across, copy and paste from

<td> to </td> in each row that you have. To add more rows, copy and paste from <tr> to </tr>.


   Our thumbnail table for thumbnails that link to a webpage would be very similar:

The method for adding thumbnails across and down are the same as mentioned above. To add more thumbnails across, copy and paste from

<td> to </td> in each row that you have. To add more rows, copy and paste from <tr> to </tr>.

Using thumbnails will only allow you to fit more images on a page, but will not speed up your webpage loading time. If this is a concern for you, then you should make a reduced copy for each image to a size width="80" by height="80" or whatever your thumbnail size actually is. You can use an image editor like MyImager to do this. Having two sets of pictures will increase your scrapbook file size and you may want to set this thumbnail page under another username.