Datafields

The related_items field is useful for creating relationships between pages and collections, or collections and collections.

When rendering {{{help}}}, related items appears in list of related_items instead of within {{fields}}. Related items can be rendered with the {{#each}} helper, since it is an array of items. When the {{#each}} propeller is used, the order that items are rendered is set by the sorting position of the items set in Airship CMS. If dot notation for rendering is preferred, the item's sorting position (array index) is required in the markup.

Example markup using related items with the variable name similar_animals:

<div class="similar-animals">
  {{#each related_items.similar_animals}}
  <h4><a href="{{slug}}">{{fields.name}}</a></h4>
  {{/each}}
</div>

Example Output:

<div class="similar-animals">
  <h4><a href="/mammals/view/hedgehog">Hedgehog</a></h4>
  <h4><a href="/mammals/view/bobcat">Bobcat</a></h4>
</div>

Alternatively the {{#sort_list}} propeller can be used to render items. The {{#sort_list}} propeller will take precedence over the order determined in Admin. Example markup rendering related aerostats using the {{#sort_list}} propeller:

<div class="similar-animals">
  {{#sort_list related_items.similar_animals sort="fields.name" order="asc"}}
  <h4><a href="{{slug}}">{{fields.name}}</a></h4>
  {{/sort_list}}
</div>

Example Output:

<div class="similar-animals">
  <h4><a href="/mammals/view/bobcat">Bobcat</a></h4>
  <h4><a href="/mammals/view/hedgehog">Hedgehog</a></h4>
</div>

Example markup using dot notation to render the second item in related aerostats with variable name similar_animals:

<div class="similar-animals">
  <h4><a href="{{related_items.similar_animals.1.slug}}">{{related_items.similar_animals.1.fields.name}}</a></h4>
</div>

You may also optionally wrap the item's index with brackets: {{related_items.similar_animals.[1].fields.name}}

Example Output:

<div class="similar-animals">
  <h4><a href="/mammals/view/bobcat">Bobcat</a></h4>
</div>

Limitations:

• related_items data attached to collection items will not render on a collection index.html template.
• related_items data attached to collection items will not render on a collection category.html template.
• related_items data attached to a page will not render on a page template.

Notes:

• Fields such as {{permalink}} which contain content outside the {{#each}} can still be accessed by prepending ../ to the variable name, like this: {{../permalink}}
• On an index.html and category.html the list of items will hide related_items content.

The text field is a simple input. It's useful for content with small amount of phrasing, such as headers or titles.

Example markup using a text field with the variable name header:

<p>{{fields.header}}</p>

Example Output:

<h1>Cute Animals &amp; Products</h1>

Note: Only a text field can be set as a Primary Label.

The textarea field is useful for plain multi-line content, or text that is too long for the text field type.

Example markup using a textarea with the variable name description:

<p>{{fields.description}}</p>

Example Output:

<p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>

It is also useful to use a textarea field to store html or complex content containing html markup or code snippets. If you use a textarea to store code snippets, be sure to use triple curly brackets to render the content:

<div class="code">
{{{fields.code}}}
</div>

Example Output:

<div class="code">
<style>
  body{
    background-color: red;
  }
</style>
</div>

A richtext area, or WYSIWYG editor, is useful for custom formatting or adding various content other than text such as images, links, or lists.

This field requires triple curly brackets to render.

Example markup using a rich text area with the variable name animal_description:

<div>{{{fields.animal_description}}}</div>

Example Output:

<div><p><a href="http://marketing.airshipcms.io" rel="noopener noreferrer" target="_blank">marketing.airshipcms.io</a></p><p><em>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod. Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</em></p></div>

An image field is useful for rendering an image or including a link to a file. Although an image is a single item, it shares the same propellers markup as a list of images. It can be rendered by using either the {{#each}} helper, or dot notation by including the item's sorting position (array index).

Example markup using an image field the variable name animal_iamge:

{{#each fields.animal_image}}
<div class="animal-image">
  <h1>{{../permalink}}</h1>
  <h6>{{title}}</h6>
  <p>{{subtitle}}</p>
  <img src="{{url}}" alt="">
  <p>{{caption}}</p>
</div>
{{/each}}

Example Output:

<div class="animal-image">
  <h1>hedgehog</h1>
  <h6>Grumpy Hedgie</h6>
  <p>Lorem ipsum dolor</p>
  <img src="http://res.cloudinary.com/airship/image/upload/v1494989137/media/hedgietest_rpaxih.jpg" alt="">
  <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
</div>

Note: Fields such as {{permalink}} which contain content outside the {{#each}} can still be accessed by prepending ../ to the variable name, like this: {{../permalink}}

Example markup using dot notation:

<div class="animal-image">
  <h6>{{fields.animal_image.0.title}}</h6>
  <p>{{fields.animal_image.0.subtitle}}</p>
  <img src="{{fields.animal_image.0.url}}" alt="">
  <p>{{fields.animal_image.0.caption}}</p>
</div>

You may also optionally wrap the item's index with brackets: {{fields.animal_image.[0].title}}

Example Output:

<div class="animal-image">
  <h6>Grumpy Hedgie</h6>
  <p>Lorem ipsum dolor</p>
  <img src="http://res.cloudinary.com/airship/image/upload/v1494989137/media/hedgietest_rpaxih.jpg" alt="">
  <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
</div>

The link field is useful for rendering a link, or a bunch of text information. Although a link is a single item, it shares the same propellers markup as a list of links. It can be rendered using the {{#each}} helper, or using dot notation with the item's array index.

The link field has inputs for title, subtitle, url, and caption.

The following markup examples use a link field with the variable name resource_link:

Example markup using the {{#each}} helper:

<div class="link">
  {{#each fields.resource_link}}
  <a href="{{url}}">Resource: {{title}}</a>
  <p>{{subtitle}}</p>
  <p>{{caption}}</p>
  <p>{{../permalink}}</p>
  {{/each}}
</div>

Example Output:

<div class="link">
  <a href="http://marketing.airshipcms.io/">Resource: Animal Info</a>
  <p>Dolor illo in iure voluptas sint?</p>
  <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque.</p>
  <p>animal-info</p>
</div>

Note: Fields such as {{permalink}} which contain content outside the {{#each}} can still be accessed by prepending ../ to the variable name, like this: {{../permalink}}

Example markup using dot notation and the item's index in the array:

<div class="link">
  <a href="{{fields.resource_link.0.url}}">Resource: {{fields.resource_link.0.title}}</a>
  <p>{{fields.resource_link.0.subtitle}}</p>
  <p>{{fields.resource_link.0.caption}}</p>
</div>

You may also optionally wrap the item's index with brackets: {{fields.resource_link.[0].title}}

Example Output:

<div class="link">
  <a href="http://marketing.airshipcms.io/">Resource: Animal Info</a>
  <p>Dolor illo in iure voluptas sint?</p>
  <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque.</p>
</div>

A radio field is useful for providing a several options to choose from as the value.

Example markup using a radio field and:

• variable name: is_endangered
• radio options: Yes, No
• The admin has set the value to No

<p>Endangered: {{fields.is_endangered}}</p>

Example Output:

<p>Endangered: No</p>

Another Example, where you can use a radio field as an admin setting for CSS:

• variable name: theme
• radio options: red, green, and blue
• The admin has set the value to red

<h1 class="{{fields.theme}}-theme">Welcome</h1>

Example Output:

<h1 class="red-theme">Welcome</h1>

A number field is useful for providing data that is an integer.

Example markup using a number field with the variable name population_size:

<p>Population Size: {{fields.population_size}}</p>

Example Output:

<p>Population Size: 100000</p>

A multiselect field is useful for providing a list of options to choose multiple values from.

Example markup using a multiselect field and:

• variable name: things
• multiselect options: Thing 1, Thing 2, and Thing 3
• The admin has set the value to Thing 2 and Thing 3

<div class="all-the-things">
  {{#each fields.things}}
  <p>{{this}}</p>
  {{/each}}
</div>

Example Output:

<div class="all-the-things">
  <p>Thing 2</p>
  <p>Thing 3</p>
</div>

Alternatively, the values for a multiselect field can also be rendered as a comma separated list for simplicity. Example:

<p>{{fields.thing}}</p>

A checkbox field is useful for creating a setting that can be turned on or off. Example markup using a checkbox with the variable name show_image:

<div>
  {{#if fields.show_image}}
    <h3>Hedgehog</h3>
    {{#each fields.animal_image}}
      <img src="{{url}}" alt="">
    {{/each}}
  {{else}}
    <h3>Sorry! No image for this animal.</h3>
  {{/if}}
</div>

Example Output if show_image was checked:

<div>
    <h3>Hedgehog</h3>
    <img src="http://res.cloudinary.com/airship/image/upload/v1494989137/media/hedgietest_rpaxih.jpg" alt="">
</div>

Example Output if show_image was not checked:

<div>
    <h3>Sorry! No image for this animal.</h3>
</div>

The list of images field can be rendered with the {{#each}} helper, since it is an array of items. When the {{#each}} propeller is used, the order that items are rendered is controlled by the sorting position of the items set in Airship CMS. If dot notation for rendering is preferred, the item's sorting position (array index) is required in the markup.

Example markup using a list of images with the variable name additional_animal_images:

<div class="image-container">
  {{#each fields.additional_animal_images}}
  {{../fields.header}}
    <div class="image">
      <h6>{{title}}</h6>
      <img src="{{url}}" alt="">
      <p>{{subtitle}}</p>
      <p>{{caption}}</p>
    </div>
  {{/each}}
</div>

Example Output:

<div class="image-container">
  Cute Animals &amp; Products
    <div class="image">
      <h6>Sleepy Hedgie</h6>
      <img src="http://res.cloudinary.com/airship/image/upload/v1494989229/media/cute-hedgehogs-311__700_reizde.jpg" alt="">
      <p>image subtitle</p>
      <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
    </div>
  Cute Animals &amp; Products
    <div class="image">
      <h6>Hedgie Dino</h6>
      <img src="http://res.cloudinary.com/airship/image/upload/v1494989296/media/hedgietest2_a03l7y.jpg" alt="">
      <p>image subtitle</p>
      <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
    </div>
</div>

Alternatively the {{#sort_list}} propeller can be used to render items. The {{#sort_list}} propeller will take precedence over the order determined in Admin. Example markup rendering the list of images using the {{#sort_list}} propeller:

<div class="sorted-images">
  {{#sort_list fields.additional_animal_images sort="title" order="asc"}}
    <div class="image">
      <h6>{{title}}</h6>
      <img src="{{url}}" alt="">
      <p>{{subtitle}}</p>
      <p>{{caption}}</p>
    </div>
  {{/sort_list}}
</div>

Example Output:

<div class="sorted-images">
    <div class="image">
      <h6>Hedgie Dino</h6>
      <img src="http://res.cloudinary.com/airship/image/upload/v1494989296/media/hedgietest2_a03l7y.jpg" alt="">
      <p>image subtitle</p>
      <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
    </div>
    <div class="image">
      <h6>Sleepy Hedgie</h6>
      <img src="http://res.cloudinary.com/airship/image/upload/v1494989229/media/cute-hedgehogs-311__700_reizde.jpg" alt="">
      <p>image subtitle</p>
      <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
    </div>
</div>

Note: Fields such as {{permalink}} which contain content outside the {{#each}} can still be accessed by prepending ../ to the variable name, like this: {{../permalink}}

Example markup using dot notation to render the second item in a list of images with variable name additional_animal_images:

<div class="image-container">
  <div class="image">
    <h6>{{fields.additional_animal_images.1.title}}</h6>
    <img src="{{fields.additional_animal_images.1.url}}" alt="">
    <p>{{fields.additional_animal_images.1.subtitle}}</p>
    <p>{{fields.additional_animal_images.1.caption}}</p>
  </div>
</div>

You may also optionally wrap the item's index with brackets: {{fields.additional_animal_images.[1].title}}

Example Output:

<div class="image-container">
  <div class="image">
    <h6>Hedgie Dino</h6>
    <img src="http://res.cloudinary.com/airship/image/upload/v1494989296/media/hedgietest2_a03l7y.jpg" alt="">
    <p>image subtitle</p>
    <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio sequi facere animi at? Velit odit delectus optio dignissimos animi. Id iusto enim repellat veniam sed totam quod.</p>
  </div>
</div>

The list of links field can be rendered using the {{#each}} helper, since it is an array of items. When the {{#each}} propeller is used, the order that items are rendered is controlled by the sorting position of the items set in Airship CMS. If dot notation for rendering is preferred, the item's sorting position (array index) is required in the markup.

Example markup using a list of links with the variable name additional_links:

<div class="additional-links">
  {{#each fields.additional_resource_links}}
  <div class="link">
    <a href="{{url}}">Resource: {{title}}</a>
    <p>{{subtitle}}</p>
    <p>{{caption}}</p>
    <p>{{../permalink}}</p>
  </div>
  {{/each}}
</div>

Example Output:

<div class="additional-links">
  <div class="link">
    <a href="http://marketing.airshipcms.io/">Resource: link</a>
    <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio</p>
    <p>Dolor illo in iure volupta sed totam quod.</p>
    <p>additional-links</p>
  </div>
  <div class="link">
    <a href="http://marketing.airshipcms.io">Resource: other link</a>
    <p>Lorem ipsum dolor rem nam sequi ea</p>
    <p>Lorem adipisci iusto quia quibusdam rem dicta voluptates, placeat similique quas minima!</p>
    <p>additional-links</p
  </div>
</div>

Alternatively the {{#sort_list}} propeller can be used to render items. The {{#sort_list}} propeller will take precedence over the order determined in Admin. Example markup rendering the list of links using the {{#sort_list}} propeller:

<div class="additional-links">
  {{#sort_list fields.additional_resource_links sort="title" order="desc"}}
  <div class="link">
    <a href="{{url}}">Resource: {{title}}</a>
    <p>{{subtitle}}</p>
    <p>{{caption}}</p>
    <p>{{../permalink}}</p>
  </div>
  {{/sort_list}}
</div>

Example Output:

<div class="additional-links">
  <div class="link">
    <a href="http://marketing.airshipcms.io">Resource: other link</a>
    <p>Dolor illo in iure voluptas sint? Doloribus quae quos doloremque quae odio</p>
    <p>Dolor illo in iure volupta sed totam quod.</p>
    <p>additional-links</p>
  </div>
  <div class="link">
    <a href="http://marketing.airshipcms.io/">Resource: link</a>
    <p>Lorem adipisci iusto quia quibusdam rem dicta voluptates, placeat similique quas minima!</p>
    <p>Lorem ipsum dolor rem nam sequi ea</p>
    <p>additional-links</p>
  </div>
</div>

Note: Fields such as {{permalink}} which contain content outside the {{#each}} can still be accessed by prepending ../ to the variable name, like this: {{../permalink}}

Example markup using dot notation to render the second item in a list of links with variable name additional_links:

<div class="additional-links">
  <div class="link">
    <a href="{{fields.additional_resource_links.1.url}}">Resource: {{fields.additional_resource_links.1.title}}</a>
    <p>{{fields.additional_resource_links.1.subtitle}}</p>
    <p>{{fields.additional_resource_links.1.caption}}</p>
  </div>
</div>

You may also optionally wrap the item's index with brackets: {{fields.additional_resource_links.[1].title}}

Example Output:

<div class="additional-links">
  <div class="link">
    <a href="http://marketing.airshipcms.io">Resource: other link</a>
    <p>Lorem ipsum dolor rem nam sequi ea</p>
    <p>Lorem adipisci iusto quia quibusdam rem dicta voluptates, placeat similique quas minima!</p>
  </div>
</div>

A select field is useful for providing a list of options to choose from as the value.

Example markup using a select field and:

• variable name: animal_kingdom
• select options: Plants, Animals, and Fungi
• The admin has set the value to Animals

<p>Animal Kingdom: {{fields.animal_kingdom}}</p>

Example Output:

<p>Animal Kingdom: Animals</p>

Another Example, where you can use a select field as an admin setting for CSS:

• variable name: theme
• select options: red, green, and blue
• The admin has set the value to red

<h1 class="{{fields.theme}}-theme">Welcome</h1>

Example Output:

<h1 class="red-theme">Welcome</h1>

A date field can be formatted using the {{format_date}} helper. Example markup using a date field with the variable name date:

<p>{{format_date fields.date "D" "us"}}</p>

Example Output:

<p>Tuesday, May 16, 2017</p>