The power of Template Inheritance and the CMSMS Design Manager

  Previous article Next article  

The power of Template Inheritance and the CMSMS Design Manager

  Article optimized for CMSMS 2.x

  Author: Rolf
  Last tested in: CMSMS 2.1.6
  Last updated: 01-01-2016
  Comments: 0

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. 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 type="text/javascript">
      // 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!


A2 Webhosting CMS Made Simple


A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]

CMS Made Simple 2.1.6 - Tutorials, tips and tricks - CMSMS 2.1.6

The power of Template Inheritance and the CMSMS Design Manager

  Article optimized for CMSMS 2.x

  Author: Rolf
  Last tested in: CMSMS 2.1.6
  Last updated: 01-01-2016
  Comments: 0

A2 Webhosting CMS Made Simple