Banner Images

Each webpage can have a single, distinct image that is displayed as the main banner image across the top of the page. These images scale appropriately depending on device size, so small-screened phones only load a smaller, lower-resolution photo, whereas large monitors can load a full-size, high-resolution image.

The only requirement is that these images must be placed in a folder with the path "img/hi-res". For example:

• /admissions/img/hi-res/bigphoto1.jpg
• /ccpa/graduate/img/hi-res/programs/bigphoto3.jpg

Photo Selection

Good Banner Images will meet the following requirements:

• Landscape - they will be landscape (at least 16:9, preferably 3:1). portrait photos will not render well, please don't use them.
• Center Focused - they will have the main focus near the center. As screen sizes change, the image will position itself centered, so if your main focus is too close to a corner, it may get sut off at different resolutions.
• Engaging - they will be photos of action or interest to engage the viewer.

It can be difficult to find engaging high-quality, center-focused, landscape photos. This is why we recommend you take advantage of the random banner image.

Random Banner Image

Instead of having a single, distinct image for each page in your site, you may select a random image from a folder. To do this, call the file “random.jpg” and place it within the “img/hi-res” folder. This will deliver a random image from the same directory the “random.jpg” is called from. For example:

• /admissions/img/hi-res/random.jpg - displays a random photo from the “/admissions/img/hi-res” folder
• /grad-school/img/hi-res/programs/random.jpg - displays a random photo from the “/grad-school/img/hi-res/programs” folder

This is an excellent way to replace the old slideshows that were often found on landing pages. This webpage uses this technique; simply refresh the page and the banner image will change.