Adding parameters to a template gives users the ability to customize its values.
Parameters will be accessible from the Styles button in the designer or defined within containers.
Types of available parameters
| Option | Description | Example |
| mn:param | Allows to declare an attribute. It is advisable to add it in a <meta> tag to prevent it from being rendered by the browser. | <meta mn:param/> |
| mn:name | Assigns a name to a parameter. | <meta mn:param mn:name="myparam"/> |
| mn:type | Defines the type of parameter. | List of available parameters |
| mn:default | Sets a default value for the configured parameter. | <meta mn:param mn:name="myparam"/> |
List of available parameters
| Parameter name | Description | Example |
|---|---|---|
| mn:type="text" | Defines a text type parameter. | <meta mn:param mn:name="mytext" mn:type="text" mn:default="I am a text" mn:label="Text"/> |
| mn:type="html" | Defines an HTML type parameter. | <meta mn:param mn:name="myhtml" mn:type="html" mn:default="I am an HTML content" mn:label="Content"/> |
| mn:type="multilinetext" | Opens the editor in inline mode and allows writing text in multiline mode (for example to insert lists of placeholders). | |
| mn:type="boolean" | Defines a boolean type parameter. | <meta mn:param mn:name="myboolean" mn:type="boolean" mn:default="true" mn:label="Show content"/> |
| mn:type="url" | Defines a link type parameter. | <meta mn:param mn:name="myurl" mn:type="url" mn:default="http://www.mysite.com/" mn:label="Link"/> |
| mn:type="image" | Defines an image type parameter. | <meta mn:param mn:name="myimage" mn:type="image" mn:min-width="150" mn:max-width="300" mn:min-height="150" mn:max-height="150" mn:label="Param image"/> |
| mn:type="color" | Defines a color type parameter. | <meta mn:param mn:name="mycolor" mn:type="color" mn:default="#ff00ff" mn:label="Param color"/> |
| mn:type="taglist" | Defines a taglist type parameter. | <meta mn:param mn:name="mytaglist" mn:type="taglist" mn:default="tag1,tag2" mn:label="Param taglist"/> |
| mn:type="date" | Defines a date type parameter. | <meta mn:param mn:name="mydate" mn:type="date" mn:label="Param date"/> |
| mn:type="datetime" | Defines a datetime type parameter. | <meta mn:param mn:name="mydatetime" mn:type="datetime" mn:label="Param datetime"/> |
| mn:type="int" | Defines an integer type parameter. | <meta mn:param mn:name="myint" mn:type="int" mn:label="Param int"/> |
| mn:type="select" | Defines a parameter for a select input. By setting the attribute mn:buttons, the options are displayed as buttons. |
<span mn:param mn:name="myselect" mn:type="select" mn:default="value 2" mn:label="Options" style="display:none"> <option value="value 1">Label 1</option> <option value="value 2">Label 2</option> </span> <span mn:param mn:name="myselect" mn:buttons mn:default="value 2" ... |
<span style="color:[param:mycolor];">[param:mytext] [param:myselect] [param:pdate] [param:pdatetime pattern='HH:mm:ss dd/MM/yyyy'] [param:pint]</span> <span mn:if="param.myboolean">[param:myhtml]</span> <a href="[param:myurl]" mn:taglist="[param:mytaglist]"><img src="[param:myimage]" /></a>
Warning:
The
It is also recommended to hide the select styles to prevent them from being displayed in the designer.
The
span tags should not be placed inside a HEAD tag.It is also recommended to hide the select styles to prevent them from being displayed in the designer.
Interface customization
Giotto offers the ability to customize the interface through which users can choose the value of parameters.
| Parameter | Description | Example |
|---|---|---|
| mn:label | Adds a label to the element used for value insertion. | <meta mn:param mn:label="insert parameter name here"/> |
| mn:section | Selects the section in which the parameter will be displayed. | <meta mn:param mn:name="param1" mn:label="Insert the value of parameter 1 here" mn:section="Section 1" /> |
| mn:tab | Displays the parameter in a specific tab. | |
| mn:help | Inserts help corresponding to the selected parameter. | <meta mn:param mn:name="param1" mn:label="Insert the value of parameter 1 here" mn:section="Section 1" mn:help="This is the help associated with parameter 1"/> |
| mn:panel | Allows adding a panel in which to place objects for drag and drop. | |
| mn:thumbnail | Displays an icon in the designer's object panel. Use its specific placeholder to indicate the icon to be displayed. |
|
| mn:required | Makes the parameter insertion mandatory. | <meta mn:param mn:name="param" mn:label="Param " mn:required /> |
| mn:showif | Conditions the visibility of a parameter based on another parameter. Accepts the parameters true and false. |
<meta mn:param mn:type="boolean" mn:name="option" mn:label="Show a text" /> <meta mn:param mn:type="text" mn:name="text" mn:showif="param.option" mn:label="Text" /> <span mn:if="param.option">[param:text]</span> |
<div mn:typedef mn:name="myarticle" mn:label="My article" mn:extends="article" mn:panel mn:panelsection.ita='Body' mn:panelorder='12' mn:thumbnail = '[ico:imgtop]' > <meta mn:param mn:name="subtitle" mn:type="text" mn:default="Subtitle" mn:showafter="title" mn:label="Subtitle"> [param:title]
[param:subtitle] </div>