Content template's element function {{ element(...) }}

(v3.6.42)

Displays a custom field to the user when editing the content type. The field's value is then output within the template.

{{ element(type, label[, options]) }}

Use Twig syntax to handle the returned value:

1. Output the field's value within the template: {{ element('text', 'Label') }}
2. Assign the value to a variable: {% set value = element('text', 'Label') %}
3. Use the value within a condition: {% if element('text', 'Label') %} Do something... {% endif %}

Additional options

A 3rd parameter is used by elements to provide additional options, which are with required or optional depending on the element type. These options must be provided as a valid JSON string. e.g. 

{{ element('select', 'Colours', {"firstOptions":"Select...","options":{"red":"Red","green":"Green","blue":"Blue"}}) }}

Generic options

All fields accept the following options:

tooltip

Displays a help icon adjacent to the element's label which displays a popup containing the tooltip.

{{ element('text', 'Label', {"tooltip":"Lorem ipsum dolor sit amet"}) }}

Field types

text

Displays a text input field.

{{ element('text', 'Label') }}

textarea

Displays a textarea field.

{{ element('textarea', 'Label') }}

texteditor

Displays a WYSIWYG text editor.

{{ element('texteditor', 'Label') }}

checkbox

Displays a checkbox.

{{ element('checkbox', 'Label') }}

select

Displays a select menu.

{{ element('select', 'Label') }}

Additional options

1. firstOption Populates the first option of the select menu 
2. options Used to specify the select menu's options. Options can be specified as either an object or an array.
1. As an array: {"options":["Red","Green","Blue"]} 
2. An object: {"options":{"red":"Red","green":"Green","blue":"Blue"}}

category

Displays a browse button that opens a modal listing the items of a component, allowing the user to select one or more items from the component. The IDs of the items selected are output by the function.

 {{ element('category', 'Label', {"tableName":"blog_categories"}) }}

Additional options

1. tableName REQUIRED - The name of the table from which to present the categories.
2. selectLimit Accepts an integer representing the maximum number of items which may be selected.
1. If not set then no restriction is imposed.
2. Set to 1 to only allow a single selection e.g:
1. {{ element('category', 'Author', {"tableName":"authors","selectLimit":1}) }}

link

Displays a combination of form fields allowing the user to configure a link to either a page, a page's content or a URL.

{{ element('link', 'Label') }}

Additional options

1. options Accepts a string consisting of any of the following of letters: 
1. i - Internal - Displays a browse button that opens the site tree modal. 
2. e - External - Displays a text field allowing users to submit a URL.
3. p - Page link - Allows users to select pages from the site tree modal.
4. c - Content link - Allows users to select content from the site tree modal.
5. t - Target - Displays a select menu allowing users to specific the links target option.
   
   

   {{ element('link', 'Label', {"options":"iepct"}) }}