Getting Smart About Smarty
By AJ Hall
YNOT – Smarty is an extremely flexible web templating language that’s actually pretty easy to work with. Unfortunately, a lot of people give up on it prematurely and never appreciate its strong points.
Flexibility makes Smarty attractive when you’re developing software and need a template engine. As a result, many popular adult site-management products —including NATS, the Elevated X CMS, Smart Tube Pro and several others — use Smarty templates.
It’s a common misconception that to edit templates created in Smarty, one needs to know the language. In truth, most edits to Smarty templates do require users to touch a single line of code. Most edits require nothing beyond adjustments to HTML and CSS inside a Smarty template.
When editing, users typically get stuck in two spots, neither of which needs to be a permanent roadblock.
Smarty Roadblock No. 1: Looking at the code inside a template and seeing just that — code. It seems overwhelming. This stops a lot of people cold.
Often someone will open a file and stare at it, waiting for something to jump out at them and make it obvious where they need to be looking. It’s like looking into the abyss.
Imagine you started a load of laundry, say, your whites. Then you realize one dark-red T-shirt sneaked into the load somehow, and if you leave it there it will turn all of the white clothes pink. If you look in the washing machine, you’ll see a lot of white. You would naturally, instinctively look past the white, almost ignoring it completely. You wouldn’t be looking at the big wet pile of whites. You would instead be intensely focused on looking for red. Therefore, the red t-shirt jumps out at you the moment you see a hint of color.
Looking at code is exactly the same. The only things you need to be concerned about are the parts you recognize as CSS or HTML, because you can edit those.
Code Editing Tip: If you’re not doing it already, switch to using a HTML editor that highlights code in different colors. As an example, I use CuteFTP Pro, which colors HTML in blue, programming code in black and comment tags in grey. This makes it easy to look past anything that’s not HTML and see only the parts of the page I want to edit. It also makes it easy to add comment tags throughout a design so you can open a file and find sections of the page instantly.
This brings us to template coding rule No. 1: Always make a backup copy of your template folder before you make any changes. That way if something gets messed up, it’s easy to restore the original. Plus, you’ll always have a working copy of the templates to look at for reference if needed.
Smarty Roadblock No. 2: Being thrown off by external file references inside a template.
Even seasoned designers can be thrown by the way things are referenced inside a template. Templating languages like Smarty are used because they break things up into templates and sub-templates instead of compiling everything into one massive file.
If you’re editing a main page, most likely the file contains references to other templates. These are either global elements shared by multiple pages or sub-templates for sections of the page you’re editing.
For multi-page sites created by affiliate-program and CMS software, this is critical. It lets the developer do more and add more features. It also lets you edit different parts of a site and/or each page separately. If everything was in one big template, elements like the search bar, navigation, poll, etc. would be more difficult to find. You’d have to scroll through hundreds of lines of code just to find your footer.
To remedy this, developers create files like header.tpl and footer.tpl that contain only the code used for those sections.
A Smarty include tag looks like this: {include file=”template_name.tpl” }
The beauty of this is that anyone can make a template file and include it on a page. That’s a coder’s dream come true. Instead of pasting 50 lines of code into an HTML document in order to render a top list, you put those 50 lines of code into a .txt file and name it toplist.tpl. Then, you add an tag for the file to your page where you wants the top list to appear (e.g., {include file=”toplist.tpl” }).
To summarize, a tour template might house all code used for the main tour design, including HTML and CSS. The template then calls sub-templates for things like the header, footer, navigation and so on.
Once you get comfortable with this concept, editing Smarty templates is a piece of cake.
AJ Hall is a 12-year adult industry veteran and the co-founder and chief executive officer of Elevated X Inc., a provider of popular adult CMS software for the online adult entertainment industry. Hall has spoken at trade shows and is a contributing writer for several trade publications. Elevated X powers more than 2,000 adult sites, has been nominated for industry awards six times and won the 2012 XBIZ Award for Software Company of the Year.