SlideShare a Scribd company logo
Smarty 101
What? Why? How?


Ted Kulp - Shift Refresh, Inc.
What?
What?
Arguably the most widely used PHP templating
system
What?
Arguably the most widely used PHP templating
system

Created by Andrei Zmievski
What?
Arguably the most widely used PHP templating
system

Created by Andrei Zmievski

Tightly integrated into the CMSMS core
What?
Arguably the most widely used PHP templating
system

Created by Andrei Zmievski

Tightly integrated into the CMSMS core

Seamlessly used on all page, module and other
templates throughout the system
What?
Arguably the most widely used PHP templating
system

Created by Andrei Zmievski

Tightly integrated into the CMSMS core

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

Released under the LGPL -- basically means it’s
pretty liberally licensed
Why?
Why?
Separates the display logic cleanly from the
controller logic
Why?
Separates the display logic cleanly from the
controller logic

Much safer by not allowing full range of PHP
functionality in a template
Why?
Separates the display logic cleanly from the
controller logic

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

Allows for many tricks to make complicated
display easier
Why?
Separates the display logic cleanly from the
controller logic

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

Allows for many tricks to make complicated
display easier

Get a lot of web-friendly functionality for free
Why?
Separates the display logic cleanly from the
controller logic

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

Allows for many tricks to make complicated
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_modified’)) ?>   {modified_date|cms_date_format}
</div>                                                       </div>
</body>                                                      </body>
</html>                                                      </html>




                      It’s just plain easier to read
Absolute musts
Absolute musts


Literal tags
Absolute musts


Literal tags

Getting available variables
Absolute musts


Literal tags

Getting available variables

Modifiers
Literal Tags
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.
Modifiers
Modifiers
Take output and modifies it directly in
Smarty.
Modifiers
Take output and modifies it directly in
Smarty.

Allows multiple modifiers to be chained.
Modifiers
Take output and modifies it directly in
Smarty.

Allows multiple modifiers to be chained.

Format:   {$variable|modifier_function:extra:parameters}
Modifiers
Take output and modifies it directly in
Smarty.

Allows multiple modifiers to be chained.

Format:   {$variable|modifier_function:extra:parameters}


Chaining:   {$variable|modifier_function|another_one:with:params}
Modifiers
Take output and modifies it directly in
Smarty.

Allows multiple modifiers to be chained.

Format:   {$variable|modifier_function:extra:parameters}


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
Examples
{$title|upper} -- Convert the string to upper
case
Examples
{$title|upper} -- Convert the string to upper
case

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

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

{$smarty.now|date_format:”%Y/%m/%d”} -- Get
the current date and give it a nice formatting
Examples
{$title|upper} -- Convert the string to upper
case

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

