Template engine

The template is your design in html, add css and javascript as you please. In the template you put specific tags that control where the elements and their properties will be filled in. You can add as many different templates as you want and re-use templates in other templates as well. Regarding javascript: PEATCMS emits events (such as ‘document ready’) you can listen to.

Progressive as standard

Standard PEATCMS only loads and renders the requested element. You, the designer, can include tags with conditions (currently under development) that prompt the templating engine to load more if there’s enough space. You can also define ‘permanent’ regions, those are parts in the document that are static (like header and footer) as far as the html goes. This further speeds up your website and makes it possible to play video and / or audio without interruption throughout the entire website.

Tags

A brief talk about the tags to get the idea. As PEATCMS is still in rapid development tags will be added often and not necessarily mentioned on this page immediately.

Global

These tags are always available.

• {{root}}
• {{version}}

As well as log, warn and error messages for noscript users. The template system also allows any complex tag you have set as a slug in the cms, for instance static text, a music player, a menu or a shoppingcart.

Page

The Page element has the following properties (simple tags):

• {{slug}} - the url part after your domain name that summons this page
• {{title}}
• {{excerpt_parsed}} - a short version of the contents
• {{content_parsed}} - the contents of the page
• {{template_id}} - the template assigned to it
• {{date_published}} - the date the page was published (user editable)
• {{css_class}} - classnames you can use to target in your designs

In the areas where there are multiple pages (you can link multiple pages to a page) you use the complex tag {%__pages__%}. Unlike simple tags complex tags have to be closed, so they always come in pairs.

{%__pages__%}
<h3>{{title}}</h3>
{{content_parsed}}
{%__pages__%}

Within that tag all the simple tags are available for each page. For more fine grained control you have the optional {%__row__%} tag to define the part that has to be repeated for each page.

{%__pages__%}
<h2>Interesting pages</h2>
<section>
{%__row__%}
<h3>{{title}}</h3>
{{excerpt_parsed}}
<div class="more"><a href="/{{slug}}">Meer</a></div>
{%__row__%}
</section>
{%__pages__%}

All elements work like this, you can link them using drag and drop.

Image

For a single image you can assign a template to display it. Otherwise, use the complex tag {%__images__%}. For each image the following properties are available:

• {{slug}} - this summons the image template
• {{title}} - use this as alt text
• {{excerpt_parsed}} - a short version of the description
• {{description_parsed}} - long description of the image
• {{css_class}} - classnames you can use to target in your designs
• {{src_small}} - direct link to image, use as src of the small image
• {{width_small}} and {{height_small}} - numeric, the size in pixels of the small version of the image
• {{src_medium}} - src to the medium image
• {{width_medium}} and {{height_medium}} - numeric, the size in pixels of the medium version of the image
• {{src_large}} - src to the large image
• {{width_large}} and {{height_large}} - numeric, the size in pixels of the large version of the image

Regardless of what you upload, images are served as WebP with transparency and fallback to jpg.

Embed

The embed element supports embedding video’s from e.g. Youtube and Vimeo. But also other stuff that is around the web. It features excerpt and description fields among others. Of course you can link images to represent the embedded content.

File

• {{slug}}
• {{title}}
• {{content_type}}
• {{extension}}
• {{excerpt_parsed}} - a short version of the contents
• {{description_parsed}} - the (long) description of the file

You can link several images to a file to represent it.

More elements:

Currently e-commerce products are available in a single chain of elements: Brand->Serie->Product->Variant. Of course these can be linked to pages, images, files and videos any way you wish (depending on the template).

The special Property element can be used as a category or tag and linked to (interchangeable) Pages and Variants, allowing more flexible navigation as well as sophisticated filtering.

The first element in a collection is also available directly by using the name and a colon. For instance the first image in a carousel on a page is available, for that page, as {{image:src_small}} (and all its other properties).

Filters / functions

Like other templating languages, PEATCMS also supports certain functions using a pipe, e.g. {{title|clean}} cleans the title from tags and whitespaces that are not a regular space. As this slows down the templating engine it is recommended to use sparingly. In javascript you can add your own filters, just create a function that accepts a string (the content) and returns the string with some manipulation done to it and call it after the pipe character.