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

66 comments:

Anonymous 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

Anonymous said...

Excellent information, thanks

Glitch said...

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

Anonymous said...

Excellent how to! Thank you!

Unknown 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

Unknown said...

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

milijj said...

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

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

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

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

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

عوامل موفقيت

برج خنک کننده

تور مالزي

تور کيش

تور کوش آداسي

تور قبرس

تور فرانسه

تور دبي

تور تايلند

تور پاتايا

تور بدروم

تور ايتاليا

تور استانبول

تور اسپانيا

تور اروپا

تور آنتاليا

تور مالزي

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

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

قيمت تور کيش

تور کيش

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

تور مالزي

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

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

تور لحظه آخري

تور کيش

تور کوش آداسي

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

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

تور کوش آداسي

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

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

تور قبرس

قيمت تور قبرس

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

تور قبرس

قيمت تور قبرس

Unknown said...

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

عطر زنانه

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

عطر ماه تولد

ساعت مچي

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

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

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

گوشي گلکسي 6

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

گلکسي 6

زيبايي خنده

خريد اپل آيدي

تور لحظه آخري

cccam server

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

مبلمان اداري

کار آفريني

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

لبخند زيبا

زيبايي لبخند

طراحي لبخند

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

لمينت دندان

لمينت

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

کاشت دندان

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

کشيدن دندان

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

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

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

دندانپزشک

دندانپزشکي

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

ايمپلنت

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

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

جراحي لثه

رواد الحرمين said...



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

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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

Unknown said...

Thanks It was a great topic
مراقبه و مدیتیشن
قانون جذب
جذب ثروت
تعالی نیروی جنسی
رضایت از مجردی
تجسم خلاق

موفقیت در زندگی said...

موفقیت در زندگی
عزت نفس چیست
موفقیت در زندگی
عزت نفس چیست

راز موفقیت said...


راز موفقیت در زندگی
معنی عزت نفس
راه های موفقیت در زندگی
افزایش عزت نفس

Unknown said...

افزایش اعتماد به نفس

محمد پیام بهرام پور

علی محمدیان

ادکلن مردانه

دکتر علی صاحبی

فروشگاه اینترنتی سوفاین
لوازم آشپزخانه

Unknown said...

آموزش و مشاوره بازاریابی

آموزش بازاریابی
مدیر روز دات کام modireroz.com/

آموزش و مشاوره بازاریابی

Rahine said...

یکی بهترین سایت ها برای مطالعه کابینت کلاسیک چوبی سامان چوب است.

bibvpn said...

کاراملا سایتی برای سفارش آنلاین کیک تولد در تهران و خرید اینترنتی کیک خانگی می باشد. سفارش اینترنتی کیک تولد دخترانه و کیک تولد پسرانه - سفارش کیک تولد

Anonymous said...

مطالب خوبي داريد
موسسه كاشت مو آسمان زيباي خودتون به ما بسپاريد .

كاشت مو said...

براي زيباي در موهاتون با ما تماس بگيريد

Ahmad Heydari said...

خرید آجیل
خرید خشکبار
خرید آجیل مخلوط

sandwichpanel said...


ساندويچ پانل

ساندويچ پانل سقفي

ساندويچ پانل ديواري

ساندويچ پانل در تبريز
نصب ساندويچ پانل

Ahmad Heydari said...

کسب و کار جدید
مرجع بیوگرافی
امام دوازدهم

ehsan7n said...

املاک تبريز
املاک وليعصرتبريز
املاک ائل گلي تبريز
کانال تلگرام املاک تبريز
املاک تبريز118
ملک تبريز
جستجوي ملک روي نقشه تبريز

Ahmad Heydari said...

جدیدترین اخبار ایران و جهان
سرگرمی ها
ولایت مداری در عصر جدید

Ahmad Heydari said...

بلاگ بیان
بیان
بلاگفا
سایت بلاگفا
قائن آی تی
آنلاین ام ال ام
بلاگ اسکای
استراتژی موفقیت
میهن بلاگ
لوکس بلاگ

Ahmad Heydari said...

