Get Smarty

Donate

Donate Bitcoin Bitcoin
Paypal

Smarty Icon

You may use the Smarty logo according to the trademark notice.

Smarty Template Engine Smarty Template Engine

For sponsorship, advertising, news or other inquiries, contact us at:

Sites Using Smarty

Largest classified with thousands of ads at Shoppok

Buy cheap eyeglasses from Cheapglasses123.com and save up to 80%.

Buy prescription glasses from www.australiaglasses.com and save.

Cheap Glasses Now On Sale at GlassesPeople.com. Starts At $7.95.

Where to buy discount wedding dresses and cheap smart dresses free shipping - Weddingdresstrend.com

Find Wedding Dresses Online at Canada from Ca-dresses.com

Find your local domestic cleaner

Brautkleider auf Topwedding.de

Best Wedding Dresses Australia at AuBridalDresses.com

Find free files to download on allwhatyouwant.net

Advertisement

Template Inheritance

Template inheritance is an approach to managing templates that resembles object-oriented programming techniques. Instead of the traditional use of {include ...} tags to manage parts of templates, you can inherit the contents of one template to another (like extending a class) and change blocks of content therein (like overriding methods of a class.) This keeps template management minimal and efficient, since each template only contains the differences from the template it extends.

A Use Case Demonstration

The challenge: Let's say we are creating an HTML page, and it requires some custom Javascript/CSS files loaded within the <head></head> of the document. The problem is that this is defined in the header.tpl, which was included further up the page. There are many ways to address this, but they can get quite messy. Let's make this task an easy one, with Template Inheritance, new to Smarty 3.

Before template inheritance, we were stuck with using {include ...} tags to share content such as headers and footers. Here is an example:

Example Without Inheritance

header.tpl

<html>
<head>
  <title>{$title|default:"Default Page Title"}</title>
</head>
<body>

footer.tpl

</body>
</html>

mypage.tpl

{include file="header.tpl" title="My Page Title"}
My HTML Page Body goes here
{include file="footer.tpl"}

output of mypage.tpl

<html>
<head>
  <title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html>

Now let's rewrite this with template inheritance:

Example With Inheritance

layout.tpl

<html>
<head>
  <title>{block name=title}Default Page Title{/block}</title>
</head>
<body>
{block name=body}{/block}
</body>
</html>

mypage.tpl

{extends file="layout.tpl"}
{block name=title}My Page Title{/block}
{block name=body}My HTML Page Body goes here{/block}

output of mypage.tpl

<html>
<head>
  <title>My Page Title</title>
</head>
<body>
My HTML Page Body goes here
</body>
</html>

Instead of managing our page layout in several files (header.tpl, footer.tpl, etc.), we now manage it in one cohesive template (layout.tpl), and define the changeable blocks of content with {block ...} tags. Now you can simply extend the layout.tpl (which basically copies it) and then customize any of the defined block elements. You can have any number of child templates chained together, thus the concept of inheritance.

So back to our initial challenge, how do we address the need to have custom Javascripts/CSS loaded in the header? Simply add a new block to the layout.tpl, and customize it in the child template:

layout.tpl

<html>
<head>
  <title>{block name=title}Default Page Title{/block}</title>
  {block name=head}{/block}
</head>
<body>
{block name=body}{/block}
</body>
</html>

mypage.tpl

{extends file="layout.tpl"}
{block name=title}My Page Title{/block}
{block name=head}
  <link href="/css/mypage.css" rel="stylesheet" type="text/css"/>
  <script src="/js/mypage.js"></script>
{/block}
{block name=body}My HTML Page Body goes here{/block}

output of mypage.tpl

<html>
<head>
  <title>My Page Title</title>
  <link href="/css/mypage.css" rel="stylesheet" type="text/css"/>
  <script src="/js/mypage.js"></script>
</head>
<body>
My HTML Page Body goes here
</body>
</html>

As you can see, we can now easily customize header content from the child template. This is the basics of template inheritance. It cleans up template management, and makes tough problems trivial!

Advertisement

Sponsors [info]

UK Web Hosting @webhost.uk.net
Best Web Hosting @rshosting.com
Web Hosting UK @webhostinguk.com
Unlimited Web Hosting @infrenion.com
App Entwicklung @morphodo.com
GoDaddy Coupon @buy-hosting.net
First Click Internet Marketing @fcinternetmarketing.com