Allow user to define multiple page layouts with one Template

In this simple tutorial, we find out how easy it is to create flexible Templates within CMSMS, thanks to the CGContentUtils module and a bit of CSS.

preview00.png

One of the great things about CMSMS is how easy and flexible it is to define as many different templates for use within your website as you wish. You can carry on doing this in an infinite number of ways, but before long you may end up with too many Templates, which could become confusing and tiresome to maintain.

Wouldn't it be neater and smarter to instead have a smaller set of Templates, that can be adapted by the user within the Admin Console? With the CGContentUtils module, and a bit of CSS, it's very easy.

First, download CGContentUtils. Then: Extensions > Calguys Content Utilities > Add a New Block. Fill out the following fields:

Name: page-layout
Prompt: Page Layout
Type: Dropdown
Options:
Content Right|none
Content Left|alt-layout
Full Width|full-width

(Note: the '|' above are pipe characters.)

Next, create this a new blank Template (Layout > Templates > Add New Template), and paste in this code:

{process_pagedata}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>{sitename} - {title}</title>
  {literal}
  <style>
    #main-content_holder {float:left;width:900px;}
    /*content right, aside left*/
    .main-content {
    float:right;
    clear:right;
    width:550px;
    height:100px;
    background:red;
    }
    #aside {
    float:left;
    width:350px;height:100px;
    background:green;
    }
    /*content left, aside right*/
    .alt-layout .main-content {float:left;}
    .alt-layout #aside {float:right;}
    /*1 column class*/
    .full-width .main-content {width:100%;}
  </style>
  {/literal}
</head>
<body>
  {content_module module='CGContentUtils' block='page-layout' name='page-layout' label='Page Layout' assign='userc' value='name'}
  <div id="main-content_holder" class="{if $userc eq 'full-width'}full-width{elseif $userc eq 'alt-layout'}alt-layout{else}none{/if}">
    <div class="main-content">
      {content}
    </div>
    
    {if $userc eq "full-width"}
      {else}
      <div id="aside"></div>
    {/if}
  </div>
</body>
</html>

Finally, create a standard page and assign this template to it. You will notice that the three options we created earlier will appear within Edit Page: 'Content Left', 'Content Right' & 'Full Width'. Alter each of these options, save the page, and observe the output in a browser. The user is able to alter the page layout by selecting one of these options, and do all of the normal content editing tasks too.

All that is happening with each option selected ($userc), is an associated class is being added to the 'main-content_holder' DIV, and the styles for each of these classes ('alt-layout', 'full-width' and 'none' - as defined in the CSS in the <head>) are making the page render differently.

Also, if the user selects 'Full Width', a further condition tells the template not to render another element on the page altogether (the 'aside' DIV).

As you will see, this is a very simple example, but with a bit of creative CSS and the CGContentUtils module, you can create much more flexible Templates than you perhaps might have first thought. Give it a try!

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Comments