رویا بلاگ
یکتا بلاگ
پارسی بلاگ
رز بلاگ
فارسی بلاگ
آوا بلاگ
تبیان
رومفا
تونبلاگ
آرام بلاگ

Ahmad Heydari said...

لاگر
weebly
hatenablog
ایمی اسپات
تیبا بلاگ
ردیت
کلوب

Ahmad Heydari said...

خوشبو کننده هوا
اسپری خوشبو کننده هوا

Ahmad Heydari said...

پرشین بلاگ
ویرگول
ردیت
دلگرم
پویه
آنلاین ام ال ام

فروش ساندویچ پانل said...

tnx for sharing

فروشگاه محصولات دکوراتيو

فروش آينه

فروش ميز تلويزيون

فروش روشويي

فروش ساعت

ساندويچ پانل

ساندويچ پانل سقفي

ساندويچ پانل ديواري

وبلاگ ساندويچ پانل در تبريز

Ahmad Heydari said...

minecraftforum
irserv
mootools
promodj
edocr
smashwords
ecastats
trello
fikket
digg

Ahmad Heydari said...

mix
physics
500px
pinterest
ted
wordpress
about
ravanbonyan
farmersforum
blogger

Unknown said...

مجله تخصصی زیبایی

دانلود آهنگ جدید said...

دانلود آهنگ جدید عاشقانه
دانلود آهنگ جدید غمگین
دانلود آهنگ جدید شاد
دانلود آهنگ جدید
خرید واتر اسلایم

دانلود فول آلبوم شادمهر عقیلی

دانلود فول البوم معین

Ahmad Heydari said...

آموزش نویسندگی کتاب
چگونه کتاب بنویسیم
اصول اولیه نویسندگی
معرفی کتاب در مورد نویسندگی
کسب مهارت در نویسندگی

خرید ممبر تلگرام said...

قیمت تعرفه خرید ممبر تلگرام برای هر یک از روش های جذب ممبر متفاوت است
خرید ممبر واقعی تلگرام
خرید ممبر تلگرام ارزان
آموزش ساخت لینک جوین
اد اجباری چیست

قالب فروشگاهی وردپرس said...

دانلود قالب وردپرس

دانلود قالب فروشگاهی وردپرس

دانلود رایگان قالب وردپرس

دانلود افزونه وردپرس

WordPress Theme And Plugin download said...

WordPress Temalari Ve Eklentileri

ücretsiz indir wordpress Temasi

ücretsiz indir wordpress Eklentileri

wordpress teması ücretsiz

wordpress alışveriş teması

ücretsiz indir wordpress Eklentileri

WooCommerce eklentisi

WOOCOMMERCE Teması

WordPress Theme And Plugin download

WordPress Theme And Plugin free download

طراحی وب سایت said...

تبلیغ در گوگل
ساخت سایت

سئو سایت said...

طراحی سایت املاک
طراحی سایت
طراحی وب سایت
ساخت سایت

سایت موفقیت said...

thanks very good

سایت موفیت

آموزش قانون جذب said...

آموزش قانون جذب

طراحی سایت said...

طراحی سایت شرکتی
وی پی اس چیست؟
طراحی سایت املاک

طراحی وب سایت said...

توریست درمان
دیجیتال مارکتینگ
طراحی سایت شرکتی
ساخت سایت
سئو سایت
بهترین شرکت طراحی سایت

طراحی سایت نونگار said...

ساخت سایت

Eric said...

royalcode

Eric said...

مبیت

ساندويچ پانل said...

ساندویچ پانل

ساندویچ پانل

dadehkavy said...

خرید پوشاک بچه گانه
خرید لباس بچه
خرید لباس مردانه
خرید لباس زنانه
خرید لباس دخترانه
خرید لباس پسرانه
خرید لباس نوزاد
خرید لباس نوزاد دختر
خرید لباس نوزاد پسر

قیمت ساندویچ پانل said...

ساندويچ پانل


ساندويچ پانل


ساندويچ پانل

صنعت تک said...

