Using CSS and Javascript Codes in a Smarty Template

By default, Smarty parses anything that is inside { and } characters including those used in CSS rules and Javascript functions. Without proper coding and escaping techniques, your page will render into a disaster.

There are four (4) ways to escape from Smarty parsing:

   1.Separate your CSS and Javascript codes into their own files and include them into your template using standard HTML methods.

      Linking a CSS file:

      <LINK REL=STYLESHEET HREF=”style.css” TYPE=”text/css”>

      Including a Javascript file:

      <script type=”text/javascript” src=”popup.js”></script>

   2.Enclose embedded CSS and Javascript code with {literal} and {/literal} tags so Smarty engine would leave them alone.

      Embedding CSS:

      <style type=”text/css”>
      <!–
      {literal}
      p {text-indent: 10pt}
      body {margin:0; padding:0;}
      {/literal}
      –>
      </style>

      Declaring embedded Javascript function:

      <script language=”javascript” type=”text/javascript” >
          <!–
              {literal}
                   function hello_world(){
                          alert(‘Hello Smarty World’);
                        }
              {/literal}
             –>
      </script>

   3.Change Smarty’s $left_delimiter and $right_delimiter to custom delimiter strings so you can use curly braces in your templates. In addition, it would allow you to insert template variable values into your CSS and Javascript codes to make them dynamic on the fly at server side.

      The PHP code:

      <?php
      require ‘Smarty.class.php’;
      
      $smarty = new Smarty;
      
      $smarty->left_delimiter = ‘<!–{‘;
      $smarty->right_delimiter = ‘}–>’;
      
      $smarty->assign(‘title’, ‘The Smarty Template Engine’);
      $smarty->assign(‘element’, ‘h1’);
      $smarty->assign(‘size’, ’36px’);
      $smarty->assign(‘popup’, ‘alert’);
      $smarty->display(‘index.tpl’);
      ?>

      The Smarty Template “index.tpl”:

      <head>
      <style type=”text/css”>
      <!–
      <!–{$element}–> {font-size: <!–{$size}–>}
      –>
      </head>
      <body>
      <<!–{$element}–>><!–{$title}–></<!–{$element}–>>
      <script language=”javascript” type=”text/javascript” >
      <!–
      function show_popup()
      {
        <!–{$popup}–>(‘<!–{$title}–>’);
      }
      //–>
      </script>
      </body>

      The code above will output:

      <head>
      <style type=”text/css”>
      <!–
      h1 {font-size: 36px}
      –>
      </head>
      <body>
      <h1>The Smarty Template Engine</h1>
      <script language=”javascript” type=”text/javascript” >
      <!–
      function show_popup()
      {
        alert(‘The Smarty Template Engine’);
      }
      //–>
      </script>
      </body>

   4.Use {ldelim} and {rdelim} tags in place of { and } in defining your CSS rules and JavaScript functions assuming the default delimiters are set. This is not practical for real-world use and it will break when delimiters are set to other strings.

      Define CSS rules:

      <style type=”text/css”>
      <!–
      p {ldelim}text-indent: 10pt;{rdelim}
      body {ldelim}margin:0; padding:0;{rdelim}
      –>
      </style>

      Will output:

      <style type=”text/css”>
      <!–
      p {text-indent: 10pt;}
      body {margin:0; padding:0;}
      –>
      </style>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: