FAQs

Assumptions

• Your image has been optimized for the web. That is, it is a .jpg, .gif, or .png file type and is cropped and sized to fit on the screen at 100% magnification. The larger the image and the higher its resolution, the larger the file size and the longer it will take to download and display on a web page. [Some tools for working with images include Photoshop, Imageready, Fireworks, Picasa, and Picnik.]
• The image resides on your computer hard drive, network, or other storage space that is not open to the public.

Upload the image

From the edit mode of a page in your site, set your cursor in the page where you would like the image to appear and click the Insert/edit image button.

Click the icon to the right of the Image URL field to open the file manager and access the site's media assets directory. [This view of the file manager displays only image file types. The default is to display 25 thumbnails per screen, but you can adjust these settings near the top right of the window.]

Click the Upload button. This opens another window. In this new window, click the Browse button. Locate and select the file you want to upload and click the Open button. Finally, click the Upload button. A message appears in the window telling you that the upload was successful. Close the Upload window.

Place the image in the page

With the file successfully uploaded, select the image by clicking its thumbnail. This closes the file manager and takes you back to the Insert/edit image window. Notice that the path to the image fills the Image URL field and that the image appears in the Preview pane. Take a moment to fill in the Image description field with human readable language describing the image. This is so that visitors using screen readers to aurally browse the web or those who turn off images for quicker page downloads can know what the image is about. Click the Insert button.

The default placement of an image is left aligned, with the base of the image lining up with the base of any text next to the insertion point. Unfortunately, the tool for inserting the image doesn't provide a realiable means of positioning the image. However, if you know a bit of html, you can set the image position manually.

The <img> tag

Click the HTML button to view the code behind the page. Locate the code related to the image. It should look something like this:

<img src="/sites/www.pdx.edu.ucomm/files/media_assets/wysiwyg_html.jpg"
 alt="graphic of HTML button" width="26" height="24" />

The src part of the code identifies the file path to the image; alt is the image description; width and height indicate the dimensions of the image in pixels.

Set the cursor near the end of the image code (just before the slash works well) and type

align="left"

add a space and then type

hspace="3"

The first attribute/value pair sets the image alignment. When an image is aligned left, any text next to that image will start at the top of the imge and wrap around the right and bottom of the image. An alternative would be to type align="right" to have the text wrap around the left and bottom of the image.

The second attribute/value pair sets three pixels of white space to both the right and left sides of the image. The "h" stands for "horizontal." An alternative or additional attribute/value pair would be vspace="3" to set three pixels of white space on both the bottom and top of the image. The "v" stands for "vertical." The pixel value in this example is arbitrary. You could set the hspace and or vspace to 10 pixels or 1. The idea is to give a bit of breathing room between the image and any text near the image.

The code should now look like this:

<img src="/sites/www.pdx.edu.ucomm/files/media_assets/wysiwyg_html.jpg"
 alt="graphic of HTML button" width="26" height="24" align="left" hspace="3" />

Click the Update button to refresh the appearance of the edit screen and then save the page.