PDA

View Full Version : How to post images and make clickable-thumbnails in forums



Dannix
07-02-2010, 11:11 PM
Feb '11 - I'm going to edit this as some Imageshack ads have been found to contain malware. If you view this how-to before I'd edited it, then suffice to say I'd recommend another site like tinypic or particularly photobucket.


Final Version. July '10
____________________________

Simply Posting Images

Lets say you have an image you would like to post on the forum. The file is called BABore_480Ruger.jpg.

Now you have to get the image from your computer to a web host for your image. I highly recommend attaching images to this forum to ensure longevity (for how, see post below). Experiencing a dead link while trying to glean information from an old thread is an awful thing. But what if you were using a forum without the ability to attach files or wanted to post something outside the attachment constraints (see third post)? ImageShack (www.imageshack.us) is an example of a site that will host your images free of charge, within a file size limit and file type list of course. From ImageShack, browse to the image file on your hard drive, selecting BABore_480Ruger.jpg.

ImageShack will display the Direct Link to the image <photo> (http://img145.imageshack.us/img145/1272/imageshackbaboreexample.png), which in this case is:
http://img294.imageshack.us/img294/9403/babore480ruger.jpg

General tidbit: If you already have the image hosted by photobook, piscasa, or the like or it's otherwise online, just right-click on the image and select "Copy Image Location" or "Copy Link Location", if you're using Firefox, or something like this if you are using a different web browser. Try them both to see which link is best for your purposes.

To display the image in the forum, image tags must be added around the image link:
http://img294.imageshack.us/img294/9403/babore480ruger.jpg

What is seen by the post viewers:
http://img294.imageshack.us/img294/9403/babore480ruger.jpg


In-text Links

Another helpful technique is linking a url (web address) within standard text. An example of this is the above <photo> link in this thread. If you click on <photo>, you will see an example photo. This is how it was done:
displayed text[/ url] Note: Ignore space between / and url.

And In this particular case:
[url=http://img145.imageshack.us/img145/1272/imageshackbaboreexample.png] <photo>[/ url]

What is seen by the post viewers:
[url=http://img145.imageshack.us/img145/1272/imageshackbaboreexample.png] <photo> (website link)


Clickable Thumbnails

Clickable Thumbnails is a combination of two techniques mentioned above.

It can be inappropriate to simply wrap image tags around a large image. Not only can it bring woe to those still unfortunate enough to be on dial-up, it can a real annoyance to those using all but the largest computer displays. It also helps to save the websites involved some bandwidth. The solution lies in clickable thumbnails - a thumbnail image large enough to be summarized at a glance and if the post viewer finds the image of further interest a simple click brings up the full sized image.

Here's now it is done:
[img]link to small image[/ img][/ url]

Example. Say you have this image 2200×1760, 452k image that you would like to post:
http://img180.imageshack.us/img180/795/speergolddotammunitionc.jpg

It would be rather foolish to throw the image tags ([img]) around an image of this size but at the same time, you may not want just a in-text link either. A little thumbnail lets the post viewer see a concise version of the image so he can then make an informed decision on whether the image is of interest.


The in-text link version:

[url=http://img180.imageshack.us/img180/795/speergolddotammunitionc.jpg]Speer Gold Dot Poster[/ url]

What is see by the post viewers:
[url=http://img180.imageshack.us/img180/795/speergolddotammunitionc.jpg]Speer Gold Dot Poster (link to large image)

The clickable thumbnail version:

[IMG]http://img180.imageshack.us/img180/795/speergolddotammunitionc.th.jpg[/ IMG][/ URL]
What is see by the post viewers:
[URL=http://img180.imageshack.us/img180/795/speergolddotammunitionc.jpg]http://img180.imageshack.us/img180/795/speergolddotammunitionc.th.jpg (http://img180.imageshack.us/i/speergolddotammunitionc.jpg/)


Pretty nifty, yeah? What's great is that Imageshack generates the 'small image' thumbnail for you, so all you have to do is copy the Forum Thumbnail url link <photo> (http://img145.imageshack.us/img145/1272/imageshackbaboreexample.png) and paste it into your post for a quick and easy clickable-thumbail in your post. Super!


Hope this how-to helps!

Dannix

Dannix
07-02-2010, 11:23 PM
As mentioned in the post above, it can be prudent to attach an image to a post rather than using a free outside source.

Attaching images to a Forum Post

First, make sure you aren't typing a Quick Reply, but Go Advanced. Scroll down to Manage Attachments. Once there, browse to the file, upload the file, and ta-da, you'll see the file in the window under Current Attachments. Close the window, and when you post, the file(s) will be attached to the post.

Should you wish to modify your attached files, you can go back to the Manage Attachments window, and add or remove files as you wish.


Hope that was clearer than mud. :) Some pictures attached.

Dannix
07-03-2010, 02:06 AM
The File Sizes part of this post is still a work in progress.
____________________________

File Formats
jpeg or jpg is best for photos, like BABore's .480 Ruger image on the first post.

png or gif, (png is better for reasons I won't elaborate on) is best for simple graphics, like the screenshots I posted on the second post. PNG/GIF image compression keeps the text nice and sharp and the filesize is much smaller the jpeg as well! Win-win situation, like using the right tool for the job. Using png for photos would make for a very high quality image (because png is lossless, no image degradation like lossy jpeg), but a very large file size indeed and certainly not appropriate for general web use.

For example, see the pixelation of the jpg here? (http://brp.castpics.net/R1.html) This is where png (or gif) would be superior -- both smaller file size, and no pixelation, but nice crisp lines. Look at the attached images in the above post. See the image pixelation? A png or gif would have no such pixelation and would be ~1/10th the size as well.

Note: It is important to consider the attachment constraints of this forum (http://castboolits.gunloads.com/attachment.php?attachmentid=23395&d=1278212848). This is why I did not attach png versions of the above images. If I was using a place like ImageShack, png would be the way to go.


File Sizes
When you snap a photo with even the cheaper cameras of today, you end up with a very large image, both in resolution size and in data size. Now that may be what you want if you're going to be put it up on interfacelift.com, but it's going to be a pain to upload as consumer broadband internet is designed for fast downloads and slow uploads...so they can then sell fast uploads to webservers and the like. And the image is probably going to too large with regard to resolution as well. And then there's the forum size limits if you're going to attach an image to the forum to ensure longevity.

Say you want to attach an image, but it's too big for the file size limit here or at a free image hoster. Well, you can just attach it and have the forum or website autosize for you, but the result is a shrunk image and that can mean illegible text. If you're just posting something quick and dirty, that may be OK, but it's generally not the most desirable and particularly so if there's relevant text in the image.


Crop the Image. Scroll down to Post#5 on information on cropping. This allows you to trim the fat off the image, like how editing is to text, and is an important part in reducing image file size.
Re-Size the Image. Basically just shrink the image's size (often measured in pixel resolution) appropriate levels. In other words, size it down. Helpful thread (http://www.wilderssecurity.com/showthread.php?t=141853).
Re-Save the Image. Once you've cropped the image to your liking, save the image as jpg. When you do so, you'll see a quality slider. I generally like to save at 90 to 80 percent. Below 85 or so is when pixelation can start to become noticeable. If you lower the quality to around 80 and you are still not within the 100k limit, then you need to resize the image smaller.

lwknight
07-03-2010, 09:46 AM
I for one appreciate your taking time for this little write-up.
A walkthrough makes it easier to navigate.

Dannix
07-03-2010, 11:03 PM
Just a stub, but hope it helps.
____________________________

Image Cropping
I like PhotoFiltre (http://photofiltre.free.fr/utils/PhotoFiltre-en.zip) for simple photo editing and cropping in Microsoft Windows. It's free as in there is no charge to download and use (at least for personal use anyway). A Google search (http://lmgtfy.com/?q=photofiltre+cropping) will help a lot in learning how to do stuff like this, but there's a great tutorial here (http://www.wilderssecurity.com/showpost.php?p=814245&postcount=6) for cropping in Photofiltre.

Dannix
07-03-2010, 11:04 PM
No problem lwknight. My way of giving back. :)

Dannix
07-27-2010, 11:54 PM
Well I just finished what I'm going to call the final version for this how-to guide. Let me know if there are typos or any unclear or confusing parts, and I'll try to polish it up a bit more.

MtGun44
07-28-2010, 01:07 AM
This should be a sticky.

Bill