Shared attributes

Some commons attributes are used by all tags which returns data.

These attributes have the same behaviour for each tag, like the "class" attribute of HTML tags.

HTML Design attributes

  • tag : Wraps the data inside the given tag
  • id : Adds to the wrapping tag the given ID
  • class : Add to the wrapping tag the given class

Using the tag attribute is very useful because it will not return one empty tag if the value is empty.

<ion:page:title tag="h1" class="red box" id="page-title" />

<!-- Result if the page title is "Services" -->
<h1 id="page-title" class="red box">Services</h1>

<!-- Result if the page title is empty : nothing -->

Without the tag attribute :

<h1 id="page-title" class="red box"><ion:page:title /></h1>

<!-- Result if the page title is empty -->
<h1 id="page-title" class="red box"></h1>

Data processing attributes

These attributes are useful if you need to process the data through one simple PHP function or through one CodeIgniter helper.

  • function : processes the data through the given PHP function
  • helper : process the data through the given CodeIgniter helper
<!-- Returns the article's title in lowercase -->
<ion:article:title function="strtolower" />

<!-- Checks the typography with the CodeIgniter's auto_typography helper -->
<ion:article:content helper="typography:auto_typography" />

<!-- Repeats the title 3 times -->
<ion:article:title helper="string:repeater:3" />

String processing attributes

  • prefix : Adds one prefix to the data
  • suffix : Adds one suffix to the data
  • paragraph : Limits the data to the given number of paragraphs
  • words : Limits the data to the given number of words
  • characters : Limits the data to the given number of characters
  • ellipsize : strip tags from the data, split it at a defined maximum length, and insert an ellipsis
  • autolink : Autolinks URLs found in the value

prefix / suffix

This attribute can have one simple string as value, but also one translation.
See Static Translations for more info about lang keys.

<!-- Prefix / suffix -->
<ion:article:title prefix="Read more about : " />

<!-- Returns : -->
Read more about : My Article

<!-- Prefix / suffix with static translation -->
<ion:article:title prefix="lang('read_more_about')" />

<!-- Returns in french -->
Lire la suite de : Mon Article

<!-- Returns in english -->
Read more about : My Article

<!-- some fun with prefix and suffix -->
<ion:categories:list prefix="'&bull; '. lang('post_in_categories').' : '" />

<!-- Returns in english -->
• Post in categories : My Category

<!-- Returns URLs embeded in A HTML tag -->
<ion:article:subtitle autolink="true" tag="h2" />

The suffix attribute has the same behavior than prefix.

paragraph, words, characters, ellipsize

These attributes will limit the displayed content.

<!-- Display the first paragraph of the article's content -->
<ion:article:content paragraph="1" />

<!-- Limit the title to 4 words -->
<ion:article:title words="4" />

<!-- Limit the subtitle to 25 characters -->
<ion:page:subtitle characters="25" />

<!-- Ellipsize the content -->
<ion:article:content ellipsize="true" />

<ion:article:content ellipsize="32,.5,1" />

Date formatting attribute

This attribute works only on date tags.

One basic usage is to set one PHP date format to output the date :

<ion:article:date format="d.m.Y" />

Short formatted date

If one of the following format is used, the corresponding translation will be searched first in the /themes/your_theme/language/xxx/date_lang.php file, then in the core translation file if your date translation file isn't found :

  • D : Name of the day, on 3 chars.
  • l : Name of the day, long.
  • F : Name of the month, long
  • M : Name of the month, on 3 chars

That means the day and month names will be displayed in the according language, as translated in each translation file.

The following code will display "Mon" if the user visit the website in english and "Lun" if he visits the website in french.

<ion:date format="D" />

Long formatted date

But one common issue is that date format are not the same from one lang to another.
In US, one common date format is 12.31.2012, but in France, the day displayed first, so this date will look like this : 31.12.2012.
You may also wish to display the month in words, like december 31. 2012 or 31 décembre 2012.

To do that :

  1. Copy the file /application/language/xx/date_lang.php to /themes/your_theme/language/xx/date_lang.php in each "xx" lang folder,
  2. Open the copied lang file and edit the keys $lang['dateformat_short'], $lang['dateformat_medium'], $lang['dateformat_long'] or $lang['dateformat_complete'] depending on your needs.
    For example :
    - in en/date_lang.php: $lang['dateformat_medium'] = 'M d Y';
    - in en/date_lang.php: $lang['dateformat_medium'] = 'd M Y';
  3. Use the format attribute like this :
<!-- Use of the date format "medium", defined by $lang['dateformat_medium'] -->
<ion:article:date format="medium" />

<!-- This will return for french -->
31 dec 2012

<!-- This will return for english -->
dec 31 201

Be sure that the files date_lang.php are existing for each language of your website.

Test and Conditional attributes

See : Tag Reference > Conditons with tags