View Full Version : How to hotlink/embed/post pictures on forums

05-15-2009, 02:43 AM
I often find people asking how to post pictures on forums, and I've re-written instructions a few times...might as well post them in one place and link to it whenever someone asks.

How to post pictures on a vBulletin forum
Also works on web forums running most other software.

In brief:
1. Upload your photos to a web host like Photobucket, Tinypic, or Picasaweb.
2. Get the image address.
3. Post the image address surrounded by tags.

In detail:

1. First, you need a place to upload and host your pictures. It doesn't really matter where. Or, if you've found a picture on the web that you want to use, skip this step.

Photobucket is very popular, though I've never used it. I'm sure it's free. I'm pretty sure it's relatively easy to use.

tinypic.com is extremely quick and easy to use with no signup and no BS, if your pictures are somewhat anonymous and you don't care to keep track of them.

Flickr.com and Picasaweb.google.com are great but require a little more work and thought, as they aren't designed specifically for use with forums. For flickr you have to get the image address manually and wrap it in IMG tags. For Picasaweb you also have to manually change the image address...more on this later.

You may be able to upload them to the forum, too, but that's a hassle and I never bother.

There's a million other photo and web hosting sites too, and there's general purpose file hosting sites that don't care what kind of files they're hosting. It really doesn't matter.

2 and 3. Once your pictures are hosted somewhere, you have to get their addresses and embed them in your messages...

If you used a site that's made for forums, it will provide stuff you can copy and paste, pre-tagged with IMG tags.

If not, you have to get the address of the image itself (not the address of the page). Right-click on the image.
-- If you're using Internet Explorer you'll have to click Properties, and its address will be there. Highlight it and copy it to the clipboard.
-- If you're using any other browser you can choose something like "Copy image address" or "Copy image location".

Once you have the image address, you have to paste it into your message, surrounded by image tags. The tags look like this: {img} address-of-image.jpg {/img} except they use square brackets [] instead of curly braces {}.

The message editor can do the job for you; instead of pasting the address into the message, click this button in the tools above the message edit box: http://www.allofftopic.com/images/styles/fancygray/editor/insertimage.gif and paste the address into its dialog box. That doesn't do anything special, it just saves you the keystrokes of typing in the img tags.

Avoid putting images on the same line, that makes people have to scroll sideways to see them. Here's an example of images on the same line; you can see the code by quoting this message:
http://www.allofftopic.com/images/styles/fancygray/editor/insertimage.gif http://www.allofftopic.com/images/styles/fancygray/editor/createlink.gif http://www.allofftopic.com/images/styles/fancygray/editor/quote.gif
Here's the same images on separate lines:
I simply pressed the Enter key after each tag just like I would after typing a paragraph.

Try not to post images too small to see well or too large to load quickly / fit on people's screens. I like to post images from 500x500 to 1280x1024, depending on how much detail is necessary.

Notes on using Picasaweb:
If you use Picasaweb you need to manually change the URL to specify a size as a directory name just before the filename in the form of sXXX where s is the letter s and XXX is the resolution, or it won't display for anyone but you.

Sometimes the image address that you find has a resolution specified but it's not one that you can hotlink (for example, 912). Available widths are s144, s288, s576, s1152 (maybe), s320, s640, s800, s1024, s1280.

Here's an example:
s144: http://lh6.ggpht.com/_oNsRR_T1Qx0/R4oYxHHjrPI/AAAAAAAABao/oqFrDBawQV8/s144/RI58.9179952-3-x.jpg
s640: http://lh6.ggpht.com/_oNsRR_T1Qx0/R4oYxHHjrPI/AAAAAAAABao/oqFrDBawQV8/s640/RI58.9179952-3-x.jpg
s912, which might be in the address when you find the image but may not embed/hotlink properly:

You can quote this message to see the image tags and how I did it.

05-16-2009, 01:15 AM
how do you get the youtube vids to show up in the thread

05-16-2009, 01:50 AM
On this forum and on GMFullSize.com you use "yt" tags with the videoID. On Camaro5.com it's the same except you use "u2b" tags.

The videoID is a nonsense string of characters in the URL that you learn to recognize after finding a few. It is after an equal sign and usually followed by an ampersand ("&").

As with the picture post, you can quote this to see how I did it.

VideoID: 1LJHrVXVr-c

05-16-2009, 09:47 AM
Damn it, that was a interesting police chase. They ended it before it was over :(

05-16-2009, 02:37 PM
Yeah, that pissed me off. I saw it on tv, though, and the end was worthless anyway...it just slows, stops, and the driver gives himself up.