Public Lab Wiki documentation

Tips for adding images to your Notes and Wiki pages

2 | 34 | | #658

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. Embed code from Flickr

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.

The result.

  • 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.