Element

This object represents an element in the catalogue. Read more about using Element catalogs.

Every element page has the element property of this type. Every page with an elements type template has the property elements containing an array of element objects bound to the page. The elements list can be also be obtained by using the {% elementscontext %} tag on any page. See also the elements listing template example and the element page template example.

Common properties for all elements

element_definition_id

ID of element definition model. See also model_name.

new_record?

Returns true if the element is not yet saved. Useful if content areas will additionally be bound to the element. If the element is new this binding should not be done as the element to bind it to does not exist. 

{% unless element.new_record? %}
  {% content name="element_gallery" bind="Element" %}
{% endunless %}

page

Returns the page object of the elements page where current element is located.

page_id

Returns related page object ID.

title

Returns title of element. Property can be made user editable in template.
In element object template the title has to be present and editable, as otherwise object can not be saved.

{% editable element.title %}

model_name

Returns name of element model.

{% if element.model_name == "People" %}

url

Returns URL for given element (e.g. "/people/jon").

path

Returns path (slug) of the element (e.g. "jon").

path_with_page

Returns full path of the element without leading slash (e.g. "people/jon").

position

Order of the element in context of the parent page.

created_at

Element creation time.

updated_at

Last update time.

User defined properties

All user defined properties of element definition are accessible directly as element properties.

If user has defined a property with code description, editable tag for this in elements template would be:

{% editable element.description %}

Editable tag generates the editable field depending of the property type. If property type is image, the image drop area is generated. Currently the image drop area supports only one size of the image. By default drop area saves original image. User can set target_width parameter to specify the expected size of the saved image. For example if image property should be rendered into a 800px wide container:

{% editable element.image target_width="800" %}

In that case the image drop area saves the image which width is closest to the target width instead of original.

Iterating over properties

It is possible to iterate over all properties of current element by using {{ element.model_fields }}. Each property description in this collection also contains property name, data type, key name, available options and of course, its value.

{% for field in element.model_fields %}
  {{ field.title }}: {{ field }}<br/>
{% endfor %}

Each item in model_fields collection has following properties:

• key – field key that can also be used accessing element value directly
• title – field title set in model settings
• data_type – field data type
• options – field options. Only available for fields with select data type
• value – element value for given field

As a convenience, using {{ field }} directly also outputs the field's value.

to_json

Serializes the element into a JSON string.