{$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 difficult
         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
Thank you!

More Related Content

PPTX
jQuery PPT
PPTX
jQuery from the very beginning
PDF
Javascript
PDF
Making Sense of Twig
ODP
Drupal Best Practices
PPT
Jquery presentation
PPT
PDF
Shortcodes In-Depth
jQuery PPT
jQuery from the very beginning
Javascript
Making Sense of Twig
Drupal Best Practices
Jquery presentation
Shortcodes In-Depth

What's hot (15)

PPT
Система рендеринга в Magento
KEY
PHP security audits
PDF
Introduzione JQuery
PPTX
Maintainable JavaScript 2012
PDF
jQuery in 15 minutes
PPT
Php Tutorial | Introduction Demo | Basics
KEY
前端概述
KEY
jQuery Plugin Creation
PPTX
Phphacku iitd
PPTX
Let's write secure Drupal code! - DrupalCamp Oslo, 2018
KEY
jQuery Anti-Patterns for Performance & Compression
PDF
jQuery Essentials
PDF
Plugin jQuery, Design Patterns
PDF
Make your own wp cli command in 10min
PDF
Curso Symfony - Clase 2
Система рендеринга в Magento
PHP security audits
Introduzione JQuery
Maintainable JavaScript 2012
jQuery in 15 minutes
Php Tutorial | Introduction Demo | Basics
前端概述
jQuery Plugin Creation
Phphacku iitd
Let's write secure Drupal code! - DrupalCamp Oslo, 2018
jQuery Anti-Patterns for Performance & Compression
jQuery Essentials
Plugin jQuery, Design Patterns
Make your own wp cli command in 10min
Curso Symfony - Clase 2
Ad

Viewers also liked (20)

PPTX
Telecommunication system
KEY
Cmsms, open source & business model
PDF
세션 하이재킹
PPT
Apache Web Server Architecture Chaitanya Kulkarni
PPTX
Web (HTTP) request to response life cycle
PPTX
Testing RESTful web services with REST Assured
PPT
Web Cookies
PDF
Nmap scripting engine
PPT
Web Server Technologies I: HTTP & Getting Started
PPT
Smarty sharing-2
PDF
Penetration testing
PPT
Hacking A Web Site And Secure Web Server Techniques Used
PPSX
Sessions and cookies
PPTX
Cookie and session
PDF
Web Server Hardening
PPT
Mvc architecture
PPT
Cookies and sessions
PDF
Hacking With Nmap - Scanning Techniques
PPTX
REST & RESTful Web Services
PDF
Basics of telecommunication and networking
Telecommunication system
Cmsms, open source & business model
세션 하이재킹
Apache Web Server Architecture Chaitanya Kulkarni
Web (HTTP) request to response life cycle
Testing RESTful web services with REST Assured
Web Cookies
Nmap scripting engine
Web Server Technologies I: HTTP & Getting Started
Smarty sharing-2
Penetration testing
Hacking A Web Site And Secure Web Server Techniques Used
Sessions and cookies
Cookie and session
Web Server Hardening
Mvc architecture
Cookies and sessions
Hacking With Nmap - Scanning Techniques
REST & RESTful Web Services
Basics of telecommunication and networking
Ad

Similar to Geek Moot '09 -- Smarty 101 (20)

PDF
Extending CMS Made Simple
PDF
The web context
DOCX
Smarty 3 overview
PDF
Smarty Template Engine
PDF
MTDDC Nagoya 201104
PPTX
Word Press As A Cms
PDF
Blogluck1
PDF
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 5
PDF
Industrial training report
PDF
Smarty 2
PDF
HTML5, just another presentation :)
PDF
PDF
Intro to HTML 5 / CSS 3
PPS
Web technology html5 php_mysql
PDF
Html5 training
PPTX
1 Introduction to Drupal Web Development
PPTX
WordPress as a CMS
PDF
Extending CMS Made Simple
The web context
Smarty 3 overview
Smarty Template Engine
MTDDC Nagoya 201104
Word Press As A Cms
Blogluck1
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 5
Industrial training report
Smarty 2
HTML5, just another presentation :)
Intro to HTML 5 / CSS 3
Web technology html5 php_mysql
Html5 training
1 Introduction to Drupal Web Development
WordPress as a CMS

Recently uploaded (20)

PPTX
A Presentation on Artificial Intelligence
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PPT
Teaching material agriculture food technology
PDF
Approach and Philosophy of On baking technology
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Encapsulation theory and applications.pdf
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
A comparative study of natural language inference in Swahili using monolingua...
PDF
Empathic Computing: Creating Shared Understanding
PDF
Getting Started with Data Integration: FME Form 101
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
Spectroscopy.pptx food analysis technology
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Heart disease approach using modified random forest and particle swarm optimi...
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Mushroom cultivation and it's methods.pdf
A Presentation on Artificial Intelligence
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Teaching material agriculture food technology
Approach and Philosophy of On baking technology
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Encapsulation theory and applications.pdf
Group 1 Presentation -Planning and Decision Making .pptx
Unlocking AI with Model Context Protocol (MCP)
A comparative study of natural language inference in Swahili using monolingua...
Empathic Computing: Creating Shared Understanding
Getting Started with Data Integration: FME Form 101
Advanced methodologies resolving dimensionality complications for autism neur...
Diabetes mellitus diagnosis method based random forest with bat algorithm
Spectroscopy.pptx food analysis technology
Mobile App Security Testing_ A Comprehensive Guide.pdf
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Heart disease approach using modified random forest and particle swarm optimi...
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Mushroom cultivation and it's methods.pdf

