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

10 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!

Leslie Lim said...

This is really interesting and knowledgeable. Thanks for sharing. I really appreciate it a lot. Please do more blogs in the future. Thank you and God bless to the blogger!

Rica
www.imarksweb.org

tawfik hassan said...

اسباب وجود النمل الابيض في البيت
شركات مكافحة النمل الابيض بالرياض
شركة مكافحة النمل الابيض بالرياض
شركة مكافحة النمل الابيض بالدمام
افضل شركة مكافحة النمل الابيض
القضاء على النمل الابيض الارضة
مكافحة النمل الابيض في المنزل
مكافحة النمل الابيض قبل البناء
مكافحة النمل الابيض بجدة
مكافحة النمل الابيض الارضة
معلومات عن النمل الابيض
الوقاية من النمل الابيض
مبيدات النمل الابيض
مكافحه النمل الابيض
رش النمل الابيض
النمل الأبيض

Milad Zalaghi said...

راههاي موفقيت

راه هاي موفقيت

روانشناسي موفقيت

عوامل حياتي موفقيت

عوامل کليدي موفقيت

عوامل موفقيت

برج خنک کننده

تور مالزي

تور کيش

تور کوش آداسي

تور قبرس

تور فرانسه

تور دبي

تور تايلند

تور پاتايا

تور بدروم

تور ايتاليا

تور استانبول

تور اسپانيا

تور اروپا

تور آنتاليا

تور مالزي

قيمت تور مالزي

تور لحظه آخري مالزي

قيمت تور کيش

تور کيش

تور لحظه آخري کيش

تور مالزي

قيمت تور مالزي

تور لحظه آخري مالزي

تور لحظه آخري

تور کيش

تور کوش آداسي

قيمت تور کوش آداسي

تور لحظه آخري کوش آداسي

تور کوش آداسي

قيمت تور کوش آداسي

تور لحظه آخري کوش آداسي

تور قبرس

قيمت تور قبرس

تور لحظه آخري قبرس

تور قبرس

قيمت تور قبرس

Mehri Zalaghi said...

خريد عطر مردانه

عطر زنانه

خريد عطر زنانه

عطر ماه تولد

ساعت مچي

خريد گوشي طرح اصل

گوشي هاي طرح اصل

گوشي گلکسي اس 6

گوشي گلکسي 6

گوشي سامسونگ گلکسي

گلکسي 6

زيبايي خنده

خريد اپل آيدي

تور لحظه آخري

cccam server

دکوراسيون داخلي

مبلمان اداري

کار آفريني

دندانپزشکي زيبايي

لبخند زيبا

زيبايي لبخند

طراحي لبخند

اصلاح طرح لبخند

لمينت دندان

لمينت

هزينه کاشت دندان

کاشت دندان

کشيدن دندان عقل

کشيدن دندان

کاشت دندان ايمپلنت

سايت دندانپزشکي

کلينيک دندانپزشکي

دندانپزشک

دندانپزشکي

دکتر دندانپزشک

ايمپلنت

ايمپلنت دندان

جرم گيري دندان

جراحي لثه

محمد الخطيب said...



شركة كشف تسربات المياه بالرياض
كشف تسربات المياه بالرياض
شركة كشف تسربات المياه بالدمام
كشف تسربات المياه بالدمام
شركة كشف تسربات المياه بالاحساء
كشف تسربات المياه بالاحساء شركة عزل اسطح بالرياض
شركة عزل خزانات المياه بالرياض
شركه عزل مائى بالرياض
شركة عزل حرارى بالرياض شركة عزل اسطح بالدمام
شركة عزل خزانات المياه بالدمام
شركه عزل مائى بالدمام
شركة عزل حرارى بالدمام شركة عزل اسطح بالاحساء
شركة عزل خزانات المياه بالاحساء
شركه عزل مائى بالاحساء
شركة عزل حرارى بالاحساء
شركة كشف تسربات المياه بالجبيل
كشف تسربات المياه بالجبيل
شركة كشف تسربات المياه بالخبر
كشف تسربات المياه بالخبر
شركة كشف تسربات المياه بالقطيف
كشف تسربات المياه بالقطيف
شركة كشف تسربات المياه بالقصيم
كشف تسربات المياه بالقصيم شركة كشف تسربات المياه بالاحساء
كشف تسربات المياه بالاحساء