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, sections and scripts.
There are three types of snippets:

  • HTML snippets can contain any contents that a section can have, such as text, images, variable data, dynamic tables, etc., see HTML snippets.

  • JSON files contain data; see JSON snippets

  • Handlebars templates can contain HTML and Handlebars expressions; see Handlebars templates.

The information in this topic applies to all or at least two types of snippets.

Note: Regarding styling, 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.

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

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 any 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. 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.

Tip: 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.

Remote snippets

A remote snippet is either 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.

Note: 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.

Note: Remote snippets are expected to be UTF-8 encoded.

Creating a snippet

To start creating a snippet from scratch:

  1. On the Resources pane, right-click the Snippets folder and select New.

  2. Select the type of snippet that you want to create: HTML file, JSON file or Handlebars template.

  3. Give the snippet a name.

Tip: It is also possible to create a new HTML snippet from an existing piece of content in the template; see Using content to create an HTML snippet.

Adding a snippet to a section

Each type of snippets is used differently; see Adding an HTML snippet to a section, Using a JSON snippet and Using Handlebars templates: examples.

Editing a snippet

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

By default, an HTML snippet that is being used as shared content can also be modified in a section where it is used. This behaviour can be changed; see Editing a snippet

Renaming a snippet

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

If you rename an HTML snippet that was inserted into a section as shared content, you need to update the reference to the snippet manually; see Renaming a snippet.

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.