Tips for adding images to your Notes and Wiki pages
Insert pictures from Flickr
Find the Flickr image you want to insert, click on the "Share" button, select "Grab the HTML/BBCode", select the "Medium 500" option, and copy the text in the text box.
Then paste that text into the Body of your post.
Insert pictures from image files attached to the Wiki/Note/Tool page you are working on.
Step 1 - Click "Choose File" to select your file and then click "Attach"
You'll find the "Choose File" button in "File Attachments" below the place where you type out the Body of your post.
Step 2 - Copy the URL of the image you just uploaded
Step 3 - Add that image URL to an IMG tag in your post
Formatting your image
Step 1 - Correct Width - Make sure the maximum width of your images are 500 pixels wide
Here is an image that is so wide that it's running into the right side bar. Eek!
Step 2 - Add class class class!
Add a class to the image tags to format them.
- class='floatright' The "floatright" class will push the image to the right and let text flow around it. Here's the floatright class being used in an Anchor tag (a link) that wraps our image.
- class='frame' The frame class will add margin and two subtle borders to your image. Below is a picture of the code to do this while it is itself using the frame class.