This is an update to my New Forum Tips post. It's specifically oriented to uploading images, since this seems to be the thing most new (and a few seasoned) users have trouble with. Hopefully, it will be easier to find, too.
When posting an image, there are basically two ways to go:
- Host it on a third party image hosting site such as imgur.com, or
- Upload it to the AEVA server, by dragging and dropping it into your post.
For uploading images to the AEVA server, see the post after next.
Third Party Image Hosting
It's up to you to choose your hosting service, register with them, and get your images uploaded there.
Here is the number one thing to keep in mind when attempting to link to an image not stored on the AEVA server:
You have to link to an image, not a web page.
You might think that a page like this example one is practically just one image. Maybe to you, but to the forum software, it's completely different. It's a HyperText Markup Language (HTML) text file, with a tag buried in it somewhere that has a link to the actual image. Notice in the screenshot below that besides the image, there are various bars, a link to Facebook, often there are advertisements, etc. If you are in a screaming hurry and don't want to do the below, use URL tags instead of IMG tags around the URL to the whole web page. Readers will have to click on the link, but then they'll actually see the image (along with banners and advertisements etc), and not just the "broken image" icon.
For your image to embed and display properly, you have to get to the actual image itself. In Firefox and many other browsers, you can use the right mouse button to bring up a "context menu", and select "Copy Image Location".
Now you have the URL to your actual image. To check this (you won't need to do this checking every time), open a new tab and paste the URL.
Notice that the URL ends in .jpg (it could be .jpeg or .png or .gif etc). That tells you it's a real image, though sometimes it's not so easy to tell from the URL. Also, you see just the image, and nothing else (other than a border in this case). Also notice that in my example the URL is fairly compact. I like that about Imgur; the URLs for sites like Google Images can be 8 lines of text!
The Chrome browser doesn't have a "Copy image URL" context menu, but you can do the same thing with the "Open image in new tab" context menu. Go to the new tab by clicking on it; it is usually the next tab after the current one (which is always highlighted).
As a third alternative, specific to Imgur.com only, you can use their provided facility:
This leads to the following; pressing the Copy button highlighted gives you the URL of the image with [img] and [/img] tags already attached. You may wish to edit these tags to image=512 (for example) and /image respectively.
Ok, so we still have the URL to the image in the clipboard, and we know it's a good URL. To link to the image in an AEVA post, merely paste the URL between IMG tags. The easy way to do that is to use the image toolbar button (highlighted in green below) at the top of the edit window (you may need to scroll your screen to see it; note that there are two scrollbars when composing a post).
Notice that the text cursor is between the two img tags, ready to paste the URL. Use Ctrl+v (control-v, or whatever your browser uses for paste). Of course, if you used Imgur's BBCode (Forums) method above, you merely paste the URL, and don't use the image toolbar. It should end up like this:
[img]https://i.imgur.com/IvRi39L.jpg[/img]
I've inserted special tags to show what you what it will look like when composing. When I take these tags out, the image itself will appear:
Often the image will display too large; images from megapixel cameras can be really huge. To fix this, you should really use a resized version of the image, but if you can't, use the other image toolbar button, the one that says "image=" (highlighted in blue). The image= should be followed by a number, being the desired display width of the image, in pixels. For example:
[image=320]https://i.imgur.com/IvRi39L.jpg[/image]
comes out like this:
For advanced posters only: How do I post BBCode examples without them being interpreted? I use empty italics tags inside the [img] tag, like this: [[i][/i]img]https://i.imgur.com/IvRi39L.jpg[/img]. Note the italics tag inside the square brackets of the img tag. You can generate empty italics tags by clicking the I icon at the top of the editor. How did I post that example then? I inserted a blank italics tag inside the italics tag! Usually you won't have to go to all that trouble. If something goes wrong, start again, don't try to match brackets by eye.
[ Edit: Many revisions resulting from excellent suggestions from Weber. Thanks! ]
[ Edit: Reworded the advanced example. ]