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 standard Cascade image sizes. However, this FAQ provide some broad understanding of image dimensions:
| Content Type | Width (in pixels) | Ratio | Height (in pixels) |
|---|---|---|---|
| Basic Page: | |||
| Page Body | 1100px | multiple | no limit |
| Page Carousel Banner | 2400px 1200px |
r: ratio 3:2 | 1600px 800px |
| Page Carousel Banner (mobile) | 500px | s: ratio 1:1 | 500px |
| Page Simple Banner | 1200px | r: ratio 3:2 | 800px |
| News banner: For best results, set your banner images in your news post to accommodate the following block options. Or use these ratio guidelines with your custom alternative options. Follow the same sizing if you use the manual options within the blocks. | |||
|
Top Stories |
1800px 1200px |
r: ratio 40:21 |
945px 630px |
| Featured Stories (scroll-in) | 1800px 1200px |
r: ratio 40:21 | 945px 630px |
| Featured Story | 1800px 1200px |
r: ratio 40:21 | 945px 630px |
| News Post: For best results, set the "Mobile" image in your news post to accommodate the image sizing requirements in the block options. Furthermore, this "Mobile" image will replace your banner with mobile screen sizes. Or use these ratio guidelines with your custom alternative options. | |||
| Any news article mobile option | 500px | s: ratio 1:1 | 500px |
| News Post for News Listings: For best results, set the "Thumb" image in your news post only if you want an alternative image for your "News-listing" block option. Or use these ratio guidelines with your custom alternative options. | |||
| Thumb image override | 1800px 1200px |
r: ratio 40:21 | 945px 630px |
| For all pages | |||
| Social Media override: | 1200px | r: ratio 4:3 | 630px |
| Headshot image row use | 200px | r: ratio 40:37 | 185px |
| Headshot image column use | 450px | r: ratio 3:4 | 600px |
Note: (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 and free image libraries?
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.
Q: Why are my headshot images displaying as different shapes and sizes?
A: All headshot images should be resized to match the information noted on the block form and listed in the matrix above.
Q: How large should images be when I upload them to Cascade?
A: 1 MB images are what you should upload. This allows pages to load fast for site visitors and helps keep Purdue IT (PIT) storage requirements down.
Note: Siteimprove QA reporting does off a report to help you find large images. You can do this by:
Login to Siteimprove and visit your dashboard by clicking on your corresponding report:
Visit your department/county's Siteimprove QA report dashboard and choose the link that is labeled Pages with images larger than 1MB to see a list. Learn more about Siteimprove reports.
Q: How can I resize images?
A: CoA users have access to Adobe Cloud. CoA and Extension users can also request Marq access via Purdue Marcom. However, Windows Paint and other tools such as Pixlr.com's freemium photo editor, animation, and design tools, and RedKetchup Image Compressor are free web-based alternatives to Adobe tools. Visit the Cascade User Guide's home page's Photo and Graphic Resource drawer for other recommendations.
Q: What news article images are used where across Cascade?
A: Cascade is very flexible and will use the news article images you provide or do not provide when used on-page via these news block choices:
- Featured Story
- Featured Stories
- News Listing
- Top Stories
Please note:
- The banner image is used to populate the various images associated with a news article via the various news blocks and lists.
- If a thumbnail image is used it will replace the banner image in news blocks and lists. Note: A thumbnail image is the same aspect ratio as a banner image. A thumbnail image can be the larger dimension size like a banner image, or smaller. A thumbnail image must also be a rectangle shape and should follow the 40:21 aspect ratio sizing.
- A mobile image would replace the banner image for the story and also in any news blocks and lists when viewed with a mobile device.
This matrix is a helpful way to picture what images display where:
| Banner Image? | Mobile Image? | Thumbnail Image? | Desktop Block | Mobile Block |
|---|---|---|---|---|
| Yes | No | No | Banner Used | Banner Used |
| Yes | Yes | No | Banner Used | Mobile Used |
| Yes | Yes | Yes | Thumbnail Used | Mobile Used |
| No | Yes | No | Generic Used | Mobile Used |
| No | No | Yes | Thumbnail Used | Thumbnail Used |
| No | No | No | Generic Used | Generic Used |
For mobile screens resolutions, the display order is:
- A mobile image would replace the banner image for the story and also in any news blocks and lists when viewed with a mobile device (except for News Listing output).
- If no mobile image is entered, the thumbnail image will show.
- If no thumbnail image is used, the banner image will show.
- If no banner image is used, the current site-wide generic Cascade default image will show.
- Thumbnail image will be visible via news related blocks and lists throughout any Cascade site.
- If no thumbnail image is used, the banner image will display.
- If no banner image is used, the current site-wide generic Cascade default image will show.