MENU

The power of Template Inheritance and the CMSMS Design Manager

  Previous article Next article  

Template Inheritance is an approach to managing Smarty templates in CMS Made Simple™ that resembles object-oriented programming techniques. It was introduced in Smarty 3 and for us in CMSMS™ 1.11.
Instead of the traditional use of Global Content Blocks (GCB's) or {include ...} tags to manage parts of templates, you can inherit the contents of one template to another and change blocks of content therein. This keeps template management minimal and efficient, since each template only contains the differences from the template it extends. Also template inheritance allows reducing the number of 'if' statements in a template, conditional layouts can be changed to be placed in different derived templates. Read more at http://www.smarty.net/inheritance.

  How to use

As an example, we want to create a website with different page lay-outs like I have here at my blog:

  • A default page with one column of content,
  • a page with two columns
  • and a page with three columns.

Using Template Inheritance there is no need for Global Content Blocks (GCB's) or including subtemplates in the main Core::Page template!

1. Create a new design

Open in the CMSMS Admin panel the Design Manager module, therefor you go to Layout >> Design Manager.

In the Options dropdown select Create a new Design, enter the design name and click on Submit.

2. Create and attach Stylesheets

Open in the Design Manager the tab Stylesheets and select in the dropdown Create a new Stylesheet. Fill in a name and add your styling content. In the tab Design we attach the stylesheet to the design we created above! Do this for all stylesheets you need.
This is one of the nice features of the Design Manager module, before you needed to attach the stylesheet to each template. Now only once to the Design!

Note: In this tutorial I describe the Template Inheritance method, not the styling of the (responsive) block layout. Perhaps in another tutorial...

3. Create Core::Page templates

We start with building a base Core::Page template: the simplest lay-out with just one column.

In the Design Manager you open the tab Templates where we create a new Core::Page template.
Set in the Advanced tab Listable to No, so it won't show up in the template selector in Content Manager.

Certain parts of the template we put within {block} and {/block} Smarty tags and give them unique names.

  • In the template top the default content block,
  • the main content area
  • and - as an example - an empty spot where we can later add jQuery code if we need it in a certain template.
Base Page Template
{strip}
   {process_pagedata}
   {block name='top'}
      {$content = "{content}" scope=global}
   {/block}
{/strip}<!DOCTYPE HTML>
<html lang="en">
   <head>
      {metadata}
      {cms_stylesheet}
   </head>

   <body>
      <header>
         <div class="c_full">
            <div class="grid_12"><h1>CMS Made Simple</h1></div>
         </div>
      </header>

      <nav>
         <div class="c_full">
            <div class="grid_12">{Navigator}</div>
         </div>
      </nav>

      <main>
         {block name='content'}
            <div class="c_full">
               <div class="grid_12">{$content}</div>
            </div>
         {/block}
      </main>

      <footer>
         <p>This website is proudly powered by CMS Made Simple - Copyright {custom_copyright}</p>
      </footer>
   </body>

   {block name='jquery'}{/block}

   <script>
      // Matomo/Piwik - Google Analytics code
   </script>
</html>

4. Create the Templates

Template: One Column

Now we have the base Core::Page template ready, we can create a template for one column:

{extends file='cms_template:Base Page Template'}

The base Core::Page template is included and we don't make any changes or additions...


Template: Two Columns

Again the base Core::Page template is included, but we now add a second content block. The result, we have a template with two columns:

{extends file='cms_template:Base Page Template'}

{block name='top' append}
   {$content2 = "{content block='content2'}" scope=global}
{/block}

{block name='content'}
   <div class="c_full">
      <div class="grid_6">{$content}</div>
      <div class="grid_6">{$content2}</div>
   </div>
{/block}

Template: Three Columns

Here we add two extra content blocks and have a template for three columns:

{extends file='cms_template:Base Page Template'}

{block name='top' append}
   {$content2 = "{content block='content2'}" scope=global}
   {$content3 = "{content block='content3'}" scope=global}
{/block}

{block name='content'}
   <div class="c_full">
      <div class="grid_4">{$content}</div>
      <div class="grid_4">{$content2}</div>
      <div class="grid_4">{$content3}</div>
   </div>
{/block}

5. Template: Two Columns in Two Rows with jQuery

Another example, imagine we need a template with two columns in two rows, but we also need jQuery added for a news slider.

Simply also add the jQuery block and it will be included when you use this template with a page.

{extends file='cms_template:Base Page Template'}

{block name='top' append}
   {$content2 = "{content block='content2'}" scope=global}
   {$content3 = "{content block='content3'}" scope=global}
   {$content4 = "{content block='content4'}" scope=global}
{/block}

{block name='content'}
   <div class="c_full">
      <div class="grid_6">{$content}</div>
      <div class="grid_6">{$content2}</div>
   </div>

   <div class="c_full">
      <div class="grid_6">{$content3}</div>
      <div class="grid_6">{$content4}</div>
   </div>
{/block}

{block name='jquery'}
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script type="text/javascript" src="uploads/_template/js/some.slider.js"></script>
{/block}

Well, this is all it takes... The possibilities are almost endless!
Now that I think about it, you can also use it for a multilingual website!
I recommend you try this out at the first site that you start on. I am sure you will also love it!


Buy Me A Coffee


  Show related articles:


  Comment Form

ReviewManager

Click here to open the form 

ReviewManager

  4 Comments

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

The power of Template Inheritance and the CMSMS Design Manager

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.19
  Last updated: 26-12-2019
  Comments: 4
  http://cms.ms/AJ02


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!