Use Smarty in Dreamweaver

(by jinnz2k (at) yahoo (dot) com)

I am not sure how many people are interested in use Dreamweaver with Smarty tags. All I saw was some discussions in the mailing list. Only one page in this Smarty Wiki site and it's not even linked on the front page. I suppose hardcore php coder would prefer Notepad, while many Dreamweaver gurus don't even know what Smarty is. Well, I am neither. I would like to see both of them working together. There were some great ideas / walk-arounds on this issue. But that's not enough for me. I want to see all the Smarty template in Dreamweaver.

Enough blah-blah.

What I want DW to do is to display the included file in the design view when see a Smarty "include" tag {include file="foo.tpl"}. Just like you insert <?php include="foo.php"; ?> in PHP file. All you need is a simple DW translator written in Javascript. Simply copy the code below and save it in some file with .htm extension (e.g. Smartyinclude.htm) and drop it to "Dreamweaver installation folder\Configuration\Translators\". Restart Dreamweaver.

<title>Smarty Include Tag Translator</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<script language="JavaScript">

 * This translator will only work on this format:
 * {include file="foo.tpl"}
 * filename must surrounded by double or single quotes
 * if 'assign' or '[var]' attribute exists, it will not tranlated
 * the include tag must be in one line
 * extra spaces are allowed, e.g. { include file = " foo.tpl " }
 * all templates file suppose to stay in the same top 'templates' folder
 * you can include subfolder in the include tag
 * all other formats will be displayed as a simple 'inc' icon

 * define smarty delimiters

var LDELIM = "{";
var RDELIM = "}";

function getTranslatorInfo()
	var transArray = new Array(6);
	transArray[0] = "SMARTY_INCLUDE";
	transArray[1] = "Smarty Include Translator";
	transArray[2] = "0";
	transArray[3] = "1";
	transArray[4] = LDELIM + "[ \t]*include";
	transArray[5] = "byExpression";
	return transArray; 

function translateMarkup( docNameStr, siteRootStr, inStr )
	var pos = 0;
	var patternFound = false;
	var outStr = '';
	var depPath = '';
	var remainInStr = inStr;
	smartyRegExp = new RegExp("(" + LDELIM + "[ \t]*include[ \t]+file[ \t]*=[ \t]*[\"|'][ \t]*([^\"^']*)[ \t]*[\"|'][ \t]*[^"+RDELIM+"]*" + RDELIM + ")", "im");
	while ((pos = >= 0)
		var matchStr = RegExp.$1;
		var templateFileName = RegExp.$2;
		var templateFullName = templateFileName;
		var smartyFile;
		outStr += remainInStr.substr(0, pos);
		smartyFile = new File(templateFullName, docNameStr);
		if (smartyFile.exists())
			smartyContent = smartyFile.getContents();
			if (smartyContent.length <= 0)
				// this is an empty file
				smartyContent = "&nbsp;";
			depPath = smartyFile.getAbsolutePath();
			// file doesn't exist
			smartyContent = "File Error!";
		// Do translation
		outStr += '<MM:BeginLock translatorClass="' + getTranslatorInfo()[0] + '" type="smartyInclude" orig="' + escape(matchStr) + '"';
		if (depPath.length > 0)
			outStr += ' depFiles="' + depPath + '"';
		outStr += '>' + smartyContent + '<MM:EndLock>';
		// Re-search text following match
		remainInStr = remainInStr.substring(pos + matchStr.length);
		// Remember that at least one translation was performed
		patternFound = true;
	outStr += remainInStr;
	return patternFound ? outStr : "";

This is an extreme simple translator. I wish someone who is more experienced in Javascript and Dreamweaver can add more things like property inspector, for example. Feel free to add new things in this page. Please note the limitation on this translator described in the above code. It will not translate the "include" with assign attribute.

Combined with the SMARTY_Assistant extension and smarty_with_dreamweaver tags made by others, you can let Dreamweaver show your Smarty tags in various icons, insert smarty tags from object bar and display the included tpl files. And you can put them all together in one extension for easy (un)installation.

I don't know whether I should edit it here, but your work seems does not work, I have found a solution here:

If you look for a Dreamweaver extension try this one:

If you would like to have this translator parse Smarty include tags with attributes, change the following line from:

smartyRegExp = new RegExp("(" + LDELIM + "[ \t]*include[ \t]+file[ \t]*=[ \t]*[\"|'][ \t]*([^\"^']*)[ \t]*[\"|'][ \t]*" + RDELIM + ")", "im");


smartyRegExp = new RegExp("(" + LDELIM + "[ \t]*include[ \t]+file[ \t]*=[ \t]*[\"|'][ \t]*([^\"^']*)[ \t]*[\"|']+([^}]*)" + RDELIM + ")", "im");

Use Smarty in Contribute

This translator works for Macromedia Contribute as well, versions 1-3 as of this writing. Follow the instructions above as for Dreamweaver, but use the Contribute install folder instead (e.g. Macromedia\Contribute 3\Configuration\Translators on Win XP).

New Smarty Dreamweaver Extension

If you are looking for a simple Smarty Dreamweaver extension, you can download it from