IMAGES: ADDING NEW IMAGES

Let’s add a photo to the Grants page. To add an image, you should first upload it into the system, then insert it into the page. To do this:

• Make sure your photo is Web-ready. It should meet the following criteria:
  
• It needs to be in either JPEG or GIF format
  
• It needs to be in RGB color mode (basically any image you download from the Web or from a digital camera is in RGB).
  
• Check the image's file size. Make sure your image's dimensions aren't any bigger than they have to be, and the resolution should be 72 pixels per inch because that is the maximum a computer monitor can display).
• Contact David Etchison or John Zhu if you have questions about whether your image is Web-ready.
  
• Navigate to the folder where you want to store your uploaded photo. It is advised that you keep your lab site’s content organized in various folders instead of just throwing everything up there in random places. So let’s say we want to put our Grants page photo in the Grants folder. So click on Grants in the left navigation menu, and this will take you to that section.
• While there, click “add to folder” from the first row of buttons at the top of the page and select “image”.
• In the Edit Image page that comes up, fill in a title. This title will be the name under which the image is shown in the system (instead of the image’s filename). So if we upload a picture called “grants1.jpg”, but we give it a title of “My Grants Photo”, you will see the image listed as “My Grants Photo”.
  
  

• The Description field is optional. Then, in the Image field, click Browse and select the photo you want to upload from your computer. Then click on “save” at the bottom of the page.
• When the photo is done uploading, navigate to the Grants page on which you want to insert the image, and click on "edit".
• While you’re in the editing mode, move your text cursor to the spot in the body text where you want to insert the photo, and click on the “image” button in the green bar.
• In the window that pops up, navigate to the folder where the image is stored (if you put it in the same folder as the page, just click on Current Folder and it’ll take you there). Select the photo. It will appear on the right side of the pop-up window.
  
  

• The ALT-text is what pops up in the small text box when you move your mouse over an image in Internet Explorer. You can leave this blank if you want. Then choose Left, Inline, or Right for the alignment.
• If you pick Left or Right, the text will wrap around the photo. If you pick Inline, the photo will appear on the line of the text where it is inserted. However, doing so will create big gaps in the line spacing and make the page unsightly. Usually, the only time you would want to use Inline is if you want to place a photo between two paragraphs. To do that, insert a blank line between the paragraphs, place the photo on that blank line, and choose Inline for alignment (that's the way all the images in this guide were inserted).
  
  

• Hit OK, and the photo will appear in your Body Text area. Click “save” at the bottom of the page, and you’ll be taken to the page view.
• WORD OF CAUTION: Currently, there is a bug in the system. The text-wrap that occurs when you select Left or Right alignment for the photo appears correctly in a Mozilla browser (Firefox, Netscape, etc.), but not in Internet Explorer (see example below). Take this into consideration when deciding how to place your photos.
  
  

NEXT:  Images: Updating an Existing Image
BACK: Text Editing