سنسور فشاربرای کنترل اکثر فرآیند های صنعتی، سنجش فشار امر بسیار مهمی محسوب می شود.
سنسور فشار، اطلاعات فشار را تبدیل به یک سیگنال الکتریکی می کند. اکثر سنسور های فشار، تغییر شکل دیافراگم را با توجه به تفاوت در فشار اعمال شده بر هر دو جهت، مورد سنجش قرار می دهند. سازنده ها برای چنین محصولاتی از عناوین مختلفی استفاده می کنند. «سنسور فشار» و «ترانسدیوسر فشار» می توانند به عنوان هم معنی و معادل استفاده شوند. اصطلاح «ترانسمیتر فشار» برای سنسور فشاری استفاده می شود که مجهز به قطعات الکترونیکی است که به آن اجازه ارائه یک سیگنال خروجی استاندارد شده را می دهد.

صنعت تک said...

سنسور فشار
سنسور فشاربرای کنترل اکثر فرآیند های صنعتی، سنجش فشار امر بسیار مهمی محسوب می شود.
سنسور فشار، اطلاعات فشار را تبدیل به یک سیگنال الکتریکی می کند. اکثر سنسور های فشار، تغییر شکل دیافراگم را با توجه به تفاوت در فشار اعمال شده بر هر دو جهت، مورد سنجش قرار می دهند. سازنده ها برای چنین محصولاتی از عناوین مختلفی استفاده می کنند. «سنسور فشار» و «ترانسدیوسر فشار» می توانند به عنوان هم معنی و معادل استفاده شوند. اصطلاح «ترانسمیتر فشار» برای سنسور فشاری استفاده می شود که مجهز به قطعات الکترونیکی است که به آن اجازه ارائه یک سیگنال خروجی استاندارد شده را می دهد.

ساندويچ پانل said...

ساندويچ پانل

قیمت ساندويچ پانل

dadehkavy said...

وبسایت فروش لباس مکس بکس با نماد اطمینان از وزارت صنعت معدن و تجارت،با اتکا به بیش از یک دهه حضور در مد و صنعت پوشاک پا به عرصه فروش اینترنتی نهاد.ارائه محصول با کیفیت و به صرفه،رضایت مندی مشتری با عنایت به صدای مشتری،سهولت خرید و ارائه محصولات متنوع بر پایه مد و حتی جلوتر از مد جزء اصول و اهداف اولیه مکس بکس بوده و خواهد بود.ما همواره سعی میکنیم تا در کمترین زمان ممکن با کمترین ضریب خطا و با استفاده از شیوه های نوین ثبت سفارش،ارسال و بسته بندی،محصولات خریداری شده را بدست مشتریان عزیز رسانده و روز به روز با نوآوری در این راه قدم برداریم.

خرید لباس مردانه
خرید لباس زنانه
فروشگاه اینترنتی مکس بکس

ساندویچ پانل سقفی said...



ساندویچ پانل دیواری

developer said...

تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی
تیزر تبلیغاتی

شرکت سئو در تبریز said...

viraseo

شرکت طراحی سایت در تبریز

چگونه در سرچ گوگل قراربگیریم

سئو چیست

فروش ساندویچ پانل در ارومیه said...

انواع ساندویچ پانل پلی استایرن
خرید پروفیل زد با بهترین قیمت
نحوه خرید پروفیل در تبریز
قیمت پروفیل زد چقدر است
ساندویچ پانل در تبریز
ساندویچ پانل در میانه
پروفیل Z

لباس ترک بچگانه said...

راهکار ست کردن لباس کودک
آموختن ست کردن لباس به کودک
بهترین تیپ دختر بچه 1 ساله
اصول ست کردن لباس زنانه
ترفتد خوشتیپ شدن کودک دلبندتان
ترکیب رنگ لباس بچگانه
مدل ترکیبی لباس بچگانه
لباس اسپرت بچگانه

حمام التراسونیک چیست said...


حمام التراسونیک

ehsan7n said...

قیمت ساندویچ پانل


التراسونیک بکر

دستگاه التراسونیک چیست؟

راهنمای خرید لباس کودک

ehsan7n said...


قیمت آپارتمان در تبریز


حمام التراسونیک

ehsan7n said...

راهنمای خرید لباس بچه گانه

طراحی سایت در تبریز