What's new in Mys v1.3.3: New Template System

Forum
Last Post
Threads / Messages

Hall of Famer

Administrator
Staff member
Administrator
Joined
Dec 15, 2008
Messages
4,563
Points
48
Location
United States
Mysidian Dollar
214,216
As many of you already knew, I've been working on Mys v1.3.3 lately, and this time I am bringing up a new template system to showcase all of you. Well, its indeed new but may not look that much different. So dont be way too scared.

To begin with, lettuce review what is inside the template file of Mys v1.3.2 and older versions. Heres the source code in the default theme's template file:

PHP:
<!DOCTYPE html>

<head>
<title>:BROWSERTITLE:</title>
<link rel="stylesheet" href="templates/main/media/style-city.css" type="text/css" />
<link rel="stylesheet" href="css/menu.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="media/dropdown_ie.css" />
<![endif]-->

</head>

<body>
<div id="wrapper">
<table cellspacing="0" cellpadding="0">
<tr><th colspan="2">:LINKSBAR:</th></tr>
<tr><td colspan="2" id="image"><span><a href="index.php">Mysidia Adoptables v1.3.1</a></span></td></tr>
<tr><td id="menu">
:SIDEFEED:


</td><td id="content">
<h1>:ARTICLETITLE:</h1>
<p>:ARTICLECONTENT:</p>

</td></tr>
<tr><td colspan="2" id="footer">
<p>&#9733; Powered by <a href="http://www.mysidiaadoptables.com">Mysidia Adoptables v1.3.2</a> &#9733;</p>
</td></tr>


</table>
</div>

</body>

</html>
It looks fine the way it is, and I am sure many of you are used to this style already. There is a problem though... Its difficult to insert PHP code into the template. Sure we can use placeholders for PHP variables, but it becomes cumbersome when we wish to do more than just writing PHP variables to HTML. Another issue is with URL rewrite, which messes up relative urls in the template file. For this reason, we believe it is time to introduce a new template system.

Here comes this Smarty Template System, which may seem somewhat alien to many of you. It really aint that much different from HTML, but its interpreted by Smarty engine to allow convenient insertion of PHP variables and even arrays, objects and functions. Below is the source code new version of the main theme with Smarty Template System:

Header file:
PHP:
<html>
<head>
<title>{$browser_title}</title>
{$header->loadFavicon("{$home}favicon.ico")}
{$header->loadStyle("{$home}{$temp}{$theme}/media/style-city.css")}
{$header->loadStyle("{$home}{$css}/menu.css")}
<!--[if lte IE 6]>
{$header->loadStyle("{$home}{$css}/media/dropdown_ie.css")}
<![endif]-->
</head>
Template file:
PHP:
{include file="{$root}{$temp}{$theme}/header.tpl"}

<body>
<div id="wrapper">
<table cellspacing="0" cellpadding="0">
<tr><th colspan="2">{$menu}</th></tr>
<tr><td colspan="2" id="image"><span><a href="{$path}index">{$site_name}</a></span></td></tr>
<tr><td id="menu">
{$sidebar}


</td><td id="content">
<h1>{$document_title}</h1>
<p>{$document_content}</p>

</td></tr>
<tr><td colspan="2" id="footer">{$footer}</td></tr>

</table>
</div>

</body>

</html>
There are a few differences to note. First of all, the extension of template files has been changed into .tpl file, interestingly tpl stands for template.

Second, the entire template file is now splitted into a header and a body template file, although this does not make much difference at this point.

On the other hand, old placeholders :VAR: has now been replaced by the new format {$var}. $var does not have to be a scalar variable, it can be an array or object. You can access array elements, object properties and methods in the following way:

PHP:
//Array
{$array.element1} {$array.element2}

//Object
{$object->property1} {$object->property2}
{$object->method1()} {$object->method2($param)}
So yeah, it gives us one more degree of flexibility this way. Incase you have noticed, I am calling the header object's method loadFavicon() and loadStyle() to load favicon and stylesheets into the template header(And yes, with Mys v1.3.3 you can specify a site Favicon!). There's another useful method called loadScript(), and it should be easy to see that this method allows you to load javascript files into your site.

There are several important template variables that you need to keep in mind. $root and $home represent the root directory of your adoptable site, $root is used to include php and tpl files, while $home is used to load favicon, stylesheet and javascript. $temp is the template directory, $css is the additional css directory, $js is the javascript directory, and $theme is the theme folder. Make good use of them to simplify your work considerably.

What do you think? I know for some of you it may take a bit of time to get used to the new template system, but in a long run you will see the benefits. Right now I am working on other new features for Mys v1.3.3, if you wanna know more please follow my blog entries. Have a great weekend everyone.

Hall of Famer
 

Similar threads

Users who are viewing this thread

  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,267
Messages
33,049
Members
1,602
Latest member
BerrieMilk
BETA

Latest Threads

Latest Posts

Top