Putting the image on the web

To have an image appear on omidyar.net it has to be located somewhere on the web. You can put it up on a site like http://www.flickr.com/ or you can upload to a file space within one of your groups on omidyar.net. If you want to put it on omidyar.net then save the picture to your hard drive and then go to an omidyar.net group and select the "files" tab and then select "upload". Then click the "Browse" button to locate the photo.

1. Inserting a single picture in a comment/page

The easiest way to have a picture appear in a comment or on a WorkSpace page is to use the image command on its own line right where you want the image to appear.

For example, the following command:

.. image:: http://www.omidyar.net/images/logo.jpg

results in:

Easy enough, right?

2. Managing a picture's appearance

To specify a picture's height, width, alignment, alt text and even make it link somewhere you'll need to use a two-step process. First, you'll insert a placeholder to indicate where on the page you want the picture to show up. Second, you'll create a footnote that explains which picture to display, and how that picture should look and behave

FIRST:

At the location you want the image to appear, insert the following placeholder text exactly as it appears below: |Picture| (you can call your image whatever you want, I use "Picture" for demonstration purposes only. If you want to call it "cutie" then type |cutie| instead).

SECOND:

at the very bottom of the page, create a footnote to tell omidyar.net which picture you want to go in the placeholder you created in the first step. You'll notice that we've created an image command with the placeholder name added to the start: .. |Picture| image:: http://location_of_your_image You must get the spaces, periods, and colons just right or it won't work. Also, the URL you use to tell omidyar.net the location_of_your_image must end in .jpg or .gif. Now you're ready to control how the image looks and behaves by adding image punctuation!

3. Image Punctuation

If you'd like to add "mouseover text" to your picture (the text that pops up when you hover your mouse over the image, simply use the :alt: command along with your image commands.

Additionally, you can link your picture to another page by using the :target: command.

Finally, you can control the size/placement of your picture using :height: (in pixels) and :width: (in pixels) and :scale: (in percentage).

NOTE: Using the "align" attribute with an image in a discussion comment may break the comment box.

Examples of these commands for the Omidyar Network logo (seen in step 1) with mouseover text of "this is the logo", a link to omidyar.net's home page and displaying at 40x80 pixels in size:

.. |logo| image::  http://www.omidyar.net/images/logo.jpg
   :alt: this is the logo
   :target: http://www.omidyar.net/home
   :height: 40
   :width: 80

Here's the result of the above code. Pretty neat, huh?

The most important thing to remember with the above commands is that you need to indent the command so that it is left-hand justified with first vertical line at the front of |logo| (or whatever you call your anchor). Have fun!

4. Troubleshooting Picture Display problems

Most common reasons for the picture not showing up in the simple method:

1. Does your picture's URL end in a .JPG or .GIF? if not, you don't have the correct URL for your picture (and that's why nothing's showing up).
2. Do you have the correct punctuation in the image command? (dot dot space image space colon colon space URL)
3. is the image command on its own line?

For two-part punctuation:

1. Does your anchor name |Picture| match exactly with the anchor name in the footnote at the bottom of the page? Spelling and capitalization counts!
2. Did you copy, exactly, the entire footnote text, including periods and colons? The spaces and ordering of the anchor text count.
3. Is there a space between the :: in the footnote and the beginning of your picture's URL? Spacing counts.