If you're not familiar with images in bbCode, read images lesson in three parts: Part 1, Part 2 & Part 3.
Sometimes posting big images into your posts presents a problem, because large pictures are hard to load & often deform forums layouts & reduce their usability.
In the end of my post on Images Display Part 3, I talked about an alternative which is the use of [url] tags instead of [img] tag, this way only a link to the image & not the image itself is displayed in your final message.
In this lesson, let's talk about an other option: "Thumbnails".
Thumbnails are small previews of images, linked to the original full size pictures, that means, that instead of posting the original large image, you post a thumbnail or preview, on which users can click to see a new page open with the full sized image displayed on it.
If you are familiar with images edition, you can create your own thumbnails. All you need is to create a reduced size copy of an image, upload both to an images host & code them using bbCode, let's see an example:
Below is the URL of my original picture hosted on PhotoBucket (I made it clickable to let you see how it looks like):
& this is the link to an image which size is 30% of the original:
Now, we will follow the same steps we followed when we made a linked clickable image:
As we want to display the preview in the forum message, we first have to wrap it with [img] tag:
(don't have a line-break in your code, keep it in the same line!)
Now, to link to the original full sized picture, we have to wrap the code above with [url] tag, & to add an option to it which is the link to our picture:
(again, the code has two line-breaks because of limitations in this bog's layout, but keep yours in one line)
To verify the result, click on the thumbnail below:
That's it! If your not familiar with images edition though, we'll see in the next lesson an easier way to post thumbnails: Post Clickable Thumbnails Using ImageShack :)