Category: Snippets

Card Snippet

This snippet creates a single card with text over an image or colored background that links to another page or website. The slide out button can be customized. The spacing around each card is controlled in the Boxed Sections snippet that the Card is inserted into.

Example of two rows of three cards each with space between each card.

Example of three cards in a boxed section with no gutter spacing.

Card Snippet

This snippet must always be inserted into a column of a Boxed Sections snippetYou can create multiple rows of cards by adding additional rows to the Boxed Sections snippet.

  1. Enter the desired text that will be displayed on the card.
  2. Select the text you entered and insert a link to another CMS page or external URL.
  3. If including an image in the background, crop the Card type with the Image Editor and insert the largest size card that was cropped.
  4. If not including an image, change the selection to the desired background color. When using this snippet in an asset you must type in the code for the desired color:
    1. For Gold enter “gold” without quotation marks.
    2. For “Black” enter “black” without quotation marks.
    3. For “Dark Gray” enter “medium-gray” without quotation marks.
  5. Change the default button text if alternate wording is desired.

You should add two, three, or four Card snippets in a row.


Touts Snippet

This snippet creates a row of solid or hollow colored circles for statistic touting. The number or ranking part of the statistic goes into the shape and the remaining text appears beneath. The circles could have background images instead of solid color. The font colors are predetermined and cannot be changed.

Example of solid touts with an image background.

Example of hollow gold touts.

Tout snippet.

This snippet should always be placed in a Row w/ Background snippet.

  1. In the Value field for shape, select Solid or Hollow. When using in an asset you must type “solid” or “hollow” without quotation marks.
  2. In the Value field for color, select the desired color. When using in an asset you must type the correct code:
    1. For Gold enter “yellow” without quotation marks.
    2. For Black enter “black” without quotation marks.
    3. For Blue enter “blue” without quotation marks.
    4. For Burgundy enter “burgundy” without quotation marks.
    5. For Gray enter “gray” without quotation marks.
    6. For Green enter “green” without quotation marks.
    7. For Light Green enter “light-green” without quotation marks.
    8. For Orange enter “orange” without quotation marks.
  3. If desired, use the Image Editor to crop the Square type to appear in the shape. Insert the square170 image in the Button Background Image field.
  4. Enter the text that will appear in the shape in the Button Text field.
    1. Add a link to this text if desired to enable a Go button in the shape when hovering.
    2. You can use one of the University-wide assets with a name starting with “Tout #” in this field.
  5. Enter the rest of the text that will appear below the shape in the Content After field.
    1. You can use one of the University-wide assets with a name starting with “Tout Text” in this field.

Specific editorial guidelines for formatting the tout content can be found in the Editorial Guide.

Each row of the snippet will create one tout and all touts will appear on the page in a single row.

If your page has no left navigation and no right sidebar, you can add up to all five touts. If you have either the left navigation or right sidebar, only use up to four touts. If you have both the left navigation and right sidebar, you can use up to three columns. You can also add this snippet to a right sidebar with one tout.


Ranking (Standalone) Snippet

This snippet allows you to add a standalone ranking. This looks best when not full-page width, such as in a boxed section as they are not very wide. The link and second line of italic text are optional.

Example of standalone ranking. Ranking standalone snippet.

  1. Enter the number associated with the ranking in the Purple field.
  2. Enter the text associated with the ranking in the Black field. Add a link to the text in this field if needed.
  3. Enter the ranking source in the Italic field if desired.

Named Testimonial Snippet

This snippet allows you to create a styled testimonial quote.

Named Testimonial example.

Named Testimonial snippet.

  1. Enter the title that will appear above the quote. This field is optional.
  2. Enter the quote text.
  3. If available, use the Image Editor to crop a Square or Personnel image type and insert the 170 size image.
  4. Enter the name of the quoted person. This field is optional.
  5. Enter the title of the quoted person. This field is optional.

Image Gallery Snippet

This snippet will create a grid of thumbnail images that pop up into a scrollable gallery when a thumbnail is selected or a gallery of larger images that the user can scroll through that also pop up into a larger image. For the thumbnail option, only the pop-up image will display the title caption, but they will be displayed on the page for the gallery option.

An example of the thumbnails of an Image Thumbnails with Gallery widget.

An example of a gallery image of an Image Thumbnails with Gallery widget.

An example of the gallery style Image Gallery snippet.Image Gallery snippet.

  1. Using the Image Editor, crop the images.
    1. For the thumbnail option, crop the Square type and either the Banner, Card, or Vertical type. The image must be at least 800 pixels wide in order to have a pop-up.
    2. For the gallery option, crop a Banner, Card, or Vertical image type. The original image must be at least 800 pixels wide in order to have a pop-up.
  2. Select thumbnail or gallery from the dropdown menu to select the gallery display type.
  3. Insert the image in the Image field.
    1. For the thumbnail option, insert the square170 image.
    2. For the gallery option, insert the size that you want displayed on the page.
  4. Enter the title in the Title field to the right of the image, if desired. Linking this text will display a link on the pop-up image for the thumbnail option or both the page image or pop-up image for the gallery option.
  5. Enter the accompanying caption in the Caption field to the right of the title. Linking this text will display a link only on the page image for the gallery option. No links will appear in the pop-up images.

If you are including more than three images, press the Tab key to get more fields.


Image Auto Grid Snippet

This snippet will automatically flow multiple images or other items into a grid layout. The size of the image will be maintained. This is a great option for displaying multiple logos or other images that do not fit into the predefined Image Editor sizes.

Example of several logos in a grid layout.Image Auto Grid snippet.

  1. If your images do not fit within the predetermined Image Editor sizes, upload the jpg or png file into the CMS as you would upload a file. Be sure to publish your images.
  2. Insert an image or other content to be arranged into each cell of the snippet.
  3. If you need additional cells in the snippet, press tab at the end of the last cell.

If you uploaded images directly into the CMS instead of using the Image Editor, you can resize the images within OU Campus. From the Pages List View hover over the image and choose Edit. You can resize, crop, or rotate the image. Save your changes using the button at the bottom of the page and publish. DO NOT use this method to edit Image Editor items!


Pop-up Text Snippet

This snippet allows you to create a link or button on the page that opens a pop-up window displaying text. The pop-up can include headings, links, and images.

pop-up-example

Pop-up text snippet.

  1. Enter the text that will display on the main page in the Link field. If you are linking from a blockquote and need to include an author you must insert the Blockquote snippet.
  2. If you want the link on the page to be a button or a blockquote instead of a plain link, enter the corresponding code in the Link Class field.
    1. “p” (without quotation marks) will create a plain link.
    2. “button” (without quotation marks) will create a gold button that changes to gray on hover.
    3. “button-black” (without quotation marks) will create a black button that lightens on hover.
    4. “button-blank” (without quotation marks) will create an outline button that changes to gold on hover.
    5. “blockquote” (without quotation marks) will create a blockquote. If you need an author in the blockquote, the Blockquote snippet needs to be inserted in the Link field.
  3. The Width and Height determine the size of the pop-up box in pixels.
  4. Enter a unique identifier in the ID field. If you are including multiple pop-ups on the page, they must be different values. The ID can only include lower-case letters, numbers, and hyphens.
  5. Enter the content that will display in the pop-up in the Pop Up field.

This snippet can also be used in the Button Text field of the List Spread Touts snippet to allow the tout to pop up a text window when clicked.

Watch a video to see how to add pop-up text to your page.