Rendering Elements

Elements are rendered recursively through their own template.

In each element's template, $this represents the element.

Use {render content=$this} to proceed with the recursion:

elements/sets/default/ul.tpl :
<ul>
{render content=$this} /* li.tpl will be called at this point ! */
</ul>

Technically,

{render content=$this}

is the same as:

{foreach from=$this.children item="child"}
  {render item=$child}
{/foreach}

Elements properties

Common properties

  • $this.parent

    The parent of the element.

  • $this.previous

    The previous element.

  • $this.next

    The next element.

  • $this.children

    An array containing the children of the element (if applicable).

    elements/sets/default/ul.tpl :
    This list contains {$this.children|@count} items.
    {* => This list contains 2 items *}
    This is the first item : {render item=$this.children[0]}
    {* => This is the first item : <li>ONE</li> *}
    This is the content of the first item : {render content=$this.children[0]}
    {* => This is the content of the first item : ONE *}
    This is the whole list : <ul>{render content=$this}</ul>
    {* => This is the whole list : <ul><li>ONE</li><li>TWO</li></ul>
  • $this.tag

    The tag of the element.

Specific properties

Some properties are specific to some elements. For example, the image element has $this.src, $this.width, ... properties.

The available properties and their usage are listed in a comment at the beginning of each template for your convenience.

You can combine properties :

elements/templates/t.tpl :
{if $this.parent.tag == "li"}I'm in a list item !{/if}
The type of the list is {$this.parent.parent.custom.type}.

Custom properties

Custom properties are the properties defined by the designer and that will be made available in the Editor. Read this for more.

Sets

alahup! 1.1 introduces the ability to use differents sets of templates for elements.

By default, the "default" set is used.

You can use another set from the main template:

templates/main.tpl :
{alahup->block zone="1" set="alternate"}

Or, from any element's template, you can switch to another set:

elements/templates/div.tpl :
{if $this.type == "code"}
{render content=$this set="code"} /* the "code" set will be used */
                                  /* for children elements       */
{/if}