William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Tag Archives: Smarty

Smary3 {foreach} properties summary

Smary3 {foreach} properties summary

Here I summary Smary3 {foreach} properties summary for quick retriving. For details, see http://www.smarty.net/docs/en/language.function.foreach.tpl.

@key current key of the loop item
 {foreach $hashArray as $value}
   <li>{$value@key}: {$value}</li>
@index contains the current array index, starting with 0.
{foreach $items as $i}
  {if $i@index eq 3} <tr> {/if}
  {if $i@index eq 3} </tr> {/if}
@iteration contains the current loop iteration and always starts at 1, unlike @index.
{foreach $myNames as $name}
  {if $name@iteration is even by 3}
    <span style="color: #000">{$name}</span>
    <span style="color: #eee">{$name}</span>
@first @first is TRUE if the current {foreach} iteration is the initial 1. 
{foreach $items as $i}
  {if $i@first}
@last @last is set to TRUE if the current {foreach} iteration is the final one.
{foreach $items as $item}
  <a href="#{$item.id}">{$item.name}</a>
  {if $item@last}
  ... no items to loop ...
@show can be used after the execution of a {foreach} loop. @show is a boolean value.
{foreach $myArray as $name}
{if $name@show} 
  do something here if the array contains data 
@total contains the number of iterations that this {foreach} will loop. 
{foreach $items as $item}
  {if $item@last}
    <div id="total">{$item@total} items</div>
 ... no items to loop ...

Smarty Templates: {debug}

Smarty Templates: {debug}

Smarty has a brilliant built-in function: {debug}. Normally at the top of smarty template, call this built-in function to make the page in debug mode:


After this set, all the currently available variables within the scope of a template are displayed in a new window. The {debug} plus FF’s Firebug, Web developers tools make the developing more efficient and easily.

I list the following slight changes of the {debug} to make it more readable for me. All these changes can be done by directly modifying Smarty source codes.

1. change default print variable length from 40 to 120

In Linux where the Smary resides, directly change Smarty lib file:

~/Smarty-3.0.4/libs/plugins/$ vi modifier.debug_print_var.php 
// change $length=40 to 80:
function smarty_modifier_debug_print_var($var,$depth=0,$length=80)

This way, if out long variables, such as array, array of array etc, the display shows at max 80 chars instead of original 40 chars.

2. make debug window more suitable

I customized the {debug} window to show more comfortable:

  • make Window’s width more wider, from 680 to 1080px
  • ignore the td width, this keeps the display more reasonable.

To do this, directly edit Smarty lib file: vi ~/Smarty-3.0.4/libs/debug.tpl:

_smarty_console = window.open("",
// and comment the width of th,td tags:
th, td{
/* width: 50%; */

smarty: {literal}{/literal} replaced by whitespace

smarty: {literal}{/literal} replaced by whitespace(‘ ‘)

In HTML templates library smarty, the {literal}{/literal} pairs are used to seperated javascript/css from Smarty templates codes.

{literal} tags allow a block of data to be taken literally. This is typically used around Javascript or stylesheet blocks where {curly braces} would interfere with the template delimiter syntax. Anything within {literal}{/literal} tags is not interpreted, but displayed as-is. If you need template tags embedded in a {literal} block, consider using {ldelim}{rdelim} to escape the individual delimiters instead.

{literal}{/literal} tags are normally not necessary, as Smarty ignores delimiters that are surrounded by whitespace.
So, Be sure your javascript and CSS curly braces are surrounded by whitespace. This is new behavior to Smarty 3. Examples:

//1. previous:
if (form.validationEngine({literal}{returnIsValid:true}{/literal})) 

{literal}css = 
  {'width':200px;'height':100px;background-color: red}{/literal}

//2. now:
if (form.validationEngine({  returnIsValid:true   })) {...}

css = {   'width': 200px; 'height': 100px; background-color: red   }

This make the codes easier to read and maintain.

Smarty: HTML comment and net traffic

Smarty: HTML comment

Sometimes when modifying HTML files, we are accustomed to using HTML comment “<!– –> to temporarily comment some codes, in case of later reuse.
To do this in Smarty templates file need to be very careful, because the comment codes might cause bad results. Like the following:

{Smarty comment: The following HTML comment is not SAFE and harmful!}
<!--div id="div_list"> {include file="{$template}"} </div-->

The above statement will cause very big leak: instead of ignoring this statement, Smarty actually parses and executes this statement, fills up HTML with file {$templates}, and finally, comment them with <!–, –>!
e.g.: the Smarty {$template} generates 1000 lines output, then use <!– –> to comment them, hide the output. This largely decreases the script performance.
Put the comment here is very bad: cause network traffic, and decrease the performance.
This might be a bug of Smarty, and should not happen when HTML has already comment the statement. However it does.

The solution:
Just remove it, to make codes clean.