Adding variables to static pages in October CMS

Adding variables to static pages in October CMS

In October CMS the Static Pages plugin from Rainlab lets you add variables to your page layout and use them in every page you create. You can even communicate with plugins.

It looks bit strange at first, but once you get the hang of it, it is not that bad. But despite this all it is a bit of a letdown that you can't use Markdown by default in the Static Pages plugin.

To make use of variables in pages you have to add the field requirements to a page layout you have connected to your pages.

Then you have to add the static page component to this layout. Otherwise you can't select the layout for a new page.

Find the static pages component

Linking the component

Let's assume that we have a page layout in the CMS section of October CMS named page.

Then adding some variables could look like this:

{text name="text" label="Text" tab="Text"}{/text} 
{variable type="text" name="text_as_variable" tab="Text" label="Text defined Variable"}{/variable}
{textarea name="textarea" label="Textarea" tab="Text"}{/textarea}

{richeditor name="richeditor" label="Richeditor" tab="Editors"}{/richeditor} 
{markdown name="markdown" label="Markdown" tab="Editors"}{/markdown} 

{mediafinder name="mediafinder" mode="image" label="Mediafinder" tab="Uploads"}{/mediafinder} 

{dropdown name="dropdown" label="Dropdown" tab="Selection" options="blue:Blue | orange:Orange | red:Red" }{/dropdown} 
{radio name="radio" label="Radio" tab="Selection" options="y:Yes|n:No|m:Maybe"}{/radio}
{checkbox name="checkbox" label="Checkbox" tab="Selection" default="checked"}{/checkbox} 

{datepicker name="datepicker_date" label="Datepicker (Date only)" mode="date" tab="Selection"}{/datepicker} 
{datepicker name="datepicker_time" label="Datepicker (Time only)" mode="time" tab="Selection"}{/datepicker} 
{datepicker name="datepicker" label="Datepicker (Date & Time)" tab="Selection"}{/datepicker} 

{repeater name="repeater" prompt="Add another repeated field" tab="Repeater"}
    <h2>{text name="title" label="Title"}Title{/text}</h2>
    <p>{textarea name="content" label="Content"}Content{/textarea}</p>
{/repeater}

{% partial "layout/doctype" %}
{% partial "layout/header" %}

<body class="page-{{ this.page.id }} layout-{{ this.layout.id }}">

<!-- Header -->
<header id="layout-header" class="header-navbar">
    <!-- Nav -->
    {% partial "navigation/menu" %}
</header>

<!-- Content -->
<div id="layout-content" class="palette-clouds">
    <div class="container">
        <div class="p-5 bg-white">
            <div class="row">
                <div class="col-12 pb-5">
                    <h1>{{ page.title }}</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    {{ getServiceBlock(tagline) }}
                    {% component 'page' %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer id="layout-footer">
    {% partial "footer/footer" %}
</footer>
</body>

{% partial "layout/assets" %}

</html>

What is happening here?

First let us focus on the following lines:

<!-- textfield in tab "Text" -->
{text name="text" label="Text" tab="Text"}{/text} 

{variable type="text" name="text_as_variable" tab="Text" label="Text defined Variable"}{/variable}
{textarea name="textarea" label="Textarea" tab="Text"}{/textarea}

{richeditor name="richeditor" label="Richeditor" tab="Editors"}{/richeditor} 
{markdown name="markdown" label="Markdown" tab="Editors"}{/markdown} 

{mediafinder name="mediafinder" mode="image" label="Mediafinder" tab="Uploads"}{/mediafinder} 

{dropdown name="dropdown" label="Dropdown" tab="Selection" options="blue:Blue | orange:Orange | red:Red" }{/dropdown} 
{radio name="radio" label="Radio" tab="Selection" options="y:Yes|n:No|m:Maybe"}{/radio}
{checkbox name="checkbox" label="Checkbox" tab="Selection" default="checked"}{/checkbox} 

{datepicker name="datepicker_date" label="Datepicker (Date only)" mode="date" tab="Selection"}{/datepicker} 
{datepicker name="datepicker_time" label="Datepicker (Time only)" mode="time" tab="Selection"}{/datepicker} 
{datepicker name="datepicker" label="Datepicker (Date & Time)" tab="Selection"}{/datepicker} 

{repeater name="repeater" prompt="Add another repeated field" tab="Repeater"}
    <h2>{text name="title" label="Title"}Title{/text}</h2>
    <p>{textarea name="content" label="Content"}Content{/textarea}</p>
{/repeater}

Now let us see how this is presented when editing the page:

Now a bit more useful practice

Suppose you want a page layout that helps you to document something with a repetition.

No comments yet

your email address will not be published. required fields are marked *