Adding and Replacing Images

Images can help make your web page more engaging and easier to understand. Use the instructions below to prepare an image, upload it to Cascade CMS, add it to a page, or replace an existing image.

Choose the task you need:

• Prepare an image for the IUP website.
• Upload a new image to Cascade CMS.
• Insert and style an image on a page.
• Replace an image already in Cascade CMS.

Prepare an Image

Before uploading an image, resize it for its intended use on the IUP website.

• Choose the correct dimensions: See Image Sizes for the IUP Website.
• Resize the image: Follow Resizing Photos and Other Images.

Resize images before uploading them to Cascade CMS. Do not try to resize an image by changing its dimensions in the Insert/Edit Image window.

Upload an Image to Cascade CMS

Before you can add an image to a page, the image must be uploaded to Cascade CMS.

1. In Cascade, navigate to your site’s /images/ folder, then open the appropriate subfolder. Click the View Folder arrow to the right of the folder to enter it.
   • Selecting the correct folder before uploading helps ensure that the image is stored in the right location.
2. At the top of Cascade, click + Add Content.
3. Select Upload Images.
4. Check the Placement Folder to make sure it shows the correct /images/ folder or subfolder. If necessary, change the selection.
5. Drag and drop the image into the upload area, or select the image from your computer.
6. Review the file name and edit it if necessary. Do not remove the file extension (for example, .jpg, .png, or .gif). Without a file extension, the image will not appear on the live website.
7. Click Submit to upload the image.

After the image has been uploaded, you can add it to a page, event, or news post using the instructions below.

Insert and Style an Image

Insert an Image

1. Open the page you want to edit in Cascade CMS.
2. Place your cursor at the beginning of the paragraph where you want the image to appear.
3. Click the Insert/edit image icon in the toolbar.
4. In the Insert/Edit Image window, click Choose File.
5. Select the image from the Recent list, browse to its folder, or search by file name.
6. Click Choose.

Add an Image Description

Edit the default Image description to describe the image’s meaningful content. Include text that appears within the image when that text is important to understanding it.

Do not change the image’s dimensions in this window. Resize the image before uploading it.

For guidance, see Alt Text and Images.

Style the Image

If the image is full-width, no additional styling is needed. For smaller images, select the appropriate alignment and width styles in the Insert/Edit Image window. 

1. Select both the Float and the Width by holding Ctrl (Windows) or Command (Mac) while making your selections.
   • Use Float left or Float right to allow text to flow beside the image.
   • Choose the appropriate width: half, third, or quarter.
2. If needed, use the Advanced tab to add horizontal or vertical spacing.
3. Click OK.

Preview and Submit

Preview the page before submitting it. Use Show Edit Preview for a split-screen view or select Preview Draft in the upper-right corner.

Check the image’s size, alignment, spacing, and appearance on the page. If everything looks correct, select Submit → Check Content and Submit. Otherwise, continue editing the page.

Important: Image styles may not appear correct in the editor itself. Always check the preview to see how the image will appear on the published page.

Replace an Existing Image

If you need to update an image that is already used on your website, overwrite the existing image rather than uploading a new file with a different name.

Important: Replacing an image updates it on every published page where that file is used. Before proceeding, confirm that you have located the correct image and that the replacement is appropriately sized.

1. Locate the original image in Cascade CMS. If necessary, use the image’s URL on the published page to identify its folder and file name.
2. Check the image’s relationships to see which pages use it.
3. Prepare the replacement image using the recommended image sizes.
4. Open the existing image for editing and upload the replacement file using the available replacement controls.
5. Do not change the width or height in Cascade’s image-editing screen.
6. Submit the replacement through the workflow.
7. After publication, check the affected pages to confirm that the replacement appears as expected.