Geek Moot '09 -- Smarty 101

Smarty 101
What? Why? How?

Ted Kulp - Shift Refresh, Inc.

What?
Arguably the most widely used PHP templating
system

What?
system

Created by Andrei Zmievski

What?
system


Tightly integrated into the CMSMS core

What?
system



Seamlessly used on all page, module and other
templates throughout the system

What?
system



Seamlessly used on all page, module and other
templates throughout the system

Released under the LGPL -- basically means it’s
pretty liberally licensed

Why?
Separates the display logic cleanly from the
controller logic

Why?
controller logic

Much safer by not allowing full range of PHP
functionality in a template

Why?
controller logic


Allows for many tricks to make complicated
display easier

Why?
controller logic


display easier

Get a lot of web-friendly functionality for free

Why?
controller logic


display easier

Get a lot of web-friendly functionality for free

And mainly...

Why?
Ugly Not So Much
<html> <html>
<head> <head>
<title><?php echo $title; ?></title> <title>{$title}</title>
<?php cms_display_stylesheet() ?> {stylesheet}
<?php cms_display_metadata() ?> {metdata}
</head> </head>
<body> <body>
<div id=”body”> <div id=”body”>
<?php cms_display_content(‘content_en’) ?> {content}
</div> </div>
<div id=”footer”> <div id=”footer”>
<?php printf(‘%m %d %Y’, cms_page_data(‘date_modiﬁed’)) ?> {modiﬁed_date|cms_date_format}
</div> </div>
</body> </body>
</html> </html>

It’s just plain easier to read

Absolute musts

Literal tags

Getting available variables

Absolute musts

Literal tags

Getting available variables

Modiﬁers

Literal Tags

Escapes javascript

Literal Tags

Escapes javascript

Escapes CSS

Literal Tags

Escapes javascript

Escapes CSS

Really... escapes anything with { or } in it.
Smarty gets confused

Literal Tags

Escapes javascript

Escapes CSS

Really... escapes anything with { or } in it.
Smarty gets confused

So literal tags basically have Smarty ignore
everything between

Literal Tags
<script type="text/javascript">
/ Get all of the tabs and add an onmouseover
/
/ event listener to each tab
/
var tabs = getElementsByClass('tab',
document.getElementById('featuresarea-tabs'),'li') ;
for(i=0; i<tabs.length; i++)
{
! var this_tab = ! document.getElementById(tabs[i].id);
! this_tab.onmouseover = function(){
! ! showtab(this.id);
! ! document.getElementById(this.id).className += " selected";
! };
}!
//]]>
</script>

Literal Tags
{literal}
<script type="text/javascript">
/ Get all of the tabs and add an onmouseover
/
/ event listener to each tab
/
var tabs = getElementsByClass('tab',
document.getElementById('featuresarea-tabs'),'li') ;
for(i=0; i<tabs.length; i++)
{
! var this_tab = ! document.getElementById(tabs[i].id);
! this_tab.onmouseover = function(){
! ! showtab(this.id);
! ! document.getElementById(this.id).className += " selected";
! };
}!
//]]>
</script>
{/literal}

The Immortal Question

How do I know what variables are available
to me in my template?

Answer

{get_template_vars} !!!!!!!!

Gives you all the variables that are available
to that template. It’s a must have.

Know It

Use It

Love It

{get_template_vars}
On a regular page, outputs something like:
SCRIPT_NAME = /1.6.x/index.php
app_name = CMS
sitename = CMS Made Simple Site
lang =
encoding = utf-8
gCms = Object
cgsimple = Object
content_obj = Object
content_id = 69
page = get_template_vars
page_id = get_template_vars
page_name = get_template_vars
etc.

{get_template_vars}
On a regular page, outputs something like:
SCRIPT_NAME = /1.6.x/index.php
app_name = CMS
sitename = CMS Made Simple Site
lang =
encoding = utf-8
gCms = Object
cgsimple = Object
content_obj = Object
content_id = 69
page = get_template_vars
page_id = get_template_vars
page_name = get_template_vars
etc. Which means you can use:
{$page_name}
in this template and get the
page’s name.

Modiﬁers
Take output and modiﬁes it directly in
Smarty.

Modiﬁers
Smarty.

Allows multiple modiﬁers to be chained.

Modiﬁers
Smarty.


Format: {$variable|modiﬁer_function:extra:parameters}

Modiﬁers
Smarty.



Chaining: {$variable|modiﬁer_function|another_one:with:params}

Modifiers
Smarty.



Chaining: {$variable|modifier_function|another_one:with:params}

Smarty comes with a lot of nice modifiers.
See chapters 5 and 6 for some examples.

Examples
{$title|upper} -- Convert the string to upper
case

Examples
case

{$title|truncate:40:’...’} -- Truncate the string at
40 characters and put an ellipsis on it

Examples
case


{$smarty.now|date_format:”%Y/%m/%d”} -- Get
the current date and give it a nice formatting

Examples
case


{$smarty.now|date_format:”%Y/%m/%d”} -- Get
the current date and give it a nice formatting

{$variable|var_dump} -- Any PHP function will
work

Tricks and Examples

{capture}

{cycle}

{mailto}

{capture}

Allows you capture output of smarty tags
and variables and used it elsewhere

Useful for testing if something has output
data

Allows you to get around issues where path
of execution isn’t correct

{capture} Example

Div should only show if there is content

{capture name=outp}{content block=‘sideblock’|trim}{/capture}
{if $smarty.capture.outp}
<div id=”sideblock”>
{$smarty.capture.outp}
</div>
{/if}

{cycle}

Used to alternate a set of values

Useful for alternating classes - ex.

Alternating table rows

Multiple columns

{cycle} Example

Split display of items into 2 columns

{foreach from=$values item=‘the_item’}
<div class=”{cycle values=”col1,col2”}”>
{$the_item}
</div>
{/foreach}

{escape}

Encodes a variable in various formats -- ex.

Encode an email address so that it’s not
easily scraped by a spam bot

Encode output to make sure it’s valid xhtml

{escape} example

Make a legible email address more difﬁcult
to read via the source.

{$user.email|escape:”hexentity”}

(Converts email@domain.com to %62%64, etc.)

Resources

http://smarty.net/manual/en (Please read
chapters 3 and 4 at a minimum!!!)

http://wiki.cmsmadesimple.org

Geek Moot '09 -- Smarty 101

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Geek Moot '09 -- Smarty 101

Ähnlich wie Geek Moot '09 -- Smarty 101 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Geek Moot '09 -- Smarty 101