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 or the Source 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.

For more on creating and configuring snippets, visit the Snippets Setup page. 

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 on the left.

    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.