Design Tags

Last Updated: 07 Dec 2018

Once a Design asset has been created using the static HTML file, the required design areas need to be added to allow for the creation of dynamic content. They are parsed by the system and are replaced with the correct HTML to produce the layout that is seen on the frontend of the site. There are a number of different design areas that are available, with each one adding a different element to the design. For example, the Body design area adds the content of the asset into the design.

Bookmarks

Each design area is made up of a number of different Squiz Matrix XML design tags. These design tags define what will happen in the design area. For example, to print information the MySource_PRINT design tag is used. Outlined in the sections below are the design tags that are used within the design areas.

MySource_AREA

This design tag is used to define the start and end a design area in the parse file. The two formats of the MySource_AREA design tag are shown below.

<MySource_AREA id_name="<name>" design_area="<design_area>" />

<MySource_AREA id_name="<name>" design_area="<design_area>" print="[yes/no]" cache="[1/0]">
  .. .. ..
  .. .. ..
</MySource_AREA>

The first format is used for design areas that are only a single statement. For example, the body design area is shown below.

<MySource_AREA id_name="body" design_area="body" />

As this is only a one line statement, the design tag is replaced with /> (where is a space) at the end of the line.

The second format allows you to use other design tags within the design area. For example, in the code shown below, the MySource_SET design tag is used to set the url to http://matrix.squiz.net and the MySource_PRINT design tag is used to print the hyperlink in the HTML code.

<MySource_AREA id_name="privacy_policy" design_area="constant_button"> 
  <MySource_SET name="url" value="http://matrix.squiz.net" />
  <a class="button" <MySource_PRINT var="href" />>Privacy Policy </a>
</MySource_AREA>

The attributes available for the MySource_AREA design tag are as follows:

id_name: enter a unique name for the design area, for example page_body or copyright_link. This name must be unique for all design areas in the parse file.
design_area: enter the type of design area to use. For example, to show the content of the asset, use body. The design areas available are as follows:
- asset_lineage
- body
- declared_vars
- exit
- login_form
- metadata
- nest_content
- password_change_form
- request_vars
- show if
- ecommerce_cart (E-Commerce)
For more information on each of these design areas, refer to the following chapters in this manual.
print: select whether to print the design area at this point in the design. This attribute is optional for a design area. By using it, you can hide elements of the design, especially when using a Design Customisation. For example, if you have a hyperlink to a Contact Us page that has been created using the Constant Button design area. You can hide the design area in the parse file by using print="no" and create a Design Customisation that sets Print to Yes. You can then apply the Design to pages in the Site that should not show the hyperlink and the Design Customisation to pages that should show it.
As design areas cannot be nested (i.e. you cannot have a MySource_AREA design tag within another MySource_AREA design tag), this attribute also allows you embed a design area inside another design area. To do this, set print="no" for the design area that is to be embedded, then print that design area where you want to embed it by using the MySource_PRINT design tag.
cache: select whether the design area should be cached. All design areas that are static should be cached for improved performance. If no value is specified, the design area is not cached. This attribute is optional for a design area.

MySource_SET

This design tag is used to set attribute values for a design area. The two different formats of the MySource_SET design tag are shown below.

<MySource_SET name="<name>" value="<value>" />

<MySource_SET name="<name>" id_name="<id_name>" var="<var_name>" />

The first format allows you to set a variable for the design area. For example, in the code shown below, the datetime variable is set to updated.

<MySource_AREA id_name="page_modified" design_area="datetime">
  <MySource_SET name="datetime" value="updated" />
</MySource_AREA>

The second format allows you to set a variable for a design area to a value that has been set in another design area. For example, in the code shown below, in the copyright design area, the url variable is set to the value that has been set in the privacy_policy design area.

<MySource_AREA id_name="privacy_policy" design_area="constant_button">
  <MySource_SET name="url" value="http://matrix.squiz.net" />
  <a class="button" <MySource_PRINT var="href" />>Privacy Policy </a>
