Site Accessibility Statement
Wilfrid Laurier University Faculty of Science
August 29, 2014
 
 
Canadian Excellence

Photographic Art


Photos from Winter 2003

I have included some pictures here to show how photos (or other documents) can be uploaded into the Documents section of the website, and then displayed in a page within another section of your site.

NOTE: Requires HTML knowledge.

Update March 2005: You can also simply copy images from a web site and paste them into the Body boxes in a section page, but it requires that the image be hosted on another web server.

See the subsection called "Easier Way" for an example of a way to put pictures anywhere in a section.


Step 1: Upload the properly sized images (however big you want but make it reasonable) into the Documents area by creating a new document for each photo and uploading the images. Each of the pictures below is about 387 pixels wide, except for the dog. I've placed the images in a table for easier placing but you don't need to. I could also set the border attribute on the table to be 0 so you can't see the dividing lines between each cell.

Step 2: In order to view the images on a page, you'll need to know the URL of the images, so you'll first have to view an image in the Documents area and copy its URL to the clipboard.

Step 3: In the admin system, find or create a new section/subsection/page that you want the images to appear in.

Step 4: In the Body paragraph, switch to HTML view and use the IMG tag to include images. At this time, the Web Admin system doesn't let me show HTML code very well, so you'll have look at my HTML source to see how it was done. It should look like <IMG SRC="full address of picture" ALT="My Picture">

The ALT tag is used to show the "Tool Tip" that appears when you place your mouse over the image. It should be used to describe the picture for accessibility purposes.

The photos below have been done this way:

Photo of snow in trees. A photo of Sheba.
A photo of my car in the snow. View of the backyard.

Additional Notes:

After completing the page, I noticed that in Internet Explorer my pictures were too wide, and caused a blank paragraph to appear above the "breadcrumbing". To fix this, I chose to reduce the size of the image of the path leading towards the trees (the bottom right image).

If you have to make changes to the image size, just alter the image that sits on your computer. Then edit the DOCUMENT in the Document area of the website and replace the old picture with the new one you just resized. If you don't change its name, you won't have to go back and change the links on the page that has the pictures on it.