HOW to work with images in CASCADE?
There are many ways to edit and work with images on the web. Cascade uses many clever tools to make placing images on a web page, post, or event easier for content creators. The base understanding of working with images is covered in the initial Cascade training.
However, this resource enhances this training with the latest solutions for working with images in Cascade. For example, this Purdue Extension Professional Development video addresses working with image-based issues. This includes AGCOMM Cascade web developer tips to overcome these issues. Check it out!
block options
The WYSWIG editor contains many essentials to working with content, including images. The addition of Cascade Image Blocks makes adding images even easier. Visit the Block Guide for examples of each image block type.
cascade image editor
Cascade provides a very basic image editor. Video examples of this tool are covered in the initial Cascade training.
FAQ
Q: Where can I learn more about images to include image tools, resources, file size consideration, compression, and other topics?
A: The web team partnered with Extension to provide this video training.
Q: Where can I get a list of image resolutions?
A: Cascade page, news, and event asset forms contain useful notes on images sizes. However, this FAQ provide some broad understanding of image dimensions:
| Content Type | Width (in pixels) | Ratio | Height (in pixels) |
|---|---|---|---|
| Page Body | 1100px | r | no limit |
| Page Carousel Banner | 1200px | r | 800px (PhotoShelter) |
| Page Carousel Banner (m) | 600px | r | 400px (PhotoShelter) |
| Page Simple Banner | 1200px | r | 800px (PhotoShelter) |
| Top Stories (feature) | 1200x800px or less | r | ratio 4:3 |
| Top Stories (scroll-in) | 500px | s | 500px |
| Featured Story Single Column Double Column |
|
s |
500px 900px |
| Featured Story (m) | 300px | s | 300px |
| Social Media | 1200px | r | 800px (PhotoShelter) |
Note: (m) = mobile image; (r) = rectangle; (s) = square
Q: Where can I get professional images?
A: The AGCOMM Photo Repository PhotoShelter (Libris) has professional images. Request an account via an AGCOMM request.
Q: How do I use the WYSWYG block editor to place an image with and without a caption?
A: Follow these steps:
Add an image with a caption:
- Select the Insert/edit image button on the WYSIWYG toolbar. Choose your image and add the Image Description (alt/text), etc.
- Select this window's Advanced tab, check the “Use Figure/Caption” checkbox, and click OK.
- This will add a caption field below your image. Highlight and change the image caption as needed.
- Finally, select the Paragraph button on the WYSIWYG toolbar to float your image left, right, or center.
Add an image with no caption:
- Select the Insert/edit image button on the WYSIWYG toolbar. Choose your image and add the Image Description (alt/text).
- From the WYSIWYG editor, choose the Formats menu button from the toolbar, then select Custom, and pick one of the float options here. For example, left, right, or center.
Q: Do you recommend any free tools for image editing?
A: Yes. We keep a list of photo and graphic resources on the home page of this guide.
Q: How do I replace an image in Cascade?
A: Follow these steps.
Q: How can I quickly see if my page is performing and loading poorly for content consumers?
A: Use Google's PageSpeed Insights tool to get a specific page report. Also, Siteimprove offers Quality Assurance reports that will help you identify and locate large image files and other web content issues.
Q: How do I locate large images on my site(s)?
A: Siteimprove makes it easy to locate large images uploaded to Cascade via this useful report. Use this report to see if you have any images that can be resized and replaced by visiting our helpful working with images guide and help reduce page load speeds and Purdue IT storage requirements by replacing these large images.