</MySource_AREA>&nbsp;|&nbsp;
<MySource_AREA id_name="copyright" design_area="constant_button">
  <MySource_SET name="url" id_name="privacy_policy" var="url" />
  <a class="button" <MySource_PRINT var="href" />>Copyright </a>
</MySource_AREA>

The attributes available for the MySource_SET design tag are as follows:

name: enter the name of the variable to set. Each design area has a different set of variables that are available, which are outlined in the following chapters.
value: enter the value to set the variable to.
id_name: enter the id name of the design area to get the value from. For example, in the code above, id_name="privacy_policy" is used in the set variable to reference the privacy_policy design area.
var: enter the name of the set variable to use from the other design area. For example, in the code above, var="url" is used so the url value that has been set in the privacy_policy design area is used for the copyright design area.

For some design areas, the set variables can be customised through a Design Customisation. In other words, you can set a value for a variable in a customisation or override the value that has been set in the parse file.

MySource_PRINT

This design tag is used to print either information about the assets within the HTML of a design area, a value from another design area or another design area (i.e. nest one design area inside another one). The three different formats of the MySource_PRINT design tag are shown below.

<MySource_PRINT var="<var_name>" escape="[yes/no]" />

<MySource_PRINT id_name="<id_name>" var="<var_name>" escape="[yes/no]" />

<MySource_PRINT id_name="<id_name>" />

The first format is used to print information about the asset within the design area. For example, in the code shown below, the MySource_PRINT design tag prints the hyperlink of the asset in the asset lineage (or breadcrumb).

<MySource_AREA id_name="page_lineage" design_area="asset_lineage">
  <MySource_ASSET>
    <a href="<MySource_PRINT var="asset_link" />">
       <MySource_PRINT var="asset_name" />
     </a>
  </MySource_ASSET>
  <MySource_DIVIDER>&nbsp;&gt;&nbsp;</MySource_DIVIDER>
</MySource_AREA>

The second format is used to print a set variable from a design area inside another one. For example, in the code shown below, the MySource_PRINT design tag prints the colour that has been set in the declared_vars design area.

<MySource_AREA id_name="colours" design_area="declared_vars" print="no">
  <MySource_DECLARE name="colour" value="8DD93B" type="colour" description="The background colour for the top image"/>
</MySource_AREA>
<style type="text/css" media="all">
  #top-img {background-color: <MySource_PRINT id_name="colours" var="colour" />;}
</style>

The last format is used to nest one design area inside another one. For example, in the code shown below, the write_access design area is printed in the logon_box design area. By doing this, the write_access design area is nested within the logon_box design area.

<MySource_AREA id_name="write_access" design_area="show_if" print="no">
  <MySource_SET name="condition" value="write_access" />
  <MySource_THEN>
    <a href="<MySource_PRINT id_name="__global__" var="asset_link" />/_edit" <MySource_PRINT id_name="__global__" var="asset_short_name" /></a>
  </MySource_THEN>
</MySource_AREA>
<MySource_AREA id_name="logon_box" design_area="show_if">
  <MySource_SET name="condition" value="logged_in" />
  <MySource_THEN><MySource_PRINT id_name="write_access" /></MySource_THEN>
</MySource_AREA>

Asset-level keywords can be implemented onto a design by printing them within the MySource_AREA tags. For example: <MySource_PRINT var="asset_attribute_email"/>

The attributes available for the MySource_PRINT design tag are as follows:

id_name: enter the id name of the design area to print the value from. For example, in the code above, id_name="write_acess" is used to reference the write_access design area.
var: enter the value to print for the asset. For example, in the code above, var="asset_name_linked" is used to print the hyperlink to the asset. If you are referencing another design area, enter the name of the variable to print from the other design area. For example, if the code above, var="colour" is used so that the colour value that has been set in the colours design area is used for the background colour.

