Division of Student Affairs

The Online Editor Tool: Edit: MainContent

Uploading Pictures

Photos are an integral part of the Student Affairs website. In addition to serving as useful illustrations, photos also make a page more readable and appealing for the user.

Before you use the Online Editor Tool (OET), you'll want to review our photo guidelines to make sure the photos you upload are appropriate for the site. We generally use smaller photos that fit within the framework of our template. If you visit some pages within the Student Affairs site, you will get a sense of appropriate use and sizes.

You also want to make sure your photo has been properly compressed for the Web. Most photos that appear in the main content area of our web pages are about 180-200 pixels wide. For help on re-sizing your photos prior to uploading, please see the section on "Resizing and Compressing Your Photos using the Microsoft Office Picture Manager."

Now that your photo is resized and ready for upload, you'll need to remember where you stored the photo on your hard drive or network drive. You can now use the OET to upload your photo to your website and attach it to a web page by following the instructions below:

1. Login to the Editing Tool
2. Under "Editing Tools," choose "Upload: Picture"
3. On the new page that appears, you will see an option for "Upload:" in the middle of the page. Click on the "Select" button that appears in light gray. Navigate to the drive/folder where your photo is stored and click "Open." Your filename will now appear next to the Select button.
4. Our OET allows you to rename the file if needed. Under "File Name:" enter a brief, descriptive name for the file, but don't include the extension name such as .jpg or .gif. Make sure it's a unique name that isn't used elsewhere on your site, or you might accidentally overwrite another picture by that name.
5. Next to Picture Format, please use the default option "Don't Change." This assumes that you have already saved your file with the correct format.
6. Next to Picture Width, please use the default option "Do Not Resize."
7. Click Upload Picture to complete this task.

Adding Your Uploaded Picture to a Page on Your Site

Now that you followed the instructions above, you're ready to add your photo to a web page. Make sure your web page already has the text you want to use before you add the photo. You will get better results.

Using Internet Explorer, locate the page on your site where you want to add your photo. With the page in front of you, follow these instructions:

1. Go back to Editing Tools on the left-hand side of your web page. Click on "Edit: Main Content."
2. With your mouse, click at the beginning of a paragraph anywhere on the page. This insertion point is where your picture is going to appear.
3. In the second row of tools, select the Image Manager tool. (It's the icon that looks like a sun over a mountain.) If you followed the instructions above for "Using the Upload Picture Tool," your filename will automatically appear in the left-hand side of your window.
4. Click on the image filename. Notice that the filename appears in the Image URL: address window and the picture you selected appears in the right-hand window. You will not be permitted to browse to another location, so make sure you followed the instructions for "Using the Upload Picture Tool" above.
5. Click Insert. Notice that your picture now appears on the page and is aligned left in your window.

There are a few more small tweaks you'll need to do before you are finished.

1. Right-click on the photo in the editor window and then click on "Properties." A dialox box will appear.
2. Next to the box for "Alt Text," type a two- or three-word description of the photo. This helps our visually-impaired users and appears whenever you mouse-over an image on the finished page.

If you want the image to appear on the right or left of your text:

Note: The following directions work best in Microsoft Internet Explorer.

1. Find the "Apply CSS" drop-down menu in the Online Content Editor window.
2. Choose "Photo Float Right" or "Photo Float Left" and then scroll down and save the page. Your photo should now appear to the left or right of your text as desired.

Please note: If the settings above still don't offer enough buffer between your photo and your text on the page, you can use the "Set Image Properties" menu by right-clicking the photo. From there, you can increase or decrease the margin on your alignment settings. Keep in mind, our goal is to maintain a level of consistency across our sites, so please visit additional web pages for ideas on photo alignment/spacing.