TTUHSC Information Technology
HomeInformation TechnologyInformation ServicesInformation Services TrainingOU Campus CMSEditing Content

OU Campus Content Management System

Training Guide

Using WYSIWYG Snippets

Snippets are files that have been designated as reusable content. One example of the use of snippets is a defining a table structure in a file, which can be used over and over. Another includes an image with a caption. The data changes from page-to-page, but the defined structure is reused. Anything that can be created as a template or structure or even bits of text, but may have changes can be created as a snippet.

Snippets are inserted into the page using the WYSIWYG Editor and become a part of the page. Snippet files should be HTML-based and cannot contain any client-side or server-side code. Only code that is acceptable in the WYSIWYG Editor should be included. Snippets can include classes, which can be used with client-side or server-side script. Once the snippet is inserted on a page, the on-page content can be edited without affecting the original snippet. Likewise, editing the original snippet file or snippet does not affect any previously inserted content.

A snippet file can utilize existing CSS, such as a class, to help define style and enforce adherence to the site design.

To use snippets with the site, first the snippet file needs to be created and uploaded. The creation of the snippet file is generally done outside of OU Campus. However, once uploaded, the file can be altered from within OU Campus if necessary. It should be uploaded to the Staging tab, generally to a designated snippets folder.

Once the snippet file is uploaded, it can be identified as a snippet by an administrator.  (See snippet examples.)

Inserting Snippets

If snippets have been set up for the site, the Snippet icon will be available.

  1. Click the Insert Predefined Snippet Content icon.
    Snippet Icon
  2. From the Category drop-down, select a category.
    Snippet Category
  3. Select a snippet to be inserted from the Snippets list.
    Snippets List
  4. The chosen snippet is shown in the Preview window.
    Preview Snippet
  5. Click Insert.

The snippet can now be modified to meet the needs of the page using the standard WYSIWYG toolbar.

Snippets Best Practices

  • Plan and use snippets to help ensure standard formatting of page items such as tables and images.
  • Snippets are not global includes; that is, once placed on a page, editing the source file of the snippet does not update pages.
  • Do not use server-side or client-side code in the snippets.
  • End-users who may want to create their own snippets to provide the source files so that they may be reviewed prior to being uploaded. This also allows consistency in the snippet locations.
  • When creating a snippet that contains an image, use the full path to the production server to be able to preview the image in the Snippet Preview window before inserting it on the page.

(See snippet examples.)