CMS Made Simple 1.6: Learning Smarty Basics

Exclusive offer: get 50% off this eBook here
CMS Made Simple 1.6: Beginner's Guide

CMS Made Simple 1.6: Beginner's Guide — Save 50%

Create a fully functional and professional website using CMS Made Simple

$26.99    $13.50
by Sofia Hauschildt | March 2010 | Beginner's Guides Content Management Open Source Web Development

In this article by Sofia Hauschildt, author of CMS Made Simple 1.6: Beginner's Guide, you will learn the basics of Smarty. Creating professional sophisticated designs is easier using Smarty. With the powerful combination of Smarty and HTML, there are no limits to the flexibility of the sites you design.

Working with Smarty Variables

Smarty variables are much simpler than complex Smarty plugins. They are placeholders that contain plain information about the actual page ID, page alias, or position of the page in the hierarchy. Some Smarty variables that you are not aware of, are already defined in your template. You do not need to know or remember all of them if you know how you can figure out their names and values.

Time for action – getting Smarty variables

We are going to get the number of the page in the page hierarchy to integrate this information into the design of the page title. How do we figure out the name of the Smarty variable that contains this information? We can get it from the template as follows:

  1. In the admin console, click on Layout | Templates.
  2. Open the Business World template for edit and add the plugin {get_template_vars} just before the last tag, as shown in the following code snippet:
      <!DOCTYPE html>
      <html>
      <head>
      <title>{title} - {sitename}</title>
      {stylesheet}
      {metadata}
      <meta name="description" content="" />
      </head>
      <body>
      ...........
      {get_template_vars}
      </div>
      </body>
      </html>
  3. Click on Apply and then click on the magnifying glass icon on the top-right corner of the admin console to see the result. It should now look like the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

What just happened?

With the Smarty {get_template_vars} plugin, you displayed all Smarty variables available in your template. In the list of variables on each line, one variable is displayed with its name and its value separated by an equals sign. These values change from page to page. For example, the variable with the name friendly_position contains the position of the page in the page hierarchy. If you navigate to other pages, you will see that the value of this variable is different on every page.

How do you add a variable in your template? Smarty variables are enclosed in curly brackets as well, but unlike the Smarty plugins, they have a dollar sign at the beginning. To use the variable friendly_position, you just need to add the following Smarty tag to your template:

{$friendly_position}

You can delete the {get_template_vars} plugin now. It is helpful for you to see which Smarty variables exist and what values are stored there. You can add this plugin again, when you need to look for another variable.

Let us use the information we have learned about Smarty plugins and Smarty variables by combining them both to create a title of the page. Open the template Business World (Layout | Templates)for editing and change the title of the page between the body tags and before the tag {content} shown as follows:

<h1><span>{$friendly_position}</span> {title}</h1>

Then open Business World Style Sheet for editing (Layout | Stylesheets), and add a CSS style to format the title of the page:

h1 span 
{
color: #ffffff;
background: #cccccc;
padding: 0 5px;
}

The result of the above formating should look as shown in the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

You  can use any Smarty variable from the template, except for variables with the value Array(). We will look at these special variables in the following section.

Controlling output with the IF function

You can create numerous templates for your website and assign different templates to different pages. This is useful if you use layouts with a different number of columns. However, sometimes there is only a tiny difference between the templates, and it is not efficient to create a new template each time you need only slight changes.

For example, imagine you would like to display the last editor of the page, as we did with the {last_modified_by}tag. It is a useful piece of information on most pages but we would like to hide it on the contact page. You do not need to create a new template where this tag is not added. For such slight changes, it is better to know how to control the output in the same template with an IF structure.

Time for action – displaying tags in dependence of the page

We  are going to hide the {last_modified_by} tag on the page Contact Us. However, it has to be still displayed on all other pages.

  1. Open the template Business World for editing (Layout | Templates).
  2. Add the Smarty IF code around the {last_modified_by…} tag, as shown in the following code snippet:
      <!DOCTYPE html>
      <html>
      <head>
      <title>{title} - {sitename}</title>
      {stylesheet}
      {metadata}
      <meta name="description" content="" />
      </head>
      <body>
      <div id="container">
      <div id="header">
      businessWorld
      </div>
      <div id="top-navi">
      {menu number_of_levels="1" template="minimal_menu.tpl"}
      </div>
      <div id="content">
      <h1>{title}</h1>
      {content}
      {if $page_alias neq "contact-us"}
      <p>Last modified by {last_modified_by format=
      "fullname"}</p>

      {/if}
      </div>
      <div id="sidebar">
      {menu start_level="2" template="minimal_menu.tpl"}
      </div>
      <div id="footer">
      2009 businessWorld
      </div>
      </div>
      </body>
      </html>
  3. Click on Apply and then click on the magnifying glass icon in the top-right corner of the admin console to see the result.

What just happened?

