Website Style Guide - Banner Images

Banner images are included on all webpages. These can be edited through OU Campus. 

Banner Image Information

Guidelines in selecting photos for carousels

  • Images selected should be actual photos rather than artwork such as logos or illustrations or posters. IMAGES SHOULD NOT INCLUDE LOGOS OR ADDED TEXT.
  • Except in special circumstances, people in photographs must have an MTSU connection—students, alumni, faculty, staff, off-campus performer or speaker, notable guest, etc. If using identifiable student(s) to represent an academic program, said student(s) should be or have been enrolled in featured program.
  • Photographs must be horizontal, high definition, and of good enough quality to enlarge satisfactorily.
  • Limit the number of photos in a banner to no more than 4-5.
  • Words and art on t-shirts, jackets, and caps and in visible signage must present MTSU in a positive way; except when showing athletic events and competitions, logos, etc. from other universities and college will not be visible.
  • Be sure that nothing in the background shows out-of-date equipment and the like and that the campus and buildings look neat and maintained.
  • Don’t select images that portray any individual/group in a subservient or less positive way than another. If in doubt, show to others and ask what the photo “says” to them.
  • Strive for honest appropriate portrayal of diversity.

Guidelines regarding captions

  • Captions contain a verb (preferably present tense and denoting action).
  • Captions impart information or awareness about the program/department, often adding information not elsewhere on the page and/or highlighting something.
  • Captions begin with a capital letter; any proper nouns within the caption are capitalized; there is no punctuation at the end of the caption.
  • Captions are not cutlines that identify everyone in the photograph or explain in detail an event or circumstance.
  • Try to avoid “dating” the image with the caption.
  • Key words within the caption are written in a larger and bolder font.
  • Captions need to be short and easily read.

Banner Image Updates 

1. Prepare the image for use

Banner image should be sized no smaller than 1920x1080 @ at least 72dpi.

The crop region will be sized to approximately 550px high. DO NOT CROP THE PHOTO TO THIS HEIGHT! The template will automatically size and crop the image to include the photo information in the center. This cropped area can be adjusted to the top or bottom of the image by using the instructions below.

*Click images to make samples larger.

2. Access the banner image asset

  1. Log into OU Campus
  2. Hover over "Content" and then click "Assets". (This will bring up a list of all assets - those you have been given to access to edit will be displayed in blue)
  3. Click the name of the asset you would like to edit.
  4. Click the "Lightbulb" button to the left of the large green "Publish" button. (This checks the asset out to you)
  5. Click the "Edit" button.

3. Edit the banner

  1. Images can be removed by clicking the "X". Please note: These cannot be retrieved once deleted.
  2. Images can be added by clicking the "+Add button or dragging an image from the desktop to the Images section.
  3. Description holds the text of the caption.
    1. Use | to change the formatting to Bold (Ex: This is my |Bold| banner text)
    2. Use \n to create a line break (Ex: Line 1 \n Line 2)
  4. Caption holds the styling of the banner. You may use the options below.
    1. Location of the text box:
      1. [left] - postitions the text box on the left side (default)
      2. [right] - postitions the text box on the right side
      3. [textbottom] - postitions the text box on the bottom
    2. Alignment of the actual photo within the banner box:
      1. [postop] - keeps the top of the image in focus (default)
      2. [poscenter] - keeps the center of image in focus
      3. [posbottom] - keeps the bottom of the image in focus
      4. [posthird] - keeps the bottom third of the image in focus
    1. Link creates a button with a link
      1. Format as Button1 Text || Button2 Text

Banner Image Screenshot

4. Save the banner

  1. Click Save
  2. Click Publish
    1. This will republish all pages using this particular banner.