Embedding Content

Basics

One of the more powerful features of Interface is the ability to embed content directly into text fields. In order to set this up, first make sure that the column is set to “Wysiwyg” in the model configuration screen:

The basic idea is that you can insert content into the text field by enclosing statements inside double-curly braces, like so: {{ CONTENT GOES HERE }}

This site, getinterface.com, has a Model called “UserManualEntry”, of which this passage is an instance. UserManualEntry has a number of fields, including “title”, “slug”, “summary”, and “body”, and an association to “assets”, which is another Model. All of the text in this passage is encompassed in the “body” field, and values are inserted directly into this field when this entry is rendered. To demonstrate, here an embedding that inserts the title into the flow of this passage:

{{ title }}

renders as

Embedding Content

Which is correct, since the title of this UserManualEntry is “Embedding Content”. Here is another example just to drive the point home:

{{ summary }}

renders as

The embedding syntax lets you embed content directly into a text field!

As you can see, the summary of this entry is rendered directly into the page.

Associations

Not only properties can be embedded, but any properties belonging to content that is associated with this item as well. For instance, UserManualEntry belongs to UserManualCategory under the name “user_manual_category”, and a UserManualCategory has many UserManualEntries as . This can be addressed as:

{{ user_manual_category.title }}

which renders as

Content

which is the name of the category that this UserManualEntry is part of! This process can be repeated to an arbitrary degree, so that any possible navigation through the content graph is renderable through embedding.

Lists

Say we want to find what other UserManualEntries are part of this particular UserManualCategory. We can render those with

{{ user_manual_category.user_manual_entries.title }}

This renders out as

Content ManagementImport/ExportEmbedding Content

As you can see, since there are three entries in this category, the three values are rendered out one after the other. If you would like more control over how these are rendered, there is a variety of ways to deal with groups of content (referred to here as “lists”), rather than a single item. One way is by using “join”:

{{ user_manual_category.user_manual_entries.title | join(' - ') }}

This renders as

Content Management - Import/Export - Embedding Content

There are a couple of things to notice about this. The first is that by the time we say “user_manual_category.user_manual_entries” we have gotten a list. The subsequent call to “.title” extracts the title of every member of the list. This is a common thread across all list handling in embedded content: any method or property that is applied to a list is applied to every member of that list (unless it is a property of the list of course).

The other is that once we have a list of titles of entries associated to this UserManualCategory, we can pass the entire thing to “join” using the pipe syntax: “|”. These pipes can be repeated indefinitely. Here is a more complex example:

{{ user_manual_category.user_manual_entries.title | prefix('Yellow ') | join(' - ') }}

This renders as

Yellow Content Management - Yellow Import/Export - Yellow Embedding Content

Options and Attributes

Options come after the initial query but before the first pipe. Options are for the most part context dependent, for instance Images have a variety of options that can be applied to influence the way they are displayed. The syntax for options are key/value pairs separated by a ‘:’. Here is an example for an image:

{{ assets.last }}

This renders the vanilla image with no options applied:

As you can see, the last asset associated to this UserManualEntry is our dear friend, the NAND gate. If we wanted this to appear at a different size, we can pass in the corresponding options:

{{ assets.last width:500 }}

The image system will do its best to scale the image. To change the dimensions is also simple:

{{ assets.last width:100 height:100 }}

All of the other key value pairs are interpreted as attributes in the resulting DOM element. Here is an example of setting the alt field for the image:

{{ assets.last alt:'NAND gate' }}

Notice the surrounding quotation marks.