The IF code that you have added around the paragraph containing the last modification causes CMS to check the page alias of the displayed page. If the page alias is equal to "contact-us", then everything between the IF structure is not shown, otherwise the information about the last modification is displayed.

You have seen from the previous section that CMS knows what page of our website is currently being displayed. This information is stored in the Smarty variable {$page_alias}. With the built-in IF function, you can compare the page alias of the actual page with the page alias of the page Contact Us. If the value of the variable {$page_alias} is NOT equal to contact-us, then everything between the IF tags is displayed. If the page alias is equal to contact-us, then nothing is displayed. In this way, you can control the output of the template depending on the page alias.

 

The abbreviation neq (meaning not equal) between the variable {$page_alias} and the value contact-us is called a Qualifier. Qualifiers are used to build a logical condition in the IF code. The result of the logical condition can be true or false. If the result of the IF condition is true (and it is true if the page alias IS NOT EQUAL to contact-us), then everything placed in between the IF tags is displayed. If the result of the IF condition is false (and it is only false if the page alias IS EQUAL to contact-us), then everything between the IF tags is suppressed.

There are more qualifiers that can be used to build logical conditions in Smarty. Some of them are listed in the following table:

The IF structure is a useful tool for handling slight changes in one template depending on the page name or the position in the hierarchy. In the preceding example, you saw that you can use every variable from the template to build a logical condition.

Creating navigation template with Smarty loop

You can also change the HTML markup of the navigation. Before you can learn this principle, you have to understand some Smarty basics.

When we added the top navigation to the website, we used a standard template for the navigation. It displays the navigation as an unordered HTML list. Imagine that you need a kind of footer navigation where all the links from the top navigation are shown. You do not need an unordered HTML list in this case. You just would like to show all links in one line separated by a pipe (|) shown as follows:

Our Company | Announcements | History | Team | Photo gallery ……

This means that you need a completely different HTML markup for this kind of navigation. The great advantage of CMS Made Simple is the ability to display a template in template. While you can use the main template to define the whole layout for the page, the  HTML markup of the navigation is saved in its own template. This navigation template is just a piece of the HTML code that is added to the main template at the place where the tag {menu} is placed.

CMS Made Simple 1.6: Beginner's Guide Create a fully functional and professional website using CMS Made Simple
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Time for action – creating a menu template

We need a simple footer navigation where all pages of the website are listed, separated by a pipe (|) sign, as shown earlier.

  1. In the admin console of the page, click on Layout | Menu Manager.
  2. Click on Add Template.
  3. Fill in the fields for New Template Name and Template Content, as shown in the following screenshot :
  4. CMS Made Simple 1.6: Beginner's Guide

  5. Click on Submit to save the new menu template.
  6. Open the Business World template for editing (Layout | Templates).
  7. Add footer navigation with the {menu} tag, and provide the name of the menu template, as shown in the following code snippet:
      <!DOCTYPE html>
      <html>
      <head>
      <title>{title} - {sitename}</title>
      {stylesheet}
      {metadata}
      <meta name="description" content="" />
      </head>
      <body>
      <div id="container">
      <div id="header">
      businessWorld
      </div>
      <div id="top-navi">
      {menu number_of_levels="1" template="minimal_menu.tpl"}
      </div>
      <div id="content">
      <h1>{title}</h1>
      {content}
      {if $page_alias neq "contact-us"}
      <p>Last modified by {last_modified_by
      format="fullname"}</p>
      {/if}
      </div>
      <div id="sidebar">
      {menu start_level="2" template="minimal_menu.tpl"}
      </div>
      <div id="footer">
      <p>{menu template="footer_menu"}</p>
      2009 businessWorld
      </div>
      </div>
      </body>
      </html>
  8. Click on Apply and see the footer navigation on your website. It should look as shown in the following screenshot:

CMS Made Simple 1.6: Beginner's Guide

What just happened?

Yo u have just created a new menu template. In the menu template, you have used some Smarty code that needs to be explained. The most important part in the code is the Smarty variable $nodelist. It is not an ordinary Smarty variable like the ones we have already learned. This variable is an array. It means that more than one value is saved in it. This variable contains all the information, such as menu texts or URLs of all active pages of our website. With the built-in Smarty function foreach, we can run through all the values of this variable and display the same piece of HTML code for each page. Let us see exactly how a loop works.

foreach goes through every single page saved in the variable {$nodelist} and prints the HTML code placed between the foreach tags as many times as there are pages found in the variable. For each run, the values for the single page are saved in the variable $node. We name and create this variable with parameter item=node in the foreach tag. The loop starts its run with the first menu item—the page Our Company. At this point, the menu text and URL are saved in the variable $node. We can reach the required information with {$node->menutext} and {$node->url} and use the tags in the HTML code. With the next (second) run, the next page is saved in the variable $node. So beginning with the second run, another menu text and URL is pasted into the same HTML code. The foreach loop runs through every page and stops automatically when no more pages are found.

