McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

How to update 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. Click on the image that is currently on the page.
  3. Click the Image Icon from the Contribute toolbar. A dropdown list will appear.
  4. Insert Image drop downFrom the dropdown, select either Images on My Computer or Images on 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 on Website.
  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. Styles drop down with image box stylesIf 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.