OU Campus Content Management System
Using WYSIWYG Snippets
Snippets are inserted into the page using the WYSIWYG Editor or the Snippets Gadget, 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. Note that
the Snippets Gadget can be used to drop a snippet onto a page via the WYSIWYG Editor.
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.
The origination of the file outside of OU Campus is inconsequential. A user with the
proper upload permissions can upload the file to be used as a snippet. The assignment
of a file to be used as a snippet is available to level 9 and level 10 administrators.
It is recommended that one snippet folder be created where all snippet files are uploaded.
A common location is /_resources/snippets. This folder is generally restricted to
administrators, and users should be encouraged to send the administrator the snippet
files they wish to use for review, upload, and assignment.
Once the snippet file is uploaded, it can be identified as a snippet by an administrator.
(See snippet examples.)
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.
- Designate a subdirectory; for example _resources/snippets in the resources directory
for snippet files.
- 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.)