Footer  navigation displays all pages independent of their position in the hierarchy. You can limit the footer navigation only to the first level as well. Do it the same way you did it with the top navigation. Use parameter number_of_levels in the tag {menu} shown as follows:

{menu number_of_levels="1" template="footer_menu"}

foreach loops are a powerful way to construct any form of navigation you can imagine. This way, you can use images instead of text in your navigation.

One more example, how a graphical navigation can be created, is as shown:

{foreach from=$nodelist item=node}
<a href="{$node->url}">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="uploads/design/{$node->alias}.jpg"
alt="{$node->menutext}" border="0" />
</a>
{/foreach}

To understand what HTML is produced by the preceding Smarty code, in your mind, replace the bold Smarty tags with the actual values of a page, for example, Contact Us:

<a href="contact-us">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="uploads/design/contact-us.jpg" alt="Contact Us" />
</a>

As the previous code is placed in the foreach loop, the markup will be repeated for every page. You can see that for the graphical example to work, you will need to create a JPG file for every page. The name of the files has to correspond to the page alias. In our example, for the top navigation, you will need five images:

  • our-company.jpg
  • products.jpg
  • client-center.jpg
  • contact-us.jpg
  • sitemap.jpg

Create the images (buttons) in the graphics editing program of your choice and upload them to the uploads/design directory on your web server. Create a new menu template with the name graphical_menu, and add the Smarty foreach code into it, as shown earlier. Then replace the top navigation in the main template (Layout | Templates) with the following line:

{menu number_of_levels="1" template="graphical_menu"}

Now, the navigation is made of graphics instead of text.

There is even more information about each page available in menu template which is given in the following table:

With the information given, you can now enhance your navigation. For example, you can add the HTML attribute target to consider if the link should open in the same window or in the new one.

If you would like to add a special CSS class to the current page, then you will use an IF code within the foreach tags. See how you can combine both structures:

{foreach from=$nodelist item=node}
<a href="{$node->url}" {if $node->current}class="current"{/if}
>{$node->menutext}</a> |
{/foreach}

This IF code will add class="current" to the HTML tag <a> only to the link of the page that is currently displayed.

If you would like to know more about Smarty, use the documentation and support forum at http://www.smarty.net.

Exporting templates

Once your theme is finished, you can export it from CMS Made Simple. Exporting a theme means making an XML file containing template(s), attached stylesheets, and optionally menu templates. It also includes all images used in HTML or CSS. This XML file can be saved as a backup of your design, http://themes.cmsmadesimple.org, or to hand it over to your customer.

Time for action – displaying tags in dependence of the page

  1. In the admin console, click on Layout | Theme Manager.
  2. Select the checkbox on the line where the Business World template is, and enter a name in the field Export Theme As:
  3. CMS Made Simple 1.6: Beginner's Guide
  4. Click on Export.
  5. In the download window of the browser, choose where on your hard drive this XML file should be saved.

You can either open the XML file or save it as backup for your design.

Have a go hero – creating custom templates

Now, it is your turn to create a design for your website of any complexity. If the design can be sliced into HTML and CSS templates, then it can be converted to CMS Made Simple.  There are no restrictions in using technologies such as JQuery, Flash, or even frames.

Summary

In this article, you learned a lot about Smarty tags. You saw how this easy and powerful language can help you to customize your template. Understanding Smarty means that you can get complete flexibility with your design. You also learned some Smarty terms that are important for understanding how Smarty can be used.


If you have read this article you may be interested to view :

CMS Made Simple 1.6: Beginner's Guide Create a fully functional and professional website using CMS Made Simple
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Sofia Hauschildt

Sofia Hauschildt is a tutor for web mastering and web development, who started designing and developing professional websites in 1995, just before her graduation in computer science. With experience as a Data Warehouse developer and ERP consultant she became a self-employed tutor. During her career she has been contracted by IT and management academies, the German army, several city administrations, and international companies like Siemens. Her work as a tutor is always focused on practical training combined with a theoretical background in order to get fast and handy results.  In her publications she shares not only solid knowledge but her personal experience and shows a simple and powerful way of creating websites for ambitious beginners. Building websites is an amazing chance to communicate with the whole world and to discover it as well.

Books From Packt


Drupal 6 Performance Tips
Drupal 6 Performance Tips

Building Telephony Systems with OpenSIPS 1.6
Building Telephony Systems with OpenSIPS 1.6

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Drupal 6 Attachment Views
Drupal 6 Attachment Views

Grok 1.0 Web Development
Grok 1.0 Web Development

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Apache Roller 4.0 – Beginner's Guide
Apache Roller 4.0 – Beginner's Guide


Your rating: None Average: 3.3 (3 votes)
A "Beginner's Guide" for french ? :-) by
Hello. Very interested by your book that has already very good reviews here and there, I would like if you imagine to make a french version in a clode future ? Thank you very much Stephane

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
y
r
5
8
f
s
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software