Static Pages - content blocks and placeholders

Posted in Tutorials on Oct 18, 2014

In the blog post Getting started with static pages we explained how to use the static pages and menus. We have added new features since that post and now it's time to talk about the Placeholders and Content Blocks.

Placeholders

Placeholders is a standard feature of OctoberCMS. It allows to define areas in a layout that could be replaced with contents supplied by a page which uses the layout. The Static Pages plugin detects placeholders defined in a layout and displays an editor for each of them.

Let's consider a situation when you have a layout for a product page. The page has 3 areas - the product description, the ordering information and the delivery information. We want our client to be able to create static pages basing on the layout and provide content for each of the areas. We can define the layout like follows. The example uses a simple markup for clarity.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ this.page.title }}</title>
    </head>

    <body>
        <div class="product-description">
            {% page %}
        </div>

        <div class="product-ordering">
            <h3>Ordering information</h3>

            {% placeholder ordering title="Ordering" %}
        </div>

        <div class="product-delivery">
            <h3>Delivery & Shipping</h3>

            <p>{% placeholder delivery title="Delivery" type="text" %}</p>
        </div>
    </body>
</html>

The code defines two placeholders and uses the title parameter to set title for the placeholder tab in the Static Pages editor. Also, the delivery placeholder is a text-type placeholder. Plain text placeholders are managed with a non-WYSIWYG text editors in Static Pages, and their content is escaped before displaying on a page.

For a page based on this layout you will see 3 tabs in the Static Page editor - for the main content, Ordering and Delivery placeholders:

And this is what you could see on the front-end:

Content blocks

The Static Pages plugin now can be used for editing content blocks which can be referred in CMS pages and layouts. This feature allows your clients to update the static website content without accessing the CMS area. You can use this feature even if you don't use the static pages and menus. It's just a simpler way for non-technical users to work with content blocks.

Other updates

In the previous blog post we mentioned that in order to create a layout that could be used for the both Static and regular CMS pages, you should render the staticPage component and use the {% page %} tag:

{% component 'staticPage' %}
{% page %}

Now you can use the {% page %} tag without rendering the static page component, like this:

{% page %}

You still should use the Static Page component in the layout as it loads and prepares the static page contents.

Still in progress...

Although the Static Pages plugin has lots of features now, we are still working on it and adding more magic and power into it. More exciting news ahead!