Hacks 1917 Industrial.. Strength Tips and Tools [Electronic resources] نسخه متنی

Hack 60 Make Clickable Thumbnails

Use thumbnails for more professional-looking
auction photos that load more quickly.

If you're hosting your
auction photos [Hack #59], you have the
freedom to include as many images as you like at no additional
charge. But you're also responsible for inserting
those photos into your auctions and presenting them in a way that is
efficient and appropriate.

An average eBay auction page is about 40 kilobytes in size, not
including any photos you might include. (There's
also about 50 KB of JavaScript code and 15 KB of eBay images, but
these will be quickly cached and ultimately loaded only once.) The
size of an average, medium-sized JPG file is about 50-60 KB, which
more than doubles the amount of data your bidders will have to load
to view your auction.

Thumbnail photos are much smaller than their full-size equivalents,
both in physical dimensions and in the amount of data that must be
transferred. This means that by replacing several full-size photos
with thumbnails, your auction will not only appear tidier but will
load faster as well.

5.7.1 Preparing the Images

Thumbnails are nothing more than smaller versions of full-size
images, so you'll need to make two versions of each
photo.

Don't even think about using the width and height parameters of the <img> tag to "shrink" down large photos. Not only will your images look awful, but they'll load much more slowly than true thumbnails.

Start by duplicating each of your image files. In Windows, for
example, highlight all the images you wish to duplicate, drag them
with the right mouse button to another part of the same folder
window, and select Copy Here.

Next, rename your thumbnails appropriately. For example, if one of
your images is named /image/library/english/10062_front.jpg, name the
thumbnail image something like front.small.jpg
or front_thumb.jpg. Remember to follow the
naming conventions outlined in [Hack #59].

An easy way to rename large groups of files quickly is to use Power Rename, a component of Creative Element Power Tools, available at www.creativelement.com/powertools (Windows XP, 2000, and Me only at this time). Among other things, Power Rename allows you to do search-and-replace operations on groups of filenames, even creating duplicates in the process.

Finally, open the newly created duplicates in your favorite image
editor and shrink them down. A good size for thumbnails is 100 pixels
in the larger dimension, but you can certainly make them smaller or
larger as you see fit. Anything smaller than 50 or 60 pixels,
however, will probably be too small, and anything larger than 200
will probably be unnecessarily large.

In most cases, your thumbnails will look best if
they're all the same size. If
you're placing them side by side, you might want
them to be all the same height; if you're stacking
them, you might want to make them all the same width. But probably
the most effective approach is to pick a size to use for each
photo's larger dimension.

If you're using Windows XP, you can use Microsoft's Image Resizer utility, freely available at www.microsoft.com/windowsxp/pro/downloads/powertoys.asp, to resize a bunch of photos in a single step.

When your images and corresponding thumbnails have been prepared,
upload them to your server (see [Hack #59]).

5.7.2 Putting Thumbnails in your Auctions

To put a single thumbnail
image in your auction description, use the
following bit of HTML:

<a href="/image/library/english/10062_view1.jpg"><img
src="/image/library/english/10062_view1_small.jpg"></a>

Simply replace
/image/library/english/10062_view1_small.jpg
with the complete URL of the thumbnail image, and replace
/image/library/english/10062_view1.jpg with
the URL of the full-size image. (See [Hack #40] for more information on the
<img> and <a>
tags.)

To right-align or left-align your thumbnail in the description,
simply include the align=right or
align=left parameters, respectively, in the
<img> tag, like this:

<img src="/image/library/english/10062_view1_small.jpg" align=right>

You can use tables to group a bunch of thumbnails together. Not only
does this impose some structure on your images, but it permits
captions, which require the alignment only tables can afford. For
instance, the following code shows four thumbnails with
captions aligned in a simple 2 x 2 table:

<table cellpadding=10 cellspacing=0 border=0>
<tr><td align=center>
<a href="/image/library/english/10062_front.jpg" target=_blank><img src="/image/library/english/10062_front_small.jpg"></a>
<br>The front of the car
</td><td align=center>
<a href="/image/library/english/10062_glovebox.jpg" target=_blank><img src="/image/library/english/10062_glovebox_small.jpg"></a>
<br>The spacious glove compartment
</td></tr>
<tr><td align=center>
<a href="/image/library/english/10062_fender.jpg" target=_blank><img src="/image/library/english/10062_fender_small.jpg"></a>
<br>The dent in the fender
</td><td align=center>
<a href="/image/library/english/10062_dog.jpg" target=_blank><img src="/image/library/english/10062_dog_small.jpg"></a>
<br>The dog I found in the back seat
</td></tr>
</table>

(Note that the URLs have been removed from this example for clarity,
but they're needed nonetheless.) The resulting table
is shown in Figure 5-9.

Figure 5-9. A simple table helps you align thumbnail images and their captions

The target=_blank parameters in the
<a> tags in the preceding example force the
full-size images to open in new windows, thus leaving the original
auction page intact. Another way to do this is via JavaScript:

<script language="JavaScript">
function newWindow(url,width,height) {
flags = "width=" + width + ",height=" + height +
",resizable=no,scrollbars=no,menubar=no,toolbar=no,
status=no,location=no,alwaysraised=yes";
window.open(url, "mywindow", flags);
}
// --></script>
<a href="http://www.ebayhacks.com/pictures//image/library/english/10062_front.jpg"
onClick="newWindow('../www.ebayhacks.com/pictures/view1.jpg',
300,225);return false;"><img
src="http://www.ebayhacks.com/pictures//image/library/english/10062_front_small.jpg"></a>

Instead of simply opening an ordinary browser window, this JavaScript
code will display the image in a smaller, tidier window, sized to fit
the image, and will reuse the window for each successive image that
is viewed. Note that there's still an
<a> tag, allowing the code to work even if
JavaScript is disabled; the return false;
statement is used later on to deactivate the link when JavaScript is
active.

There are plenty of other ways you can customize your thumbnails. For
instance:

Change the border width of the thumbnails by placing the
border=n parameter in
each <img> tag, where
n is the number of pixels (2 is the
default).

Add whitespace around your thumbnails by using the
hspace and vspace parameters,
introduced in [Hack #40].

Further decorate the table containing your thumbnails; see [Hack #42] for details.

See [Hack #61] for another way to put
thumbnails in your auction.