Page Banners

Content1/Content2 - Main Content Pages

Under the MainContent wysiwyg (what you see is what you get) look for the field - BannerImage. It looks like:

Inserting a banner image into cascade

If there is already an image, click on the image and then on the tree icon.

If there isn't already an image, go ahead and click on the tree icon. A dialog box should pop up like it is below:

Editing an insert image in cascade.

Steps to make sure page banners are correctly set:

  1. Make sure that the Width/Height is Empty, not 0 or a value like it is above circled in green. 

    • You will need to click the link icon between the two boxes to be able to remove both values without the other box trying to set the value as 0.

  2. Make sure Alternate Text is set. In most cases Page Banner will be sufficient.

  3. The page banner needs to have the 'banner' class set. This is accomplished by clicking on the image, and then selecting 'banner' from the drop down menu that is circled in red on the first image on this page.

After all of these steps are complete your banner is correctly set on the page.


Homepage Banner

For the audience and homepage templates, you change and control the images from the CSS. At the bottom of both of these pages there is a field for "custom css".

Page Style Field

This is the spot to insert css to change these images. Mostly , the CLA webmaster will have these fields set so you do not have to insert any information.  If for some reason there is no text in the field you can copy the code below or you can contact us to request assistance. Please note that within both of the ' ' there is a URL pointing to the image that you want to use for your banner. All that is needed is a new URL pointing to the image that you want to use pasted in between both ' '. 

.hero{background-image:url('https://www.cla.purdue.edu/_template/stockGraphics/banner1.jpg');}

Page Banner Sizes

There are specific dimensions for the various page banner size images used for our websites. Below are the dimensions.

Homepage Features (Hero Image)
840px by 350px

Banner Images (for content1 and content2)
840px by 240px

Purdue University, West Lafayette, IN 47907 (765) 494-4600

© 2017 Purdue University | An equal access/equal opportunity university | Copyright Complaints | Maintained by CLA

If you have trouble accessing this page because of a disability, please contact the College of Liberal Arts Webmaster.

Some content on this site may require the use of a special plug-in or application. Please visit our plug-ins page for links to download these applications.