Smarty Strip

If you are a Smarty expert then this will be very dumb. I knew about the cool Smarty tag, strip, but hadn’t found a really good use for it. When you are using Smarty you are changing the how the HTML is created when the page is loaded. In some cases, how the code is formatted affects how the browser displays it, especially for IE. One of the most common areas I’ve seen this is when formatting using an indented structure and having an image at the end of a block. By having the closing block tag (/div, /td, etc.) on a new line an extra bit of space is added behind or below the image. This extra space is usually noticeable and causes page rendering differences among browsers. Here is an example of this piece of code:

    <img src="myimage.gif" alt="" />
</div>

A workaround is to manually put the closing block tag on the previously line with no space like so:

<img src="myimage.gif" alt="" /></div>

This works fine but what if you don’t want to do that or you want to keep your Smarty template file looking nice and tidy with all of your extra lines and indents? This is where the Smarty strip tag comes in. Just add strip around the block of code and all those unwanted spaces are stripped out:

{strip}
    <img src="myimage.gif" alt="" />
</div>
{/strip}

This will build the page with the following source in that area:

<img src="myimage.gif" alt="" /></div>

This can also be useful if you are running through a loop building rows of a table. You might want to see the structure in a nice easy-to-read format but want the generated lines to be nice and tight. Just wrap it in strip:

<table ...>
{foreach ...}
{strip}
<tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
</tr>
{/strip}
{/foreach}
</table>

This is nice to read and work with in the template but will generated the following tight source code when the page is loaded:

<table ...>
<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>
<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>
<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>
</table>

Yeah, you probably already knew this but I thought this was really useful. I used to build web apps using Mason and it had a simple way to suppress new lines so using strip is a nice substitute for that feature I used in Mason. Hope you find this useful! :)