DrCR

To the admins, could you make this a stick or move this to the Linux Tutorials section? I think this will be helpful to many newbies and even not-so-newbies as well. Thanks

How to make clickable-thumbnails in forums


Why?

Well the first question we must ask is why. Why would you take the few extra seconds and keystrokes to make clickable thumbnails? It all comes down to communication and not just what is being said, but how it is being said as well. For the same reason leetspeak is not often used this and other like forums, images should be treated to the same standard.

A single large image isn't really considerate of the viewers of your post. And more so than just to those poor souls still using 56K for their internet connection. It's often just an annoyance, esp. if you're running at a resolution below 1280x1024 (19"). The problem only gets worse when there a numerous images posted. Not only are transfer rates adversely affected for all, but it can make browsing the thread pure insanity. Now I have AdBlock and Image Zoom extensions on my brower, but I would venture at least 95% out there do not.


The solution lies in clickable thumbnails. Images large enough to be summarized at a glance and if of further interst, allow the browser to view the larger sized version of the image. A nice side affect for the servers is that bandwidth use is reduced as well.



Simply Posting Images

To be able to post clickable thumbnails, you must first know how to post simply images. Lets say I have an image of the GIMP logo that I would like to post on the forum. The file is called gimp_logo.jpg (the jpeg format is a much better than the png format in this case.*).

Now you have to get the image from your computer to a machine that will act as a server for your image. www.imageshack.us, there are many others, is an example of a site that will host your images (within certain parameters) free of charge.

From imageshack's site I browse to the image file on my hard drive, selecting gimp_logo.jpg.

Imageshack then displays the link to the image, which in this case is:
http://img59.imageshack.us/img59/2374/gimplogo1kg.jpg
(note that imageshack often renames the image. perhaps it does not if you have an account with them)

To display the image in a forum, I must add the image tags around the image link.
What is seen by the post viewers:




In-text Links

Another technique you must be familiar with is how to link a url (website) with standard text. An example of this is the afore mentioned leetspeak in this thread. If you click on the word leetspeak, you will be linked to an encyclopedia defining the word for you. This is how it was done:
And In this particular case:
What is seen by the post viewers:
leetspeak



Clickable Thumbnails

Clickable Thumbnails is a combination of two forum techniques mentioned above. Here's now it is done:
Example. I have this image 1495x1200 637KB image that I would like to post:
http://img44.imageshack.us/my.php?im...ylvania2mz.jpg

I would be rather foolish to throw the image tages ([img]) around an image of this size but at the same time, I don't want a simply "click here" either. A little thumbnail lets the post view see a concise version of the image and decide if it is of interst to him.


The in-text link version:
What is see by the post viewers:
buckscountypennsylvania


The clickable thumbnail version:
(note, all in one line, no spaces, just inserted a break at the [img] part so there wouldn't be a huge link of text across the screen)


What is see by the post viewers:



Rather nice, isn't it.

The resolution and image size note is an imageshack extra, as is the automagicly created thumbnail image. Most image hosters automatically created thumbnails as well though, and if not, you would need to shrink a copy of the image down and upload that to the image hoster as well. Yes, auto thumbnails are a really nice feature...and leave no excuse for not using clickable thumbnails.


Hope this is of help to some here,
DrCR

___________
*jpeg is often the better choice for graphic/photos/etc. while png is often the better choice where text and blank space were representative. Example: A shot of your desktop should probably be in jpeg. A shot of AbiWord should probably be in png. No flames, just fact.

ozar

Hey there, DrCR...

It appears to me that you probably spent quite a bit of time on this HowTo, so if the admins won't make it a sticky, it deserves a bump...^ at the very least, in my opinion.

~tux~

Great work there This should definately be a sticky.