Custom content elements
Custom content elements are blocks of predefined HTML code, which contains some dynamic parts (e.g. header, subheader, image... etc.).
There are located in "templates/content/[TEMPLATE_NAME]" directory. Name of template can contain only alphanumeric characters (a-z, 0-9) and underscore (_).
As an example I will create a sample content element (shown on picture).
Content elements must have at least two files:
- Configuration file: config.xml (XML configuration file, where you can define user controls used in template).
- Template file: index.html (Smarty template).
Configuration (config.xml)
In configuration file you can define user controls, which user will see in CMS backend and values of whose are availiable in a template file.
<?xml version="1.0" encoding="utf-8"?>
<ContentTemplate>
<friendlyName>My Content</friendlyName>
<author>Dmitry Monin</author>
<version>1.0</version>
<userControls>
<textbox multiline="false" name="subheader" friendlyName="Subheader">
</textbox>
<image name="myimage" friendlyName="Image" maxwidth="220"></image>
<textbox multiline="true" name="mytext" friendlyName="Text"></textbox>
</userControls>
</ContentTemplate>
| NodeName | Level | Required | Description |
| ContentTemplate | 1 | Yes | Root node of configuration file. |
| friendlyName | 2 | Yes | Name of template which will be shown in CMS Backend. |
| author | 2 | No | Author of template. |
| version | 2 | No | Version of template |
| userControls | 2 | No | Node contains User Controls configuration. |
| [USER_CONTROL_NAME] | 3 | No | User control node (name depends on control name), see User Controls section for complete list of availiable user controls. |
Template file (index.html)
As mentioned above, template file is smarty template. You can use following preassigned template variables:
{$element} - instance of ContentElement type.
{$userControls} - an associative array of User Control objects, defined in configuration file. Each item in this array is an instance of class, derived from UserControl class.
{$data} - an associative array which contains only user control's values.
For our example template will look something like that:
<div id="my-content-{$element->id}" class="my-content-element">
<div class="hd">{$element->header}</div>
<div class="bd">
<img src="{$userControls.myimage->GetSrc()}" />
<p class="subheader">{$userControls.subheader->value}</p>
<p>{$data.mytext}</p>
</div>
<div class="ft"></div>
</div>
{$element->id} - is an content element id (unique identifier for each content element.
{$element->header} - header of content element. Each content element (text, text?, rte, content element and extension) has a header property.
{$userControls.myimage->GetSrc()} - as mentioned above userControls is an associative array of all user controls defined in config.xml file. "myimage" is an instance of Image Control (which extends UserControl class) and has a method name GetSrc() which returns path to image.
{$userControls.subheader->value} - subheader is an instance of Textbox user control (which also extends UserControl class). And value is a field of UserControl class (i.e. each control has field value).
{$data.mytext} - value of user control mytext. I could also use {$userControls.mytext->value} which is equal to {$data.mytext}.