Snippets

A snippet is a small, ready-to-use piece of content in a file. Snippets can be re-used within the same template, in all contexts and sections. They can contain any contents that a section can have, such as text, images, variable data, dynamic tables, etc.
Normally, a snippet is an HTML file, but it can also be a JSON file.

When a snippet is added to different sections or contexts, it is displayed according to the section's or context's style sheet. This means that the same content can look different depending on the styles applied to the section or context, without changing the content.

It is possible to open and edit any HTML or JSON file in the Designer: select File > Open, select All files (*.*) as the file type and then select a HTML or JSON file.

About JSON Snippets

JSON Snippets are snippets that contain pieces of JSON data instead of HTML. Just like HTML snippets, JSON snippets are stored in the Snippets folder on the Resources pane, but their file name should end in '.json'.

JSON Snippets cannot be inserted into the content directly, but they can be accessed via a script using the loadjson() function:

var json_data = loadjson("snippets/snippet.json");

results.html(json_data.field1);

See also: Writing your own scripts.

For an example in which JSON snippets are being used to localize a template, see this how-to: Localizing templates using json.

Adding a snippet to the Resources

Here's how to add a snippet to the Resources of a template.

  1. Before adding a snippet, import the resource files that are related to the snippet, such as image files and CSS files, into the template file. Drag and drop the files to the corresponding folders (Images and Stylesheets, respectively) on the Resources pane. If you want to use external images, see Images.
  2. Create a new snippet from an existing piece of content in the template (see Creating a snippet), or drag the file that contains the snippet into the Snippets folder on the Resources pane.
    If the added snippet is not UTF-8 encoded you will be asked to select its encoding. The snippet will then be converted and saved in the template as UTF-8 encoded file.

Remote snippets

A remote snippet is an HTML or JSON file that is not located within your template file but is hosted on a Content Management System or other external location.

To add a remote snippet:

  1. Right-click the Snippets folder on the Resources pane, and click New Snippet > Remote HTML file or Remote JSON file.
  2. Enter a name for the file as it appears in the Snippets folder. This name is shown in the Snippets folder with the .rhtml file extension for HTML, or .rjson for a JSON file.
  3. Enter the URL for the remote resource. This must be a full URL, including the http:// or https:// prefix, domain name, path and file name.

Remote snippets may contain other resources, such as images. There is one limitation though: only absolute paths are supported inside remote snippets. Images and other resources referred to with a relative path (for example: images/img.gif) or root-relative path (any path starting with a slash, for example: /base/images/img.gif) won't be available in the template.

Remote snippets are expected to be UTF-8 encoded.

Adding a snippet to a section

Drag-and-drop

To add the snippet to the content of a section, drag the snippet from the Snippets folder on the Resources pane to the desired location in a section.
Check the option Insert as shared content to insert a reference to the original snippet in the template, rather than a copy of the original snippet.

Via a script

In addition to the drag-and-drop method, it is possible, and often useful, to insert a snippet or part of it, using a script; for remote snippets this is normal practice. See Loading a snippet via a script. 

To export a snippet from your template, drag or copy/paste it out of the Snippets folder to a folder on the local hard drive.

Creating a snippet

To turn a part of a letter, email or web page into a snippet for reuse in the content of a template:

  1. Open the section and select the part or parts that should be saved to a snippet.
  2. Right-click the selection, point to Snippet and click Create to copy the selected part to a new snippet, or Create Shared Content to create the new snippet and replace the selected part with a reference to the new snippet.
  3. Give the snippet a name.

Editing a snippet

To edit a snippet, open the snippet file by double-clicking it on the Resources pane.

By default, a snippet that is being used as shared content can also be modified in a section where it is used. That way you actually adjust its source. The snippet will be changed at all locations where it is used.

The option to modify shared content snippets from within a section can be turned off:

  • In the menu, select View > Shared Content Editing to enable or disable editing of all shared content.
  • To enable or disable editing on a case by case basis, you can also manually set the contenteditable attribute on the Article element of the shared content to true or false. This overrides the menu setting.

Remote snippets inserted as shared content cannot be changed from within the Designer. Of course, their source file can be edited outside of the Designer. When that happens, the changes will become visible in remote snippets that are inserted as shared content.

Renaming a snippet

To rename a snippet, right-click it on the Resources pane in the Snippets folder and select Rename.

If you rename a snippet that was inserted into a section as shared content, you need to update the reference to the snippet manually:

  1. Open the section in which the snippet is used.
  2. Switch to Source view.
  3. Look for the <article> element in the HTML and replace the old snippet name with the new name in the source attribute.

Translating a snippet

Snippets in a multilingual template get translated at the moment they are inserted in the output, if the text is tagged for translation. For more information see Translating templates and Tagging text in snippets.