Information Resources & Technology (IRT)–

Add and Edit Images

Note: Images, tables, text and combinations of all 3, should fit within the horizontal space available in each column. Wide images, wide tables, and longcontinuoustextwithnobreaks, can cause the central content to be pushed out into the background area.

Here are the maximum widths for each column size:

Watch Demo

Step 1: Insert an image From Website

  1. Find and Edit a page.
  2. Place your cursor where you want the image to go.
  3. Click the Insert Image button (left). Select the item "From Website..."
  4. Use the resulting dialog box to browse to the image file wherver it is found on your site. Images are usually located in a folder called "images"
  5. Find the images folder at the top level of your site. Click "Open."
  6. Find and select "arches.jpg" or any other image you find.
  7. Click the OK button to insert the graphic into your page.
Watch Demo

Step 2: Set alignment, border and description

The image is placed at the insertion point. To flow the text around the image select "Image Properties..." in the same menu to get Image Properties dialog box.

  1. Change Alignment to Right
  2. Set the Border to 0
  3. Type in a Description (ALT text), which can be a description of the image if an illustration, but should be a description of the destination if the image will be a link.

Your image is now aligned right and the text flows around it to the left.

Watch Demo

Step 3: Insert an image From My Computer

Before you begin, you must Edit a page.

  1. sample image
    You will need to have a sample image on your computer. Here's one you can download now. In your browser, right-click (Ctrl-click on Mac) on the small bird image and find the command closest to "Download Image" or "Save Image to Disk"
  2. In Contribute, place your cursor where you want to insert the image and then click the Insert Image button (below). Select the submenu "From My Computer..."
  3. Use the resulting dialog box (right) to browse to the image file on your own computer, wherever you saved it. Select it and click Select.
  4. The image is now placed on your page in the flow of text.
  5. Use the Image Properties... command to set the alignment, border and ALT text, as in Step 2, above.

When you Publish the page in the next step, the image will be uploaded from your computer and placed inside a folder called "images."

image buttonsTry On Your Own: Image Editing Buttons

In addition to the Image Properties controls, Contribute has several buttons for quickly editing the content of an image you've selected (above, right). These are, in order: Scale, Rotate Left, Rotate Right, Crop, Sharpen, Lightness/Contrast. Experiment with them to see how they work. Contribute creates a copy of any image edited with these tools, so your original is not changed.

Step 4: Publish and view in browser

You will need to click Publish, then view your page in your Web browser to see the effects of your experiments.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: