Forum Tips & Tricks #1: Working with Images

Images are often an integral part of posting in an internet forum. Working with images however, can be complicated and frustrating. In this article I’m going to cover everything you need to know about adding images to the Gallery, your posts/blog, and your uploaded files; as well as a few suggestions on their construction and presentation.


How do I upload my images?
Before you can post your images in a thread or blog they have to be stored online somewhere. If you’re a site supporting member at HeroScapers you can upload them directly to the Gallery. If you’re not, I strongly suggest you become a member today! There are also a bunch of other websites (e.g. Flickr, ImageShack, MediaFire, Photobucket, etc.) that will allow you to host your images for free.

Uploading to the Gallery at HeroScapers is straightforward and easy. Simply click the Gallery tab and then Upload. Follow the on-screen prompts to select, name, and describe the image file. It’s also a good idea to give a detailed description and a few keywords to help others find similar pictures. You’ll also have to pick a category that best fits your subject.

Tip: You can upload multiple image files at once. However, on this first screen, fill in only the information that applies to all the images. On the next screen you’ll be able to make adjustments to the titles/descriptions for each separate image.

Tip: Want to know if someone comments on your picture? Be sure to check the Receive Email Updates box. That way, if someone posts a comment, you will be notified via your email.

How do I post my image to a thread/blog?
Now that your image is hosted somewhere you need to know its URL. A URL is the location or address on the internet where a file is stored and will always start with “http://”. A sure fire way to get your image’s URL is first visit a page where your image is displayed. You’re going to want the full size image so if you’re in the Gallery, click the image for the full view. Right click on your image and select Properties. You should now be looking at a window like this:


In this example the file’s URL is highlighted. Highlight yours (the whole thing; they can sometimes be quite long) and copy it.

Images can be posted in blogs, threads, comments, etc. There are two ways to post your image. The easiest is probably to just click the Insert Image icon () and paste your URL in the textbox in the prompt window that appears, making sure that you replace what’s already there with your own URL. There must be only one “http://” or it won’t work.

Another method is to use BBCode. It’s a good idea to get familiar with the BBCode, because it allows you a lot of control over how your final posts will look and it’s really easy. A line of BBCode is composed of an opening tag and a closing tag. There’s always one of each. The ending tag always starts with a forward slash. Before you start, click the Go Advanced button and then the Switch Editor Mode icon (). Here’s an example of how to code an image:

Tip: If you’re going to be posting your image in a thread or blog and you don’t want it distorting your post, resize your image to no more that 400 pixels wide before uploading. The image will also take less time to download for those viewing the post.

Making an Image Link
Let’s use BBCode to make a clickable image. A link in BBCode normally looks like this:

We’re going to nest one BBCode tag inside another to create an image link. And while were at it, let’s center our image to make it look nicer:

The result of the above code might look something like this:

Reminder: BBCode tags must be properly nested in order to work.

Adding an Image to an Uploaded File
If you want people to download your maps or look at your files it’s nice to give them some idea of what there getting before they download it. The easiest way to do this is by adding a preview image to your file.

From your file’s download page, under the section Upload Image, click the Browse button. Find your image and then click Add Image. Wasn’t that easy? You can add more images if you like however, keep in mind, only the first image posted shows up in file listings.

Tip: Got a map thread? Don’t double post your map images! Why post your newest map in both the Gallery and the Downloads section? Just post your map image in the Downloads section. Then, use the URL from that uploaded image for the posts in your map thread.

Questions & Answers:

Mr Migraine asked...
How do you make GIF images with transparent backgrounds?
First, your image has to have one solid unique background color. The color can't be used anywhere else in the image or that part of the image will become transparent too. Also, the color has to be perfectly uniform, not differing a degree one way or the other. If your working from a JPG image you're probably going to have to do a lot of cleanup, especially around the edges.

Then, in whatever graphics program you have, you'll need to look for a function called something like Set Background Transparency. Select your current background color and, Voliá, make it transparent.

Both GIFs and PNGs support transparencies as well as a host of file types (that aren't web friendly). PNGs allow for alpha-channel transparency which means you make partially transparent images. An example is my robot avatar: Siggy's got a fuzzy edge around him and a shadow that will look nice on any background.

Reminder: PNGs however cannot be animated whereas GIFs can. PNGs allow for more colors, GIFs only 256.