McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

How to add an image with Contribute?

This tutorial describes how to replace an image on a page with another image using Contribute:

  1. Edit page in Contribute.
  2. Place cursor on line where you want the image to be located. You will have the option to float the text around the image later.
  3. Insert Image drop downClick the Image Icon from the Contribute toolbar. A dropdown list will appear.
  4. From the dropdown, select either Images -> From My Computer or Images -> From Website depending on where the image is located.  If the image is on your local drive, select Images on My Computer.  If the image has already been uploaded to the server, click Images -> From Website.

    (Note: It is not a good idea to select Images -> From Internet. The reason is that this command will not copy that image to your website, but instead it will create a link to the image on the other website on the internet. If you have permission to use an image that you have found on another website, you should copy the image to your local hard drive and then add the images using Images -> From My Computer following the instructions above.)
  5. Browse to the image you want and click Select.
  6. If your administrator set up your connection to require alternate text to be entered when inserting images, the an image desciption dialog box will pop up that will require you to enter alternate text in the Description (ALT Text) field.

    Image description (Alt text) dialog box

    If your administrator did not set up your connection to require alternate text, then right click on the image to bring up the the Image Properties dialog box, and enter the alternate text in the Description (ALT Text) field. Enter meaningful text that describes the image. An example of alternate text that is not meaningful is entering "photo" for a portrait of a person instead of entering the person's name, such as "John Smith". After you enter the text, click Apply and then OK.

    Image Properties dialog box

  7. Contribute will automatically reduce the resolution of the image to web resolution. (There's no need to reduce high resolution images beforehand.)
  8. Contribute will automatically reduce the size of the image to the maximumum allowed that was set by your website adminitrator. This size should be 776 pixels wide by 1200 pixels high. (The width of the content area of McMaster websites is 776 pixels.) If you need to reduce the size further, follow the instructions in the next step.
  9. If you need to resize the image, click on the image and then click on the Resize icon on the toolbar (or right click on the image and select Edit Image -> Resize). Drag the handle (blue box) in the bottom right corner of the image until the image is the size you want it to be. Click <Enter> to resize the image. (If you drag the handles on the right side or the bottom of the image, then the proportions of the image will be distorted.)
  10. If you need to crop the image, click on the image and then click on the crop icon on the toolbar (or right click on the image and select Edit Image -> Crop). Drag any one of the handles (blue boxes) within the image until the image is cropped the way you want it to be. Click <Enter> to crop the image.
  11. If you want the a caption under the image, place your cursor to the left of the image, hold down the <Shift> key and hit the <Enter> key to create a line break, and enter the text for the caption.
  12. Image styles from Styles drop downIf you want to float the text around an image without a caption, click on the image and choose image_box_right, image_box_left or image_box_centre from the style dropdown on the Contribute toolbar.
  13. If you want to float the text around an image with a caption, select both the image and the caption under the image. Choose image_box_right, image_box_left or image_box_centre from the style dropdown list on the Contribute toolbar. Optionally, select the caption and choose caption from the style dropdown list.
  14. Click Publish.  The software will upload the page and the image.  The image will be put in the images folder on the server.