Chapter 2: Template pages

In the last chapter we learned a few basics about template pages or page layouts. In this chapter I will walk you through creating a template page.

Assets for the front end theme can be found in www/css, www/js and www/images/site folders.

Disclaimer: The theme used in this demo is not a theme that I wrote myself. I am not sure who wrote it. It's a very old theme since it supports IE7 and we will use it for our demo project.

Note: You may have better techniques for building css with less and gulp, etc. Go ahead and use those techniques. It's beyond the scope of this tutorial.

Create a template page

As mentioned earlier, a template page or page layout is a page which behaves like a template for other pages. You may have to attach a Twig template to this page. You will attach modules to this template. Each module is responsible for rendering a piece of content on a page. You will also want to turn off the visibility settings from Page -> Properties so that no user can access such a page from the front end and it will not be indexed by search engines. Turning of visibility settings is not mandatory and is according to your requirements. A template page can also inherit from another template page much like extending a class in Object Oriented (OOPS) terminology.

To inherit a template page from another template page, simply set the Base page from Page -> Properties to the base template page. This is the same thing you would have done when sub-classing a class in OOPS terminology.
You will do the same thing to apply a page layout to a page. It's like saying this page will extend template page. The inherited page (similar to a sub-class) will now inherit the Twig template of the template page as well as all the modules attached with it. You can now override the content of the inherited modules (i.e. local content) and maybe even add new modules or perhaps disable some of the inherited modules. This is very similar to what you can do with a sub-class.
You can even sub-class this page by applying it as the base page to another page. In this case, you may not want to alter the visibility settings because you will want users to access this page in the front end.

So let's create a template page for future demo pages.

  1. Click the New page button. A dialog will open.
  2. Give the page a name. Name it "Demo".
  3. Set the Parent page to Templates.
  4. Set the Base page to Templates.
  5. Uncheck all visibility settings and click "Create new page".

Create a Twig template

Next, we have to create a Twig template to render the proper html structure.

I have modified a little the Base.html.twig template and replaced the template code in the body with this:

{% block body "Override" %}

The Base.html.twig template is a generic structure (something like an abstract base class). If you attach that template to any page and render it, you should see "Override" showing in the front end.

You will need to understand how to work with Twig if you want to create templates. Refer the Twig documentation

Create a new template named GenericPage.html.twig and copy the following content to it.

{% extends "Base.html.twig" %}

{% block body %}
    <div id="main">
        <header>
            <h1>{{ curry.ProjectName }}</h1>
            {% placeholder 'primaryNavigation' %}
        </header>

        <section class="content clearfix">
        {% block content "Override" %}
        </section>

        <footer>
            <p>Proudly powered by Curry CMS, &copy;Bombayworks AB</p>
        </footer>
    </div>
{% endblock body %}

Couldn't we just put that piece of code in the Base.html.twig instead of creating a new template? Yes, we could and we should have. But, I have done it this way to help you understand inheritance in Twig. So, at the top of the template we have a keyword extends. You know what it should do. Easy guess? We then, override the block named 'body' that we defined in the Base.html.twig file. The final html structure as a result of rendering this template would be the <div id="main"> block inside the <body>.

Now, create a new template name Article.html.twig. Create a new sub page under Templates named Article and attach Article.html.twig to it. Apply this template page to the Home page. Now render the Home page and study the html structure of the rendered page.

We will create one more template page for demo pages that we will be constructing throughout this tutorial series. Attach Demo.html.twig to the Demo template page and study the rendered html structure.

results matching ""

    No results matching ""