Adding Images
Organization
All images should be kept in the "images" folder under "assets." If you upload an image using the Asset Factory (click the red + button in the upper left corner of your Cascade screen), it will automatically place it in the images folder. This helps current and future content editors know exactly where images are located if they need to be replaced.
File naming
Many sites have a large "images" folder full of images with confusing or illegible names. To make it easy to identify which pages your images belong to and what the subject matter is, begin their file names with the name of the page or its folder, then a brief descriptor of the photo's subject. For example, a photo of Eliot Hall on the New Student Orientation page could be named "new-student-orientation-eliot-hall."
Some things to remember when naming an image:
- words should only be separated by hyphens
- no special characters, spaces, underscores, apostrophes, dates (year), or version numbers
Important: If you rename or move an image, Cascade removes it from the live server. You must publish the image and the page it's being displayed on to assure that there won't be a blank gap where it once was.
Alt text
Image descriptions, or alt text, is required for all images on the Reed website. Alt text conveys the meaning of an image to a visually impaired user, making it crucial for website accessibility. For instructions on adding alt text to images in Cascade, see our accessibility guide.
File size
Resize image files to under 500 kilabytes. While the ideal file size depends on the image's purpose—we're seeking a balance between visual quality and fast load times—large files slow down websites and negatively impact user experience and search engine ranking.
Editing Images
Resizing
To resize an image:- Select the image in the assets folder, and click "edit" (either by right-clicking the file name or clicking on the "edit" icon in the upper right corner).
- Change the width to the correct size for the component you're using (you'll notice that the height changes proportionately).
- Click the check to the right of the dimensions fields to submit the change.
- Click "Publish" to publish the replacement image to the live site.
- Next, click the "More" icon then click "Relationships." This will show you the pages where the image appears. You will need to select the checkboxes or click "Publish All" to publish the new photo on the live site.
Below is a video tutorial showing the steps of resizing an image in Cascade:
Replacing Images
To replace an image file:
- Locate the image that you want to replace in the assets folder.
- Click "edit" by either right-clicking on the image name or clicking the edit icon in the upper right corner.
- At the top of the edit screen, drop the replacement image in the blank space or click "choose" to upload the file.
- Click "Preview Draft." The next screen shows you a preview of the file. If the file looks okay, click "Submit."
- Click "Publish" to publish the replacement image to the live site.
- Next, click the "More" icon then click "Relationships." This will show you the pages where the image appears. You will need to select the checkboxes or click "Publish All" to publish the new photo on the live site.