By popular request ... clickable thumbnail photos!

[AdeV]

There's a couple of ways to achieve this: One which will make admin happy, and one which will make the baby jesus cry.

To take the second option first:

• Click the "Additional Options" link (which you will see below the window where you type your messages), and a whole bunch of things will appear.
• The bit you're interested in is the "Attach:" box. Click the "choose" button, next to it.
• Hunt around on your computer until you re-locate the image file you wanted to share. Select it, and click Open (I'm assuming you're using Windows here: Linux and Apple may have slightly different buttons and labels; just click whatever seems to be logical - or, failing that, just flail about with the mouse button. Works for me  )
• If you want another image (up to 4 in total), click on the "(more attachments)" link; additional boxes & "Choose..." buttons will appear. Simply click choose against each empty box & select a file, as above.
• Click the "Post" button (you may need to write your text first). Assuming none of your files were too big, or of the wrong type, or endorsed by Obama or Blair (delete according to nationality, apologies if your president/premier/prime minister/benign dictator/autocratic dictator is not mentioned), then congratulations! There's now up to 4 clickable pictures attached to your post. And yes, the baby jesus is now crying.

The second, and better way - because it doesn't gobble up expensive hard-disk space on microcogen's server - requires you to have an account with a photo hosting company. There are lots to choose from - too many, in fact, to attempt to detail each one; but luckily, we don't need to. You can use flickr, photo-bucket, or any number of similar ones. For my examples here, I will be using listerenginegallery.com. It will take a bit longer to explain, I'm afraid, please bear with me.

Firstly, click on this link and look at the page that comes up: http://listerenginegallery.com/main.php?g2_itemId=813

You'll notice a whole bunch of small, square, photos; each of which can be clicked to go to a bigger version. Sounds familiar?

Your first job is to create a "blank" clickable image holder. To do this, click on the photo button (probably 3rd from the left, just above the smileys, looks a bit like a picture in a frame), or just type [­img][­/img]

Using your mouse or keyboard, highlight the img tags (including the square brackets), and click the "URL" button (next the picture button, looks like a globe with a tiny little document in the corner). You should now have this: [­url­][­img][/img][/url]. Stick an "=" sign in, just after the first "Url", like this: [­url=­][­img][/img][/url]

(a quick note: If you get your screen width exactly right, you may spot some hyphens appearing in the example tags, above. That's because I'm using a special character which - on Windows machines at least - doesn't appear unless it's needed. It's handy because it stops the forum software from being clever with the tags, and actually trying to use them. If you copy & paste the examples from this post, you may find they don't work... in which case, just use an arrow key to move slowly along the line: when you press the key & the cursor doesn't move, you found the hidden symbol. Assuming you're moving from left to right, just press the backspace key once to remove it. Now, on with the programme)

OK, here's where it all gets a bit different. Different browsers have differently named links, and sometimes different ways of getting the same result. I'll show you what to do for Internet Explorer 8, and Opera 10. Hopefully, someone with FireFox, Chrome or Safari can chime in and add the description for their way of doing it.

To get the thumnail image address:

Internet Explorer: Right-click on the picture, and choose Properties. A pop-up window will appear. In the middle of that window is a long string starting http:// - this is the address. Use your mouse to highlight the entire string (it may well go over several lines); when you have it all highlighted, right-click on the highlighted bit & click "Copy" from the menu that appears. Like this:



Click Cancel to get rid of the properties window, and return to your post. Paste the image address between the img tags, like this:

[­url=­][­img]http://listerenginegallery.com/main.php?g2_view=core.DownloadItem&g2_itemId=851&g2_serialNumber=2[/img][/url]

Opera: Right-click the picture, and choose "Copy Image Address". Paste inbetween the img tags, as above. If for no other reason, I strongly urge you to try out Opera, just for this feature. And the built-in ad blocking which makes Yahoo mail usable.

[other browsers - please supply info & I will add it here]

Now we make it clickable:

Internet Explorer: Right-click the picture & choose "Copy Shortcut" from the menu. Paste the results just after the "=" in your picture holder.
Opera: Right-click the picture & choose "Copy Link Address" from the menu. Paste the results just after the "=" in your picture holder.
[other browsers - as above]

You should now have this:

[­url=­http://listerenginegallery.com/main.php?g2_itemId=850][­img]http://listerenginegallery.com/main.php?g2_view=core.DownloadItem&g2_itemId=851&g2_serialNumber=2[/img][/url]

(it's probably wrapped over two lines; don't worry about that, just ignore it...)

When you preview, or submit, your post; it ends up like this:



Want to put two pics next to each other? Simply build up two strings like we just did, then delete everything between the [/url] of the first image, and the [­url] of the second image. Then add a space back in so you can see the gap between the two pictures. e.g.:

[­url=­http://listerenginegallery.com/main.php?g2_itemId=850][­img]http://listerenginegallery.com/main.php?g2_view=core.DownloadItem&g2_itemId=851&g2_serialNumber=2[/img][/url] [­url=http://listerenginegallery.com/main.php?g2_itemId=856][­img]http://listerenginegallery.com/main.php?g2_view=core.DownloadItem&g2_itemId=857&g2_serialNumber=2[/img][/url]


becomes



Now, I know that looks really horrid (and frankly Internet Explorer makes it 100 times worse than it needs to be), but the results are really nice; and you can put the pictures in the middle of the text, just where you want them. It's also being nice to people on slow dialup connections, because those thumbnails are really small (less than 7KB for the picture of the trailer). If you want to avoid the word wrap problem, you could use Notepad (or Textpad - which is my favourite text editor) to build the big long strings, then paste them all into your post window in one go.

Now; I use computers all day every day, so I may have glossed over something which I think is really obvious, but isn't if you're not a nerd. Do let me know if anything isn't clear enough, and I'll expand on it.

Hope that helps!

[mike90045]

You missed the part about "When an external image no longer exists, it vanishes from the forum too".

If folks would "downsize" or "De-Res" their pics, a uploaded pic can retain good quality/sharpness, and still be under 100K in size. 

attached is only 62K disk size, yet the text in it is still readable.

[veggie]

I find that if you reduce you picture size to 640X480 (.jpg) before uploading to the forum, it makes a nice icon, and when it's clicked, it expands to a size that's just right for the forum message window. (Not very large in bytes either)

veggie