What is This All About?

When you participate on forums discussions, sometimes to type plain text would make it, but often, you need to make your posts more interesting: to add styles, change fonts, play with colors, insert links or to display images ...

In web development, HTML is used for all that, but in forums posts, a simplified code inspired from it allows users to format text, that code's called the "bbCode".

This blog will help you easily understand & use bbCode. Have Fun!!! :)

ps: don't hesitate to post a comment for any help needed or a suggestion, or just to say hi! :)

Friday, September 28, 2007

How to Post Pictures Clickable Thumbnails on Forums

Note: If this lesson seems a bit unclear to you, you may want to check basic bbCode lessons: How Does bbCode Work? & How to Correctly Insert Tags.

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):

http://i228.photobucket.com/albums/ee88/learn-bbcode/C7.jpg

& this is the link to an image which size is 30% of the original:

http://i228.photobucket.com/albums/ee88/learn-bbcode/C7-thumbnail.jpg

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:

[img]http://i228.photobucket.com/albums/ee88/learn-bbcode/
C7-thumbnail.jpg[/img]

(don't have a line-break in your code, keep it in the same line!)

Result:

thumbnail of image

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:

[url=http://i228.photobucket.com/albums/ee88/learn-bbcode/C7.jpg]
[img]
http://i228.photobucket.com/albums/ee88/learn-bbcode/
C7-thumbnail.jpg[/img][/url]

(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:

image thumbnail linked to the original


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 :)

5 comments:

Djzombie said...

thanks, i was looking for an easy way to aadd a thumbnail to my post without having to add a bbcode mod, they're a pain to update after installing a new version of phpbb

Anonymous said...

a question please...

How I can arrange multiple images in the same line..?

I tried but everytime each image goes under the previous one....

Thanks a lot

Alice said...

Excellent information, thanks

Courtney, Jaime, and Will said...

Thanks soooooo much!!! That really helped!! THANKS ALOT!!!!

Anonymous said...

Excellent how to! Thank you!