Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

Smarty 3: Add to head with Template Inheritance

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7368
Location: Lincoln Nebraska, USA

PostPosted: Mon Aug 30, 2010 8:52 pm    Post subject: Smarty 3: Add to head with Template Inheritance Reply with quote

An age old problem. You are creating an HTML page, and the page requires some specific javascript or CSS files to be loaded. We would like to load these in the <head></head> of the document, but the problem is we have already gone past that point of rendering. So we begin the process of hacking the header template to make an exception for our rule. This can get quite messy. So it's time to make this task an easy one, with Template Inheritance, new to Smarty 3.

Before template inheritance, we were stuck with using includes to use repeated content, such as headers and footers. Here is an example:

THE OLD WAY, NO INHERITANCE:

header.tpl:

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


footer.tpl:

Code:
</body>
</html>


mypage.tpl:

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


output:

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


And now, we'll rewrite this with template inheritance:

THE NEW WAY, WITH TEMPLATE INHERITANCE

layout.tpl:

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


mypage.tpl:

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


output:

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


As you can see, your layout is defined in one template, and your child templates extend the parent, and replace defined blocks of content.

So how do we address the need to have special scripts/css loaded in the header? Simply add a new block to the layout (parent), and use it in the child template(s):


layout.tpl:

Code:
<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:

Code:
{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:

Code:
<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 have now passed control of specific header file loading to the child template(s). This is the basics of template inheritance. You can quickly see how it makes hard/messy problems easy to handle!
Back to top
View user's profile Send private message Visit poster's website
HellMind
Smarty n00b


Joined: 04 Aug 2011
Posts: 1

PostPosted: Thu Aug 04, 2011 8:13 pm    Post subject: Reply with quote

{extends file=layout.tpl}
Should be
{extends file="layout.tpl"}
Or with '
Back to top
View user's profile Send private message
CircleDev
Smarty Rookie


Joined: 27 Jul 2011
Posts: 7

PostPosted: Mon Nov 07, 2011 1:44 pm    Post subject: Reply with quote

Thanks for this awesome tip!.

I am transitioning a completely php (heavily embedded logic) management system using this inheritance method you outlined and it makes everything so much simpler and easier.

Thanks again for the great tip from a smarty noob Wink
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Tips and Tricks All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP