FirstSpirit V5.1 Online Documentation

Start page / Tutorials / First project / Working with page templates / Output in HTML

Page element output in HTML

If HTML pages are already available for the planned website, they can be used as the framework for the page template that will be created. To do this, the source code of an HTML file can be inserted under the “CMS_HEADER” area.

This source code will then effectively be changed so that the content can be displayed dynamically using FirstSpirit. This includes replacing all references that do not link to external data with the corresponding FirstSpirit expressions.

The static content of the individual sections is replaced with the dynamic content of a content area. To ensure that the content of the content area is visible in the browser, it must be output within the page template. This is done, for instance, using the #global system object: #global.page.body("REFERENCENAME_OF_CONTENTAREA").
The paths to the individual media are replaced with the $CMS_REF(media:...)$ instruction. The corresponding names of the media from the Media Store are inserted where you see “....”

In our project example, the output of the individual page elements is carried out using a simple HTML framework. Knowledge of HTML is required and is not part of this documentation. The HTML expressions used are not included in this material.

The following sections cover the FirstSpirit components used in the individual output areas (keep in mind that the layout of the page is defined under Project layout):

Browser title output
Layout image output below the first navigation level
Switching between individual project languages
Displaying the first navigation level
Displaying the second navigation level
Page title output
Output of sections in the "content_center" section area

Browser title output

$CMS_TRIM(level:4)$
          <title>
              $CMS_IF(!pt_title.isEmpty)$
                  $CMS_VALUE(pt_title.convert2)$
              $CMS_END_IF$
          </title>
$CMS_END_TRIM$


$CMS_TRIM(level:4)$	The $CMS_TRIM(...)$ instruction is used to format the generated source text and to remove unnecessary empty lines and white spaces. level:4 indicates that all white spaces in a line will be combined to become one space and extra spaces in front or behind text will be removed.
$CMS_IF(!pt_title.isEmpty)$	A condition is specified in the $CMS_IF(...)$ instruction. (The reference name of the input component for the browser title is pt_title. The component is checked for Not Empty.)
$CMS_VALUE(pt_title.convert2)$	If the condition is "True", the content of the pt_title input component is output using the $CMS_VALUE(...)$ instruction.

Layout image output below the first navigation level

<img src="$CMS_REF(media:"example_picture")$" class="header" alt=""/>


$CMS_REF(media:"example_picture")$	The $CMS_REF(...)$ instruction resolves a reference to any object node for a path while at the same time ensuring that the referenced object is present in the project's generated state or in the preview. Here, the URL of an image is determined from the Media Store (media:) with the reference name "example_picture".

Switching project languages

<div class="clearfix">
        $CMS_TRIM(level:4)$
            <ul id="languages">
                $CMS_FOR(for_lang, #global.project.languages)$
                    $CMS_IF((#global.language.abbreviation.upperCase != for_lang.abbreviation.upperCase) && for_lang.shouldGenerate)$
                        <li>
                            <a href="$CMS_REF(#global.ref, language:for_lang)$" title="">$CMS_VALUE(for_lang.name.convert2)$</a>
                        </li>
                    $CMS_END_IF$
                $CMS_END_FOR$
            </ul>
        $CMS_END_TRIM$
</div>


$CMS_TRIM(level:4)$	The $CMS_TRIM(...)$ instruction is used to format the generated source text and to remove unnecessary empty lines and white spaces. level:4 indicates that all white spaces in a line will be combined to become one space and extra spaces in front or behind text will be removed.
$CMS_FOR(for_lang, #global.project.languages)$	The $CMS_FOR(...)$ instruction is used for looping constructs. for_lang is the variable name used for this instruction. #global.project.languages - the project-related system object returns all languages of a project.
$CMS_IF((#global.language.abbreviation.upperCase != for_lang.abbreviation.upperCase) && for_lang.shouldGenerate)$	A condition is specified in the $CMS_IF(...)$ instruction. #global.language.abbreviation.upperCase - the preview-related system object returns the language code that was just generated, the .upperCase method converts all characters in the string to upper case. A check determines whether the result corresponds to the content of the for_lang variables and whether the language is generated.
$CMS_REF(#global.ref, language:for_lang)$	If the conditions are met, a reference to the current page is generated in the corresponding project language using the $CMS_REF(...)$ instruction.
$CMS_VALUE(for_lang.name.convert2)$	In addition, the content of the for_lang variables is output for the particular reference using the $CMS_VALUE(...)$ instruction.

Displaying the first navigation level

<a name="mainmenu"></a>
            <div class="clearfix menu">
                $CMS_TRIM(level:4)$
                    $CMS_IF(!pt_mainNavigation.isEmpty)$
                        <ul id="navigation">
                            $CMS_VALUE(pt_mainNavigation)$
                        </ul>
                    $CMS_END_IF$
                $CMS_END_TRIM$
            </div>


$CMS_TRIM(level:4)$	The $CMS_TRIM(...)$ instruction is used to format the generated source text, thus removing unnecessary empty lines and white spaces.
$CMS_IF(!pt_mainNavigation.isEmpty)$	A condition is specified in the $CMS_IF(...)$ instruction. (In the case of pt_mainNavigation, it is "the result" of the navigation function from the previous page. The function is checked for Not Empty.)
$CMS_VALUE(pt_mainNavigation)$	If the condition is "True", the corresponding value is output for each navigation element in the first navigation level using the $CMS_VALUE(...)$ instruction.

Displaying the second navigation level

<div class="leftCol">
         $CMS_TRIM(level:4)$
            $CMS_IF(!pt_subNavigation.isEmpty)$
                <ul class="subNavigation">
                    $CMS_VALUE(pt_subNavigation)$
                </ul>
            $CMS_END_IF$
        $CMS_END_TRIM$
</div>


$CMS_TRIM(level:4)$	The $CMS_TRIM(...)$ instruction is used to format the generated source text, thus removing unnecessary empty lines and white spaces.
$CMS_IF(!pt_subNavigation.isEmpty)$	A condition is specified in the $CMS_IF(...)$ instruction. (In the case of pt_subNavigation, it is "the result" of the navigation function from the previous page. The function is checked for Not Empty.)
$CMS_VALUE(pt_subNavigation)$	If the condition is "True", the corresponding value is output for each navigation element in the second navigation level using the $CMS_VALUE(...)$ instruction.

Page title output

<div class="headline">
        $CMS_TRIM(level:4)$
            $CMS_IF(!pt_headline.isEmpty)$
                <h1>$CMS_VALUE(pt_headline.convert2)$</h1>
            $CMS_END_IF$
        $CMS_END_TRIM$    
</div>


$CMS_TRIM(level:4)$	The $CMS_TRIM(...)$ instruction is used to format the generated source text, thus removing unnecessary empty lines and white spaces.
$CMS_IF(!pt_headline.isEmpty)$	A condition is specified in the $CMS_IF(...)$ instruction. (The page title reference name is pt_headline. The function is checked for Not Empty.)
$CMS_VALUE(pt_headline.convert2)$	If the condition is "True", the content of the input component pt_headline is output using the $CMS_VALUE(...)$ instruction.

Output of sections from the "content_center" content area

$CMS_TRIM(level:4)$
    $CMS_VALUE(#global.page.body("content_center"))$
$CMS_END_TRIM$


$CMS_TRIM(level:4)$	The $CMS_TRIM(...)$ instruction is used to format the generated source text, thus removing unnecessary empty lines and white spaces.
$CMS_VALUE(#global.page.body("content_center"))$	The $CMS_VALUE(...)$ instruction is used to output the content of a content area's sections. The page-related system object #global.page.body supplies the content of the content_center content area, which is identified by its unique reference name.

Print version | Page start