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.

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. However, the assignment of a file to be used as a snippet is restricted to a Level 10 administrator. 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. For more on creating snippets, see: Configuring Snippets

Once the snippet file is uploaded, it can be identified as a snippet. The identification of files to be used as snippets is accomplished by navigating to Setup > Snippets.

Inserting Snippets

If snippets have been configured by an administrator, the Snippet icon will be available.

1. Click the Insert Predefined Snippet Content icon.
Snippets Icon on WYSIWYG Toolbar

2. From the Category drop-down, select a category.

Category choose


3. Select a snippet to be inserted from the Snippets list.

Snippets Choose


4. The chosen snippet is shown in the Preview window.

Snippets Insertion Preview


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.
  • Ask 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.

Was this page helpful?

Additional Comments:

(Include your email address if you would like a reply)

Procede to