How To Properly Insert A Huge Image Into A Post

[Kalim]

Because it's become evident that many forum users don't know how to properly use thumbnails for huge images, I decided to write this mini-guide. In order to be considerate to other users, the forum rules state that in-line images in a post should not exceed the limit[1] of 500x500 pixels. Anything larger than this value should be thumbnailed or attached.

One of the nice things about vBulletin is that you can also use HTML[2] tags and by linking to the original image you don't have to drop the quality. This works whether you are using "Quick Reply" or "Advanced" mode.

It is expected of you that you already know how to find the full size image from your image host. For the purpose of this guide, the sample image I'm going to be using is the default background image on the ASUS G73JH. This image is 1920x1080, but the same math applies to any image larger than 500x500.

There are two types of in-line thumbnail images. One with a link to the full size image that opens in a new tab and the other that doesn't include a link. Both are displayed below in the form of a template:

Template with clickable link:

PHP Code:

<a href="Place_URL_Here"><img src="Place_URL_Here" alt="Click to enlarge" width="X" height="Y"></a> 


Template without clickable link:

PHP Code:

<img src="Place_URL_Here" width="X" height="Y"> 


Both templates have three basic components. They are the URL to the actual full size image (Place_URL_Here), the width (X) and height (Y) in pixels. It is extremely important that all quotes and bent brackets are maintained. You should preview your post before submitting.

Because our sample image is 1920x1080 and we want to maintain the original image's aspect ratio, some rough, but very easy, math is required for the width and height, starting with the larger dimension. For our sample image the math is as follows:

1920 / 500  = 3.84
1080 / 3.84 = 281.25

This means to maintain the aspect ratio the image would be scaled to 500x281 (including the round-down). If the image had been 2288x1778, then it would be 500x378 (including round-up). We're always trying to keep the largest of the two dimensions at 500 pixels.

At this point you will need to decide whether you want the image to be clickable or not. Once you have decided and now that we know what to scale the image down to, we need to include this information into the template. To write the tag for our sample 1920x1080 image, you use one of the following examples.

The final HTML tag to include as a clickable link:

PHP Code:

<a href="http://f.imagehost.org/0846/G73-Wallpaper.jpg"><img src="http://f.imagehost.org/0846/G73-Wallpaper.jpg" alt="Click to enlarge" width="500" height="281"></a> 


And, would have the following result:



The final HTML tag to include as a non-clickable link:

PHP Code:

<img src="http://f.imagehost.org/0846/G73-Wallpaper.jpg" width="500" height="281"> 


And, would have the following result:



You should know that the whole process is actually much quicker to do than you might expect. I keep the example templates in a text file for easy copy and paste into a post. I just fill in what I need and it's done. Takes just seconds to do, helps others and makes your posts look better.

Enjoy.

---

[1] I personally think that 500x500 is a bit small and would like to see it increased slightly. However, since the rule does state 500x500, for the purpose of this guide that's the size I will use.

[2] Because of the way this forum currently works, instead of using the HTML bbcode, the PHP bbcode had to be used in order to display the information correctly in preview mode. We'll see if it's different after the post.

[BumbleBoner]

Or use Imageshack or Postimage.org.
Both offer thumbnail services.

With tinypic, its two images uploaded. One actual, one resized to thumbnail. Then the thumbnailed hotlinked to the actual image. Bit of a fuss.

[Kalim]

Those are as bad as attachments, there like fancy postage stamps.

[lackofcheese]

imgur offers large thumbnails and will generate the proper code for a clickable thumbnail. I think it's the best image hosting service at the moment, overall.

[Kalim]

Whether someone uses the guide or selects an appropriate thumbnail from a different service -- as long as the end result is more consideration for others.