Geek Moot '09 -- Smarty 101

  • 1. Smarty 101 What? Why? How? Ted Kulp - Shift Refresh, Inc.
  • 3. What? Arguably the most widely used PHP templating system
  • 4. What? Arguably the most widely used PHP templating system Created by Andrei Zmievski
  • 5. What? Arguably the most widely used PHP templating system Created by Andrei Zmievski Tightly integrated into the CMSMS core
  • 6. What? Arguably the most widely used PHP templating system Created by Andrei Zmievski Tightly integrated into the CMSMS core Seamlessly used on all page, module and other templates throughout the system
  • 7. What? Arguably the most widely used PHP templating system Created by Andrei Zmievski Tightly integrated into the CMSMS core Seamlessly used on all page, module and other templates throughout the system Released under the LGPL -- basically means it’s pretty liberally licensed
  • 9. Why? Separates the display logic cleanly from the controller logic
  • 10. Why? Separates the display logic cleanly from the controller logic Much safer by not allowing full range of PHP functionality in a template
  • 11. Why? Separates the display logic cleanly from the controller logic Much safer by not allowing full range of PHP functionality in a template Allows for many tricks to make complicated display easier
  • 12. Why? Separates the display logic cleanly from the controller logic Much safer by not allowing full range of PHP functionality in a template Allows for many tricks to make complicated display easier Get a lot of web-friendly functionality for free
  • 13. Why? Separates the display logic cleanly from the controller logic Much safer by not allowing full range of PHP functionality in a template Allows for many tricks to make complicated display easier Get a lot of web-friendly functionality for free And mainly...
  • 14. 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_modified’)) ?> {modified_date|cms_date_format} </div> </div> </body> </body> </html> </html> It’s just plain easier to read
  • 17. Absolute musts Literal tags Getting available variables
  • 18. Absolute musts Literal tags Getting available variables Modifiers
  • 22. Literal Tags Escapes javascript Escapes CSS Really... escapes anything with { or } in it. Smarty gets confused
  • 23. 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
  • 24. 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>
  • 25. 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}
  • 26. The Immortal Question How do I know what variables are available to me in my template?
  • 27. 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
  • 28. {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.
  • 29. {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.
  • 31. Modifiers Take output and modifies it directly in Smarty.
  • 32. Modifiers Take output and modifies it directly in Smarty. Allows multiple modifiers to be chained.
  • 33. Modifiers Take output and modifies it directly in Smarty. Allows multiple modifiers to be chained. Format: {$variable|modifier_function:extra:parameters}
  • 34. Modifiers Take output and modifies it directly in Smarty. Allows multiple modifiers to be chained. Format: {$variable|modifier_function:extra:parameters} Chaining: {$variable|modifier_function|another_one:with:params}
  • 35. Modifiers Take output and modifies it directly in Smarty. Allows multiple modifiers to be chained. Format: {$variable|modifier_function:extra:parameters} Chaining: {$variable|modifier_function|another_one:with:params} Smarty comes with a lot of nice modifiers. See chapters 5 and 6 for some examples.
  • 37. Examples {$title|upper} -- Convert the string to upper case
  • 38. Examples {$title|upper} -- Convert the string to upper case {$title|truncate:40:’...’} -- Truncate the string at 40 characters and put an ellipsis on it
  • 39. Examples {$title|upper} -- Convert the string to upper case {$title|truncate:40:’...’} -- Truncate the string at 40 characters and put an ellipsis on it {$smarty.now|date_format:”%Y/%m/%d”} -- Get the current date and give it a nice formatting
  • 40. Examples {$title|upper} -- Convert the string to upper case {$title|truncate:40:’...’} -- Truncate the string at 40 characters and put an ellipsis on it {$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
  • 42. {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
  • 43. {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}
  • 44. {cycle} Used to alternate a set of values Useful for alternating classes - ex. Alternating table rows Multiple columns
  • 45. {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}
  • 46. {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
  • 47. {escape} example Make a legible email address more difficult to read via the source. {$user.email|escape:”hexentity”} (Converts [email protected] to %62%64, etc.)
  • 48. Resources http://smarty.net/manual/en (Please read chapters 3 and 4 at a minimum!!!) http://wiki.cmsmadesimple.org