For the purposes of this tutorial, I will cover 3 methods of adding images to your post:
- Images hosted by another site, such as Photobucket or Flickr (or any other site, really.)
- Images which you just want appended to the post, and can go at the end of the post.
- Images which are integral to the post, and need to be placed within the post (these is called inline images.)
Off-site images (Photobucket, Flickr, etc.)
We would actually prefer you to use this method when possible. It saves our bandwidth and storage, and image sharing sites do a good job of allowing you to upload and share your pictures.
Pretty much every image hosting site has a link to obtain the URL of the image you want to share. You can also (in most browsers) right-click on the image and choose 'Copy image location' in order to get the URL of the image. Once you have the URL copied to your computers clipboard (or scratched on a piece of paper if you're old-school,) look for the icon in the toolbar where you are editing your post which looks like a little tree:
Click this icon and the following window should pop up:
Paste (or type) the URL of the image in the box next to where it says 'Image URL'. You can add a description if you like and change any settings if you desire (these are optional, but we would like you to keep images to a size less than 500 pixels wide, or it throws off the layout.) When you are done, click the 'Insert' button and your image will be added to the post. This will be 'in-line', meaning that you may continue typing text after the image.
Append images to the end of the post
If images you want to post are not on another site, and you don't need them to be inline, then this method is probably the easiest way of getting them into the post. After your have written your post, scroll down a bit. You should see an area the looks like this:
Click the "Browse" button to select an image from your computer, then click the "Upload" button to upload the image to the server. When you are done with your post, be sure to click the "Save" button at the bottom. Thumbnails will be generated for the image, and clicking the image from the post will bring up the full size image.
In these tutorials, I have been adding inline images to visually show how to perform a task. This is rather easy to do, and it will automatically resize the image so it is less than 500 pixels wide.
In the toolbar of the editor where you are writing your post, find the icon that has a red square, yellow circle, and cyan triangle:
Click this button and the following window will show up:
Click the 'Browse' button and find the image on your computer your want to upload. Once you have selected the image, the window will change to look like this:
This will show a preview of the image you have selected, and let you make some adjustments to it. You can give it a title if you wish, but the important things to do are to select the desired image alignment. It is up to you what you select here. Under 'Size' there is a drop-down box with some image size presets: image_300 and image_500. These will automatically resize the image so that the maximum dimension is either 300 pixels or 500 pixels, respectively. Once you are done, click the 'Insert' button to add the image to the post.
Note that if you need to modify the image settings after you have added it to the post, you can simply click on the image to select it, then click the same button on the toolbar that you used to insert it in the first place.
