Docs » Widget Template Reference

This document gives template examples and tips for outputting every form widget that Webhook can render. For simplicity we assume you're using the variable item when referencing the data and that you haven't changed the default label. Please check the templates rules and filters page if you're unsure of how to pull CMS data into your page.

Text widgets

Single line text

Outputs plain text.

{{ item.single_line_text }}

Paragraph text

Outputs plain text.

{{ item.paragraph_text }}

WYSIWYG text

Outputs HTML. You must use the |safe filter to render it as HTML. Without the filter, the html will print as plain text.

Styling WYSIWYG content
Webhook adds css classnames and data-attributes for styling purposes. Default CSS for these classes are included in /static/css/wywsiwyg_figures.css which you can override. Please check the wysiwyg content docs for a deeper reference.
{# Will escape the html and render as plain text #}
{{ item.wysiwyg_text }}

{# Will render as HTML (likely what you want) #}
{{ item.wysiwyg_text|safe }}

Markdown text

Outputs markdown. You must use the |markdown filter to render it as HTML. Without the filter, it'll just print out plain text.

{# Will render as plain text #}
{{ item.markdown }}

{# Will convert to HTML (likely what you want) #}
{{ item.markdown|markdown }}

Basic widgets

Number

Outputs plaintext.

{{ item.number }}

Checkbox

Outputs an array. Items in the array contain the label of the checkbox as well as the value. By default the scaffolding will output both true and false checkbox options.

{# List all checkboxes and their values #}
<ul>
  {% for option in item.checkbox %}
    <li>
      {{ option.label }}: {{ option.value }}
    </li>
  {% endfor%}
</ul>

{# List just the true values #}
{% for option in item.checkbox %}
  {% if option.value %}
    {{ option.label }}{% if not forloop.last %}, {% endif %}
  {% endif %}
{% endfor%}

Multiple choice (radio)

Outputs plain text. Will only output the single label of the selected option.

{{ item.multiple_choice }}

Outputs plain text. Will only output the single label of the selected option.

{{ item.dropdown }}

Switch

Evaluates as a boolean value.

{% if item.switch %}
  true
{% else %}
  false
{% endif %}

File widgets

Image

Output a single image object. {{ item.image.url }} will give you the URL to the original uploaded image. Below are some other values on the object.

{# The original uploaded image. #}
<img src="{{ item.image.url }}" />

{# Resize the image to 200 pixels and preserve the aspect ratio. #}
<img src="{{ item.image|imageSize(200, 200) }}" />

{# Crop the image to a 200 pixel square #}
<img src="{{ item.image|imageCrop(200, 200) }}" />

{# Other values on the image object. #}
{{ item.image.url }} {# URL of the original image #}
{{ item.image.height }} {# Height of the original image #}
{{ item.image.width }} {# Height of the original image #}
{{ item.image.size }} {# File size of the original image in bytes #}
{{ item.image.type }} {# File type of the original image #}

Outputs an array of image objects. Each object contains the values listed above in the image widget with the addition of the caption.

<ul>
{% for image in item.gallery %}
  <li>
    <img src="{{ image|imageSize(200, 200) }}" />
    <div>{{ image.caption }}</div>
  </li>
{% endfor %}
</ul>

Audio file

Outputs an object for a single audio file.

{# HTML5 player for an audio file #}
<audio src="{{ item.audio_file.url }}" controls></audio>

{# Other values available on the audio object #}
{{ item.audio_file.url }} {# URL of the original audio file. #}
{{ item.audio_file.duration }} {# Duration in seconds. #}
{{ item.audio_file.size }} {# Size in bytes #}
{{ item.audio_file.type }} {# File type of the audio file #}

Other file

Outputs an object for a single file.

{# Link to your file #}
<a href ="{{ item.other_file.url }}" controls>Download me!</a>

{# Other values available on the audio object #}
{{ item.other_file.url }} {# URL of the original file. #}
{{ item.other_file.size }} {# Size in bytes #}
{{ item.other_file.type }} {# File type of the file #}

Specific widgets

Person

Outputs a single person object.

{# Outputs the first and last name for a person. #}
{{ item.person.first }} {{ item.person.last }}

Address

Outputs a single address object.

{# Output a full address #}
<address>
  {{ item.address.street1 }}<br/>
  {% if item.address.street2 %}{{ item.address.street2 }}<br/>{% endif %}
  {{ item.address.city }}, {{ item.address.state }}. {{ item.address.country }} {{ item.address.zip }}
</address>

Phone number

Outputs the phone number as plain text.

{{ item.phone }}

Email

Outputs the email as plain text.

{{ item.email }}

Date time

Outputs the date time format along with the offset to GMT of the person who saved the item in question. Saved in ISO8601 YYYY-MM-DDTHH:mm:ssZ format. You can use the |date filter to format using PHP style dateformat controls.

{# Format the date. You can use the |date filter to format as needed. See http://php.net/manual/en/function.date.php #}
{{ item.date_time|date('F d Y') }}

Website

Outputs a plaintext URL.

<a href="{{ item.website }}">My Website</a>

Rating

Outputs a string. Usually the number of stars given.

{{ item.rating }}

Tabular Data

Outputs an array of row objects from your tabular data. We don't output the labels for each column and leave that up to you.

{# Output tabular data. Note that it's up to you to output the thead manually. This just output the data. #}
<table>
  <tbody>
    {% for row in item.tabular_data %}
      <tr>
        {% for cell in row %}
          <td>
            {{ cell }}
          </td>
        {% endfor %}
      </tr>
    {% endfor%}
  </tbody>
</table>

Embed.ly

Embed.ly is a service which will turn any URL into a formatted list of JSON values. It's useful for embeds or doing minor data scrapes of popular websites.

The scaffolding template by default outputs {{ item.html|safe }} which is the embed code embed.ly builds from the source URL, but we also store all JSON embed.ly passes back, allowing you to call titles, thumbnails and other values on the page. Each site URL stores data in embed.ly different, but you can always reference the data available by clicking the JSON button in the form itself.

Here is some example JSON when pasting in a URL for a YouTube video

{
  "provider_url": "http://www.youtube.com/",
  "description": "Galactic Civilizations III Alpha available March 27 on Steam Stardock's Adam Biessener plays and narrates a game of the Galactic Civilizations III alpha, cut together and edited for length and drama. www.galciv3.com",
  "title": "First Galactic Civilizations III Gameplay Video",
  "url": "http://www.youtube.com/watch?v=iwU6YFOq0Dw",
  "author_name": "Stardock Games",
  "height": 480,
  "thumbnail_width": 480,
  "width": 854,
  "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=http%3A%2F%2Fwww.youtube.com%2Fembed%2FiwU6YFOq0Dw%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiwU6YFOq0Dw&image=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FiwU6YFOq0Dw%2Fhqdefault.jpg&key=a2b00c0dc25742f1b1421c7d3ac87d10&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>",
  "author_url": "http://www.youtube.com/user/stardockgames",
  "version": "1.0",
  "provider_name": "YouTube",
  "thumbnail_url": "http://i1.ytimg.com/vi/iwU6YFOq0Dw/hqdefault.jpg",
  "type": "video",
  "thumbnail_height": 360,
  "original_url": "https://www.youtube.com/watch?v=iwU6YFOq0Dw",
  "invalid": false
}

Calling that data into the template is easy. You just append the object property name to your value.

{{ item.embedly.title }}
{{ item.embedly.html|safe }}
<img src="{{ item.embedly.thumbnail_url }}">

Color

Outputs a string hex color

{# Will output something like #FFFFFF #}
{{ item.color }}

Map coordindates

Outputs latitude and longitude map coordinates which can be plugged into mapping programs or embed.

{{ item.latitude }}
{{ item.longitude }}

Advanced widgets

Relationship

Will output either a single object or an array of objects depending upon how you set up your form (see the below image, note the checkbox selected). Both styles allow you render any properties from the linked object as well using the other rules on this page.

Outputting a single linked object.

{# Link to your related object #}
<a href="{{ url(item.relationship) }}">{{ item.relationship.name }}</a>

Output an array of linked objects.

{% for relation in item.relationships %}
  <a href="{{ url(relation) }}">{{ relation.name }}</a>{% if not loop.last %},{% endif %}
{% endfor %}