OU Campus Content Management System
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.
If snippets have been set up for the site, the Snippet icon will be available.
- Click the Insert Predefined Snippet Content icon.
- From the Category drop-down, select a category.
- Select a snippet to be inserted from the Snippets list.
- The chosen snippet is shown in the Preview window.
- Click Insert.
The snippet can now be modified to meet the needs of the page using the standard WYSIWYG
Snippets Best Practices
- Plan and use snippets to help ensure standard formatting of page items such as tables
- 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.