fb pixel

¶¡ÏãÔ°AV

The University of ¶¡ÏãÔ°AV

Images

Please be sure to read about images and accessibility on our Creating Accessible Content page.

All images should be sent to websuggest@uwinnipeg.ca for formatting and uploading. Please ensure you have permission to use the image. Information on citing your images can be found on the .

Adding an image to a webpage

Once the image has been uploaded, it can be added to a webpage. 

  1. Browse to the page you want to add the image to.
  2. Click on the “Edit” tab.
  3. Put the cursor where you want the image to appear and then click on the "Add Image" icon.

    Image insert icon 

  4. Click on “Choose File”

    popup showing "choose file"

  5. Choose your file. If you have recently uploaded it, it may appear under the "Recent" tab. Otherwise, select “Browse" and locate the image in your website folders or by searching for the file by name.

    Popup for browsing to file

  6. Select “Choose” once you have found your image.
  7. This window will open again

    Popup box - with image desription Wesley Hall

  8. Be very sure to include the “Image Description.” This field is used by screen readers to describe the image to people with visual disabilities. It should briefly describe the image.
  9. Click on “OK”

Note: If you wish to adjust the dimensions of the image, only adjust the width in the editor. The height will be automatically adjusted. Do not uncheck “Constrain Proportions."

After you have inserted the image, view your page as the image may not necessarily appear the same as it does in the editor.

How-To Video

Adding a banner or slideshow image

Once the image has been uploaded, you can create a banner for your webpage.

For a banner image

  1. Browse to the page you want to add the image to.
  2. Click on the “Edit” tab.
  3. In the Cascade editor, locate the "Slideshow Images" tab and click on it to expand the field.
  4. Click on “Choose File." If you have recently uploaded the image, it may appear under the "Recent" tab. Otherwise, select “Browse" and locate the image in your website folders or by searching for the file by name.
  5. Select “Choose” once you have found your image.
  6. Be very sure to include the “Alt Text – Image Description.” This field is used by screen readers to describe the image to people with visual disabilities. It should briefly describe the image.
  7. If you wish to add a caption or link the image/slide to another page, fill out these fields, too.
  8. Click the three dots in the top-right corner of the Cascade editor and then “Submit" your changes.

For a slideshow image(s)

  1. Follow steps 1–7 above, but once complete, click on the green "+" to the right of the "Slideshow Images" header.
  2. Repeat steps 1–7 above for each additional image you wish to add to your slideshow.
  3. Once you have added all slideshow images, ensure the "Slideshow" radio button – located above the "Slideshow Images" header – is in the "On" position.
  4. Click the three dots in the top-right corner of the Cascade editor and then “Submit" your changes.
Adding an image to a three-panel slider

Once the image has been uploaded, you can create or add to a three-panel for your webpage.

  1. Browse to the page you want to add the image to.
  2. Click on the “Edit” tab.
  3. In the Cascade editor, locate the "3 Panel Slider" tab and click on it to expand the field.
  4. Including text in the "Title" field is optional. If left blank, the default text – "Features" – will appear atop the three-panel slider.
  5. Next, locate the slide you wish to edit. For a new three-panel slider, you may wish to start with the first slide. The slide number can be seen to the right of the "Slide" header. (eg. 1/3, 2/3, 3/3)
  6. Once you've located the correct slide, click “Choose File." If you have recently uploaded the image, it may appear under the "Recent" tab. Otherwise, select “Browse" and locate the image in your website folders or by searching for the file by name.
  7. Select “Choose” once you have found your image.
  8. Give your slide a "Title." This text will appear below the image in the three-panel slider.
  9. Adding a "Description" to your slide can provide the user additional informaiton, though this field is optional. Try to limit any "Description" text to 25 words.
  10. Be very sure to include the “Alt Text – Image Description.” This field is used by screen readers to describe the image to people with visual disabilities. It should briefly describe the image.
  11. In almost every instance, a "Slide" will require a link to other content.
    • If the link will direct users away from your website, paste the URL into the "External Link" field.
    • If the page is within your website, click "Choose Page" under "Page Link" and browse your site for the desired page.
  12. Repeat the above steps for each slide you wish to edit.
  13. Once all desired changes are made, click the three dots in the top-right corner of the Cascade editor and then “Submit" your changes.