Snippets are tools in the OU Campus editor that lets users do more advanced formatting to webpages without having to know any code.
What do snippets look like?
Below is a list of the snippets available for website editors to use along with a visual example of the snippets in use.
How snippets work
Snippets can be inserted into most areas of page templates. Snippets can be used for layout, button groups, collapsing and expanding content, and more.
What you see
In the OU Campus editor, snippets appear as various types of tables for easier navigation by editors. Editors can place text, photos, media, and even other snippets into these tables. Some snippets allow for elements to be edited within the snippet and some allow for only plain text.
Snippet table cells will include brief instructions for what type of content goes where.
What happens behind the scenes
Each snippet takes the elements placed inside and transforms them into a formatted block of code by feeding the elements within the table into an XSL template. The XSL template combines the elements placed in the snippet with pre-written HTML code to produce the final product visible in the page preview panel after saving and exiting the page editor.
How to insert a snippet
- Open the webpage and content area you want to edit in OU Campus
- Place the cursor in the editor where you want the snippet to be placed
- Go to the editor toolbar and select "Insert Snippet" (looks like a puzzle piece)
- Choose the snippet you want to insert
- Click "Insert"
- Fill out the snippet according to the directions in the table cells
- Save the Exit the page to view what the snippet will look like