Content Elements

Content Elements are multiple fields data containers.
Each parent (page or article) can have more than one instance of one Content Element.

Real life example

One good usage example of Content Element are events.
Let's say you have one page of your website which displays events.

One event (concert, conference) has usually one location, one date, and other fields like one external link for more information, etc.

You could certainly add extend fields to articles.
The problem is that extend fields will be displayed on the backend on each article, but each article is not one event.

The solution is to create one Content Element, called "concert", and create extend fields linked to this Content Element.
Once set, this element will be available for each page and article.
That means you will be able to add instances of this Content Element to one article or page and display them on the frontend.

Create one Content ElementTop of Page

To create one Content Element:

  • In Ionize, go to Content > Content Elements,
  • Click on the button "Create Element",
  • Set one name to your Content Element and click on save,
  • Once saved, you can change the title of the Content Element and add fields

Add fieldsTop of Page

One Content Element can have one or more fields.

Add one Content Element to one parentTop of Page

When editing one article or page :

  • Click on the button Add Element
  • Select one element in the list of available elements
  • Feed the element and save it

One element is now added to your page or article.

The list of elements is displayed in one new dedicated tab, which has the name of the Content Element (in our example : "Concert")

Display Content Elements in viewsTop of Page

Extend Fields are displayed in views through a dedicated tag : <ion:element />

This tag must be used in the context of the parent type for which the Extend Field is defined.

In case of radio, checkbox or select, the returned value will be the key.

The following example displays one Content Element named "concert" and its items.

<!-- Display one Content Element from articles of the current page -->
<ion:page:articles:article>

<!-- Article title -->
<ion:title tag="h3" />

<!-- Display the Element which has the name "concert" -->
<ion:element:concert>

<!-- Title of the Element (as set in definition of the Content Element) -->
<ion:title tag="h3" />

<!-- Items (or "instances") of this element linked to the article -->
<ion:items tag="ul">

<!-- Field called "place" -->
<li>
Field : <ion:place:label /><br/>
Type : <ion:place:type /><br/>
Value : <ion:place:value /><br/>
Default value : <ion:place:default_value />
</li>

<!-- Field called "private" (radiobox) -->
<ion:private>

<!-- Display the available options -->
Options : <br/>
<ion:options>
&nbsp;<ion:value/> : <ion:label/><br/>
</ion:options>

<!-- Display the user's selected options -->
Selected values :<br/>
<ion:values>
&nbsp;<ion:value/> : <ion:label/><br/>
</ion:values>

</ion:private>

</ion:items>

</ion:element:concert>

</ion:page:articles:article>

For the complete doc on this tag, see Tag Reference > Content Element