Static Items

Top of Page

Available from : 1.0.6

Static items are reusable custom data containers.
The main idea behind Static Items is "Create once, use everywhere".

Usage examples

In website, you can certainly need :

  • Flags, for some blocks (articles)
  • Group of articles, to display on some pages
  • List of phone numbers

Consider the flag example : Let's say you want one "new" flag on some articles.

This can be achieved with extend fields, but in this case, the field you will create will be displayed on each article in the admin panel, and you will need to repeat the text "New" on each article you need this flag.
If this flag change its text, you will need to modify each article. Not so nice job...

Static items will save your life :
You just need to create one static item definition called "flag", add one input field and create one instance with the text "New".
This static item will them be available for each article or page of your website.
Just link it to the wished article and it will we available.

If you decide to change the text from "New" to "New feature", of course this text will change for each article using this static item, as the value is predefined.

If you need another flag, just create another instance of the item definition you created and it will be available in your static item list.

Phone numbers are another good example.

Let's consider that you want to display your team phone numbers on each page of the website.
Your team change, you will need to add and remove phone numbers.

One phone number is composed of 2 fields, one "Name" and one "Phone number".

You could manage that with Content Elements, but Content Elements are more dynamic (dynamic list of dynamic values) and do not have global pre-defined values.
In this case, what we want is reusable pre defined data and use the Chris and Julian phone numbers on one page, and the complete team phones number on another page (including or not the Chris and Julian phone numbers).

Static Items is the answer.

Create one definitionTop of Page

First, have a look at the static item panel.

In the main menu :

  1. Go to Content > Static Items
  2. Click on "Create"

ionize Static Item Create

One popup invites you to create your new definition.

The "name" of the static item will be used in your view, to get access to your items.

ionize Static Item Create Definition

Add fields to the definitionTop of Page

The definition let you setup the key and the "Kind of" name of your static items.

Now, we will add some fields to this definition.

  • Click on the Definition name to edit it
  • Click on Add Field to create one field

Note : Only "Super Admins" users can add fields to one definition.
Other users will be able to add instances of Static Items, but not to edit their definition.

ionize Static Item Add field

ionize Static Item New field

For this example, create 2 fields :

  1. One called "title", which will be used to display the title of the flag in the backend
  2. One called "text", to store the text of the flag

Once the fields are created, you can choose which field will be used as backend label, by clicking on the green flag of the field of your choice.
When the editor will ask for the Static Items list, this field will be used as "name" of the instance.

ionize Static Item Label flag

Create Static Item instancesTop of Page

Once the definition is done, we can create some instances of this Static Item definition.

Click on the button "Add Item" of the instance part of the panel and fill the fields.

ionize Static Item New Item

Once one instance is created, it can be linked to one article or page.

Link Items to parentTop of Page

To link one Static item to one page or article :

  • Edit the page or article
  • Open the Items window by clicking on "Add Item"
  • Double-click or drag and drop the item on the parent

ionize Static Item link to parent

Display Static Items in viewsTop of Page

Static Items Fields are displayed in views through a dedicated tag : <ion:static />

Used nested in one parent tag, this tag will display the Static Items linked to the parent.

Used outside of one parent tag, it will display all the instances.

<!-- 
Display the "text" field of the first "flag" item of each article
-->
<ion:articles>
<ion:article:static:flag:items limit="1">
     <div class="flag">
<span>
<ion:text:value />
</span>
</div>
</ion:article:static:flag:items>
</ion:articles>

Advanced examplesTop of Page

Display media of a Static Item

The type "Media" field can be added to Static Item definition.
The previously created label can in this case be one picture sticker.

Example of one "media" field in a Static item :

ionize Static Item with picture field

Usage :

<!--
In this example :
The Static Definition has the name : "bloc-icon"
The media field has the name : "icon"
We want to display the first Static Item and, from it, the first picture
-->
<ion:article:static:bloc-icon:items limit="1">
<ion:icon:medias type="picture" limit="1">
<img src="<ion:media:src />" />
</ion:icon:medias>
</ion:article:static:bloc-icon:items>

Display links of a Static Item

The field type "Internal Link" can be added to a Static Item definition.
With this type of field, one or more pages or article from the website can be added in a link list.

This can be useful to create group of articles or pages you want to display the links to on several pages.

Example of one "Link" field added to one Static Item definition :

ionize Static Item Link field

Usage :

<!--
In this example :
The static item name is : "page-blocks"
The link field's name is : "source"
We will display the first static item, but all links of the "source" field.
-->
<ion:page:static:page-blocks:items limit="1">

<ion:source:links>
<!--
URL to the article
If this article has a link to another content, the used URL will be this other content.
-->
<a href="<ion:url />">

<!--
The title comes from the target article
-->
<ion:title />

<!--
We can also display the pictures linked to the target article
-->
<img src="<ion:media:src size='270' method='square' />" alt="<ion:media:alt />">

</a>
</ion:source:links>

</ion:page:static:page-blocks:items>