escape: select whether to escape the variable. This is useful for outputting values into JavaScript. For example, say you have a page called Our Company's Workplace "Standards". If you attempt to put the following tag into the parse file:

<script language="JavaScript" type="text/javascript">
  <!--  alert('The Current Page: <MySource_PRINT id_name="__global__" var="asset_name" />'); //-->
</script>

This will produce the following JavaScript for the page :

<script language="JavaScript" type="text/javascript">
  <!--  alert('The Current Page: Our Company's Workplace "Standards"'); //-->
</script>

This will cause errors in the JavaScript, because of the un-escaped single quote in Company's and double quotes in "Standards". To avoid the JavaScript error, you can add the escape="yes" attribute to the print operation:

<script language="JavaScript" type="text/javascript">
  <!-- alert('The Current Page: <MySource_PRINT id_name="__global__" var="asset_name" escape="yes" />'); //-->
</script>

This produces the following valid JavaScript:

<script language="JavaScript" type="text/javascript">
  <!-- alert('The Current Page: Our Company\'s Workplace \"Standards\"'); //-->
</script>

The escape option is optional. By default, it is set to No.

MySource_ASSET

This design tag allows you to loop through a number of assets in a section and print out information about the asset in the HTML created. This is used in design areas such as Menu Normal, Asset Lineage and Access History, where information for a number of assets needs to be printed. For example, in the code shown below, the MySource_ASSET tag is used to print the hyperlink to the asset for the menu.

<MySource_AREA id_name="menu" design_area="menu_normal">
  <MySource_SET name="level" value="top" />
  <MySource_ASSET> 
    <MySource_PRINT var="asset_name_linked" />
  </MySource_ASSET> 
  <MySource_DIVIDER></MySource_DIVIDER>
</MySource_AREA>

By using the MySource_ASSET tag, the HTML code that is generated is shown below.

<a href="http://matrix.squiz.net/home">Home</a>
<a href="http://matrix.squiz.net/news">News</a>
<a href="http://matrix.squiz.net/manuals">Manuals</a>

MySource_DIVIDER

This design tag allows you specify a divider that is used between each asset that is printed when you are looping through a section using the MySource_ASSET design tag. This is used in design areas such as Menu Normal, Asset Lineage and Access History. For example, in the code shown below, the MySource_DIVIDER tag is used to print a > in between each asset in the asset lineage or breadcrumb.

<MySource_AREA id_name="page_lineage" design_area="asset_lineage">
  <MySource_ASSET>
    <MySource_PRINT var="asset_name_linked" />
  </MySource_ASSET>
  <MySource_DIVIDER> 
    &nbsp;&gt;&nbsp;
  </MySource_DIVIDER> 
</MySource_AREA>

If you do not want to include a divider, you can include empty MySource_DIVIDER tags, as shown in the example below.

<MySource_AREA id_name="menu" design_area="menu_normal">
    <MySource_SET name="level" value="top" />
    <MySource_ASSET>
      <MySource_PRINT var="asset_name_linked" />
    </MySource_ASSET>
    <MySource_DIVIDER></MySource_DIVIDER>
</MySource_AREA>

If you leave the MySource_DIVIDER tags out of the design area, the default divider of > will be used.

MySource_DECLARE

This design tag is used within the declared_vars design area to declare a variable (for more information on this design area, refer to the Declared Vars Design Area chapter). The format of the MySource_DECLARE design tag is shown below.

<MySource_DECLARE name="<var_name>" type="<var_type>" value="<value>" description="<description>" />

The example code below declares a variable called colour and sets it to the value #8DD93B. This colour is then used in the background colour of an image.

<MySource_AREA id_name="colours" design_area="declared_vars" print="no">
  <MySource_DECLARE name="colour" type="colour" value="8DD93B" description="The background colour for the top image"/>
</MySource_AREA>
<style type="text/css" media="all">
  #top-img {background-color: <MySource_PRINT id_name="colours" var="colour" />;}
</style>

You can declare more than one variable per design area.

The attributes available for the MySource_DECLARE design tag are as follows:

name: enter a name for the variable, for example colour. This name must be unique for the design area.
type: enter the type of value to use, for example colour or text. The available types are assetid, boolean, colour, datetime, email, int, text and url.
value: enter the value to use for the declared variable. For example, the value #8DD93B is used for the colour variable.
description: enter a description for the declared variable. This will appear on the Details screen of the Design Customisation.

MySource_THEN and MySource_ELSE

These design tags are used within the Show If design area. An example is shown in the code below.

<MySource_AREA id_name="logon_box" design_area="show_if">
  <MySource_SET name="condition" value="logged_in" />
  <MySource_THEN>You are logged in.</MySource_THEN> 
  <MySource_ELSE>You are NOT logged in.</MySource_ELSE> 
</MySource_AREA>

The MySource_THEN and MySource_ELSE statements tell the system what to do for the stated condition. If the condition is true, then the content in between the MySource_THEN statements is shown. Otherwise, if the condition is false, the content in between the MySource_ELSE statements is shown. You do not need to include both statements. You can use one or the other or both depending on what you want to achieve. For more information on the Show If design area, refer to the Show If Design Area chapter in this manual.

These design tags are used within the Login Form design area. An example is show in the code below.

<MySource_AREA id_name="login_form" design_area="login_form">
  <MySource_PRINT var="system_messages" /><br />
  <MySource_LOGIN_SECTION> 
    <MySource_PRINT var="form_open" />
    Not currently logged in<br />
    Username: 
     <MySource_PRINT var="username_box" size="10" class="sq-data" />
     <br />
    Password: 
     <MySource_PRINT var="password_box" size="10" class="sq-data" />
     <br />
    <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
    <MySource_PRINT var="form_close" />
  </MySource_LOGIN_SECTION> 
  <MySource_LOGOUT_SECTION> 
    <MySource_PRINT var="form_open" />
    Currently logged in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
    <br />
    <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
    <MySource_PRINT var="form_close" />
  </MySource_LOGOUT_SECTION> 
</MySource_AREA>

The MySource_LOGIN_SECTION and MySource_LOGOUT_SECTION statements tell the system what to show when the user is logged in or logged out. If the user is logged in, the MySource_LOGOUT_SECTION is shown. If the user is not logged in, the MySource_LOGIN_SECTION is shown.

MySource_SUB

This design tag is used in the Menu Normal design area to show additional levels in the menu. An example is shown in the code below.

<MySource_AREA id_name="menu" design_area="menu_normal">
  <MySource_SET name="show_subs" value="always" />
  <MySource_ASSET>
    <MySource_PRINT var="asset_name_linked" />
    <MySource_SUB design_area="menu_normal"> 
      <MySource_SET name="show_subs" value="on_current" />
      <MySource_ASSET>
        <div class="subnav"><MySource_PRINT var="asset_name_linked" /></div>
      </MySource_ASSET>
    </MySource_SUB> 
  </MySource_ASSET>
  <MySource_DIVIDER> </MySource_DIVIDER>
</MySource_AREA>

For more information on this design tag, refer to the Menu Normal Design Area chapter in this manual.

Previous Chapter Next Chapter

Help Center

Menu

Design Assets

Getting Started

Core Modules

Tools & Configuration

Integration

Extensions

Design Tags

MySource_AREA

MySource_SET

MySource_PRINT

MySource_ASSET

MySource_DIVIDER

MySource_DECLARE

MySource_THEN and MySource_ELSE

MySource_SUB

Design Tags

MySource_AREA

MySource_SET

MySource_PRINT

MySource_ASSET

MySource_DIVIDER

MySource_DECLARE

MySource_THEN and MySource_ELSE

MySource_LOGIN_SECTION and MySource_LOGOUT_SECTION

MySource_SUB