Snippets Setup

Overview

Snippets are reusable files that are available to be inserted on a page via the WYSIWYG Editor or with the Snippets Gadget. The snippets feature is included on the default WYSIWYG toolbar, but would need to be added to any custom toolbars. Snippets can be created by anyone, but snippet setup is performed by Level 9 and 10 administrators only. Categories may also be created, to which snippets can be added. Snippets and snippet categories can also be edited and deleted. From an administrator standpoint, snippet source files can also be edited at any time. Unlike assets, which can be edited once and those changes applied to all subscribed pages, editing a snippet does not change pages on which the snippet has already been placed.

After configuration, snippets can then be utilized by users. End-users insert a snippet on a page by selecting the Snippet icon on the WYSIWYG toolbar, then a category and a snippet from the following modal. If necessary, they can then edit it. The Snippet Gadget can be used to drag a snippet into a page via the WYSIWYG Editor or via the Source Editor.

One way to use snippets is to create a reusable table structure. While the table data is expected to change from page-to-page, the table structure can be defined by the snippet file. Other examples include a predefined form, an image with a caption, and frequently used text such as contact information. Directory variables can be used within a snippet. Variables that are resolved at the time the snippet is inserted into the page and can customize the information based on location. When editing within the WYSIWYG Editor, a snippet becomes part of the page and like any other part of a page is effected by the behaviors of the WYSIWYG Editor. The WYSIWYG will remove certain markup and code by default and based on the schema in use. Therefore, code should not generally be used in snippets. The Snippets screen includes the following features and functionality:

  • Lists the number of snippets
  • The list can be filtered and sorted
  • The ability to add a new snippet
  • Editing the snippet configuration by clicking the linked snippet name
  • Previewing or deleting a snippet
  • Clicking through to edit the snippet file

Snippets

Example of a Snippet

Selecting a Table Snippet

Creating a Snippet File

The extensions .inc, .html, and .txt are all valid extensions for snippet files. Snippets intended for use within the WYSIWYG Editor should not include server-side (e.g., ASP.NET, PHP, or ColdFusion) or client-side code (JavaScript). It is possible to include classes that are called by client-side and server-side code, however. Snippet files can be HTML-based or text. Since snippets can be dropped into the source code before transformation with the use of the Snippet Gadget, an administrator could conceivably include code with the snippet, but would also run the risk of a user accidentally including the snippet on a page.

In order to manage snippet files easily, it is suggested that there be one folder where all snippet files are uploaded, e.g. _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 so the administrator may for review, upload, and assignment.

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. When creating snippets containing Flash or other MultiEdit supported media, do not use the IE browser, as different versions of IE could produce unexpected results in the MultiEdit.

Source View of an Example Snippet File with HTML Formatting

Example Snippet Source Code

Creating a New Snippet Category

A category can be added and snippets organized within them.

  1. Navigate to Content > Snippets. The Snippet Categories view is shown by default. Otherwise, click Categories.
  2. Click the New button in the upper right of the screen.

    Snippet Categories

  3. Give the new category a friendly name, which will help end-users determine where the snippet is located.

    New Snippets Category
  4. Click Create.

Categories of snippets can also be added by clicking on the hyperlinked category name and clicking the New button which will appear in the category's snippets list. A snippet can be put into a category by clicking Edit on the Snippet row. 

Adding a New Snippet

Note: The category to which the snippet is to be added should already have been configured.

  1. Navigate to Content > Snippets
  2. Click to the Snippets list view. 
  3. Click the New button in the upper right of the screen. 
  4. A modal will appear. Items appearing in bold font are required. Enter a Name for the snippet.

    New Snippets
  5. Select a Category.
  6. For the File field, enter the path and file name for the snippet, or browse for the snippet file, which is usually located in the snippets subfolder of the resources directory. 
  7. Add a description if desired, which is displayed as a message to users inserting the snippet. 
  8. When finished, click Create

Snippets Actions and Operations

Snippets and snippet categories can be modified and deleted from the Snippets screen. Snippets can be edited and deleted, and categories can be renamed and deleted. 

Editing a Snippet

  1. Hover over the desired snippet row and click Edit. Alternatively, click the linked name.
  2. The same modal as for creating a new snippet will appear. The name, category, and description can be modified, and a new file can be selected.
  3. When complete, click Save

Previewing a Snippet

  1. Hover over the desired snippet row and click Preview
  2. The snippet preview is shown in a modal. Note that it may not accurately reflect the appearance of the snippet when added to a page. 
  3. When finished previewing, click Close

Editing a Snippet File

  1. Hover over the desired snippet row and click Go to File
  2. The file is opened in the editor and be modified accordingly. 
  3. Edit, as necessary, and save the changes. This does not change the existing snippets that had been inserted on any pages.

Note that if the original snippet file is renamed, moved or deleted, then the attempt to insert the snippet onto a page will not be successful. In the event that the snippet source file was renamed, the renamed file can be selected via the Edit button.

Deleting a Snippet

Deleting a snippet does not delete it on any pages on which it might have been placed. It only deletes the snippet from the options when the Insert Snippet icon is used in the WYSIWYG Editor.

  1. Hover over the desired snippet row and click Delete
  2. A dialog will appear. To confirm the delete, click the Delete button. 

Renaming a Category

  1. Hover over the desired category row and click Rename
  2. An input field will appear where the category name is. Enter the new category name.  

Deleting a Category

Keep in mind that deleting a category deletes all of the snippets within that category. It does not delete the actual snippet file.

  1. Hover over the desired category row and click Delete
  2. This will open a dialog. To confirm the delete of that snippet category, and to delete all the snippets within that category, click the Delete button. 

Using Variables with Snippets

Directory variables can be used within snippets, for instance, to customize the information based on the location within the system. In this case, one would define a variable property name (e.g., "department") to be used for the directory variable and for within the snippet. The value of the "department" property name can be defined for each directory. When the snippet with the variable is used within any file under the directory, the value defined for that directory will be pulled in with the snippet. So, if there is a directory for admissions and a directory for academics, the department property can have values of admissions and academics, respectively, but it is the variable, $department, that is used within the snippet.

Adding a Directory Variable

  1. Navigate to Content > Pages
  2. Hover over the desired directory (or over the breadcrumb) and select Access
  3. A modal will appear. Scroll to the Directory Variables section and click the Add button to add a new directory variable. Define the name for the name and the value for the property.

    Directory Variable

  4. Click Save.

Using the Directory Variable in a Snippet

  1. Create the snippet file.
  2. Add the defined name for the directory variable using the following syntax:
{$department}

And within the snippet file, for example:

Information for the admissions department: <a href="http://newgallena.edu/{$department}>newgallena.edu/{$department}</a>

When inserting the snippet in any files below the directory that have the variable defined, the variable will be resolved to the definition for that directory.