Approved Images and Guidelines in Cascade 3.0

Quick Links: | Download Approved Images | Follow Image Dimension Guidelines | Apply Image Best Practices | Review Image Layout Examples |

 This article applies to sites using Cascade 3.0 (old templates).

Download Approved Images

Only use Chico State-approved image sources to avoid copyright issues:

Chico State Flickr

  • Managed by the campus photography team
  • Fewer images, making browsing easier
  • Download the “Medium” size
  • Update the filename after downloading if needed
  • Recommended download size: Medium (800 x 534)

Portfolio (Photo Library)

  • Full photo library
  • Includes high-resolution images
  • Use the filename to locate the image in Cascade
  • Download JPG images resized to 1000px
  • Recommended download size: Small (within 900px)

Follow Image Dimension Guidelines

  • Card image (standard): 900 x 599
  • Card image (alternate): 900 x 450
  • Portrait images: 600 x 900

Apply Image Best Practices

  • Use 600px-width images for person pages
  • Avoid using .png format when possible
  • Use lowercase file names without underscores (for example: file-name.jpg)
  • Resize images down rather than scaling up
  • Avoid acronyms in file names
  • Avoid prominently displayed brand logos
  • Department logos are acceptable
  • Check color contrast for accessibility
  • View how to find image size in Cascade
  • View how to crop an image in Cascade

Site maintainers cannot update homepage banner images. For assistance with this, contact Web Services.

Review Image Layout Examples

Content Tiles (600px width)

Used for smaller, side-by-side visual elements.
Example of content tiles layout showing multiple cards linking to Faculty, Staff, and Student resource pages
 

Card with Secondary Content (800px width)

Used for larger featured content areas with supporting text.
Example of a featured content card with image and supporting text displayed alongside secondary content
 

Image in Secondary Content (600px width)

Used within the page body content alongside text.
Example of an image placed within page content next to text in a secondary content area
 

Full-Width Image (900px width)

Used when secondary content is hidden, and the image spans the page.
Example of a full-width image spanning the page with no secondary content displayed
 

 Still need help? Contact Web Services for further assistance.
  
 Help us improve our Knowledge Base! Click Yes or No below, then let us know what worked — or what didn’t. Your feedback helps us improve our content and provide the best possible support. 

100% helpful - 3 reviews
Print Article