Hello! In this installment we’re creating clickable thumbnails for the three photo hosts recommended in the last fOtofair diary. Thumbnail files are smaller and this allows the diaries to load quickly (which is important for BTers on dial-up), while offering access to higher resolution images. Check out the great explanation of clickable thumbnail links written by ejmw.

Once again, we welcome your questions and feedback. Please feel free to practice creating clickable thumbnails in the comments section below. Most of all, have fun!

Please recommend this diary so that everyone has a chance to read it. To find the most up-to-date diary when it has fallen of the rec list, check out the froggy bottom cafe which posts a link on the virtual bulletin board.

To make this diary more manageable, click on the photo host site you are using to jump to that particular section of the diary.

Photobucket | Flickr | Imageshack

::

Photobucket

Photobucket, like ImageShack, generates clickable thumbnails automatically. There are a few different variations of html code produced for use on different forums, blogs, etc., so you have to manipulate the code a bit for it to work at BT.

To create clickable thumbnails:

Upload your photo.

Select the photo you want to make thumbnail for by checking the little box underneath each image.

Scroll to the bottom of the page to locate the button Generate HTML and IMG code and click.

For BT, copy the code in the first box labelled HTML clickable thumbnails for Ebay, Livejournal, MySpace, etc..

Paste the code into the comment box at BT or a text file.

BT does not allow some code, so we have to remove that part before the clickable photo will work. Remove the following bits:

alt=”XXX”
target=”blank”
<center> </center> codes

This is what the final clickable thumbnail code should look like:

<a href=”http://www.LARGE_PHOTO_CODE.jpg”><img src=”http://www.thumbnail_code.jpg”></a>

Important! Before posting, test to make sure the photo appears and the link works by previewing the comment and clicking on the thumbnail. If the thumbnail displays and the link opens, then hit post.

::

Flickr

Unlike Photobucket and Imageshack which generate clickable thumbnails automatically, you have to manually create them in Flickr. It’s not difficult to do — just a matter of copying and pasting the urls for both the thumbnail and the large photo.

To create clickable thumbnails:

Upload your photo.

Select the photo you want to make the clickable thumbnail for by clicking on the button All Sizes on top of the photo.

A new page will open where you can then select the size of photo and corresponding code. To make the clickable thumbnail you will have to copy two sizes: the thumbnail and the large photo.

Select the large size photo to get the code, which will be displayed below the image at the bottom of the page.

Copy the code in Option 2 (Grab the photo’s URL) and paste to the BT comment box or a text file.

Next, select the thumbnail photo to display the code. Copy the code in Option 2 and paste in the BT comment box or text file.

Combine the two codes to create the clickable thumbnail as follows:

<a href=”http://www.PASTE_LARGE_PHOTO_CODE_HERE.jpg”><img src=”http://www.paste_thumbnail_code_here.jpg”></a>

Important! Before posting, test to make sure the photo appears and the link works by previewing the comment and clicking on the thumbnail. If the thumbnail displays and the link opens, then hit post.

::

ImageShack

ImageShack, like Photobucket, generates clickable thumbnails automatically. There are a few different variations of html code produced for use on different forums, blogs, etc., so you have to manipulate the code a bit for it to work at BT. Also, we’ve found that the link that opens to the large sized photo with the auto generated thumbnail has a banner ad running across the top of the page. For some BT users running Macs, this ad caused their web browser to crash. Because of this, we’ll walk through setting up the clickable thumbnail linking to an ad-free large photo.

To create thumbnails:

Upload your photo.

We recommend that when you upload your photo you select the box that turns off the size/resolution bar for thumbnails. This black bar is a small strip that runs along the bottom of the thumbnail photo, and identifies the height, width, and size (in kbs) of the large photo. To turn off the size/resolution bar click the little check box:

Click on photo, and on the next page locate the code for thumbnails. Copy that code into the comment box at BT or a text file.

Next, locate the large photo code that will give you the ad-free photo.

You need to paste the large photo code into the autogenerated thumbnail code. Use the following as a guide:

<a href=”http://www.PASTE_LARGE_PHOTO_CODE_HERE.jpg”><img src=”http://www.thumbnail_code.jpg”></a>

BT does not allow some code, so we have to remove that part before the clickable thumbnail will work. Remove the following bits:

target=”blank”
alt=”XXX” (if present)

Important! Before posting, test to make sure the photo appears and the link works by previewing the comment and clicking on the thumbnail. If the thumbnail displays and the link opens, then hit post.