Header Photos-Templates and CMS - Carnegie Mellon University

Header Photos

Every page has the option to add a header photo, such as the photo of The Fence, above. Header photos are optional, and are added on a per-page basis.

Stock Header Photos

A variety of university-related stock header photos are free and available for use on your CMS site. Please visit the Stock Header Photos page to download a photo (must login with Andrew ID).

Use Your Own Header Photos

You may use your own header photos to customize your site with a unique look and feel. Header photos should be in JPG, PNG, or GIF (animated GIFs are acceptable) format. They must be exactly 748 pixels wide at a web resolution of 72 dpi. The height of the header photo is open.

Adding a Header Photo to a Page

  1. Select the page in the folder structure on the left, then click on the Edit tab.
  2. In the Page Options section, click the browse icon as shown in the example below.

    Add Header Photo
  3. A pop-up window will appear; how you proceed depends on whether the image is available in the CMS or not.

    Image Has Previously Been Uploaded to the CMS

    If the image has already been uploaded to the CMS, browse for the image using the folder structure in the pop-up window as shown below. One you have found and selected the image, click on the Confirm button.

    Browse for header image

    Image Has Not Yet Been Uploaded to the CMS

    If the image has not yet been uploaded to the CMS, follow these steps:
    • in the pop-up window, select the folder into which you'd like to upload the image to (such as an images folder);
    • click on the Upload link near the top and browse for the image on your computer; once selected, upload it and then click on the Confirm button.

      Upload header photo
    The image will be added to the page and will be available for use elsewhere on your site.

Adding Multiple Header Photos

You can select multiple photos for the header that will randomly display each time the page is loaded.

  • Add (green plus sign) - Adds another header photo; to select the photo, click on the browse icon after clicking the plus sign.
  • Delete (red minus sign) - Deletes the header photo.

Multiple Header Photos