Images

To insert an image:

1. Click a the page you wish to edit and then click Edit on the top bar on the page.
2. Click on the area of the page where you want to insert the image.
3. Click on the Insert/edit image icon () located in the toolbar.
4. Click on the Choose File to select the image.
5. Select the image file from Cascade's internal search, then click Choose.
6. Click Ok. Your image should now be on your page.
7. Click the ellipses next to the Preview Draft and then click Submit to save the changes.

Image Tip #1: To add an image to your web page, the image must be available in your folder structure within Cascade.  If you have not uploaded the image file into Cascade yet, please see the File (Image, PDF, etc.) section on the Create page for instructions.

Image Tip #2: To insert the image, you must be editing a page.  If you are unsure of how to do this, please close this tab and choose the Edit Pages tab.

To upload a file:

1. Click on Add Content.
2. Look for menu option Image or PDF. Some sites may have those options available after choosing Page - look for sub menu PDF or DOC.
3. You do not need to enter a File Name as the file will retain the name it had on your computer.
4. In the Placement Folder field, specify the folder you want to upload the file to.
5. Click the Drop file(s) here or choose some from your computer  to select the file(s) you wish to upload.
6. Click the ellipses next to the Preview Draft and click Submit to upload. 
7. Edit the page you wish to add the image or link to the uploaded file. View "Edit" and select Image for more information.
8. Repeat step 5 for any additional files to be uploaded

Uploading Tip: Select the folder in your Cascade site that you wish to upload your file to before completing the following steps.

1. Navigate to the PDF or image that you need to update within Cascade.  
2. Click on Edit.  The following screen should appear:
3. Click on Drop a file here or choose one from your computer to update to the new version of the file from your computer.  Click on the Open button.
4. When you return to the Cascade screen, click the ellipsis beside Preview Draft button and then the Submit button and the file will be updated.

Resize an Image Outside of Cascade (best practice)

Recommended programs to edit your images before uploading them into Cascade:

• For Windows: Microsoft Office Picture Manager or Paint
• For MAC: Preview

1. Click on the uploaded image you want to resize.
2. Click Edit.
3. Change either the width or height to the desired size. You can find these boxes to the right of the edit toolbar and are labeled W for width and H for height.  
4. Click on the lock icon in between the width and height box to have the the proportions maintained.  Once you have entered your desired height and width, click the checkmark.
5. Click the ellipsis beside Preview Draft to Submit your changes.

1. Begin by adding the image to the page you wish to float (See "Image" for instructions). 
2. Select the image and click Format - Custom - image-left (or image-right, image-center)
3. Click the ellipses next to the Preview Draft and then click Submit.  Your image should now be aligned.

Wrapping text around an image is simple.  Using the image class as demonstrated in "Float an Image", the text will automatically wrap around the image.  

 If you would like to have several images beside a long section of paragraph, you will need to use a list and float the list to the left or right side.  A sample code is below:

<p>

<ul style="float: right; display: block;">
<li><img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" /></li>
<li> <img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" /></li>
<li><img class="image-right" alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" /></li>
</ul>

...</p>

You can place captions and photo credits on top of your image; however please note that captions are unavailable for images with a class of "image-center".  Try to limit your caption to around 5 words or two lines or else it winds up covering too much of the picture.  Also, when using these captions, a big paragraph will not wrap around the captioned image unless the image is placed at the top of the paragraph.

1. Once you have clicked on alignment you want, click on the Source Code in the edit toolbar.
2. Make sure your img class is set up as follows:
   <div class="image-right">
<img alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" />
3. Add the following code and edit the bold parts:
<div class="caption-wrapper">
<p class="credit">Photo taken by: John Smith</p>
<p class="photodescription">Try not to write more than a two line description depending on the size. Or it will end up covering too much of the photo like this</p>
</div>
</div>
4. =Your code should now look something like this:
<div class="image-right">
<img alt="what-is-the-image-of" src="https://www.uwo.ca/img/academics/academics-dept.png" width="200px" />
<div class="caption-wrapper">
<p class="credit">Photo taken by: John Smith</p>
<p class="photodescription">Try not to write more than a two line description depending on the size. Or it will end up covering too much of the photo like this</p>
</div>
</div>
5. Click the ellipses next to the Preview Draft and then click Submit