Template Toolkit Question

Perobl has asked for the wisdom of the Perl Monks concerning the following question:

I am a TT2 newbie. I'm using TT2 to create dynamic web pages using CGI Perl. I have set up a simple site to test my configuration running locally on Apache2. For the most part, everything is working great.

However, my images and external CSS files can't be accessed by my dynamic pages. I have my image files saved to assets/images inside my site's root directory: /Users/mysilmaril/Sites/WIW/assets/images

Likewise, my CSS file is saved to /Users/mysilmaril/Sites/WIW/css

This is all very standard stuff. When I access my CGI script from an HTML page (via a form) it utilizes TT2 to generate a wrapper and then it generates some simple text inside the [% content %] directive. This part is working great.

The images and external CSS can't be found because the dynamic page is being generated by the CGI script in the cgi-bin directory. I could hard code relative paths into my wrapper to solve this problem, but this is not an idea solution for me.

I'm sure there is a way to solve this problem through TT2's configuration, but I can't figure out how to do it. I'm pasting my test CGI script below:

#!/usr/local/bin/perl 
 
use strict; 
use warnings; 
use Template; 
use CGI; 
 
my $cgi = CGI->new(); 
my $tt = Template->new({ 
    INCLUDE_PATH => [ 
        '/Users/mysilmaril/Sites/WIW/templates/src', 
        '/Users/mysilmaril/Sites/WIW/templates/lib/site', 
        '/Users/mysilmaril/Sites/WIW/templates/lib/config', 
        '/Users/mysilmaril/Sites/WIW/cgi-bin', 
        '.', 
    ], 
    WRAPPER => 'wrapper', 
}); 
my $input = 'cgiparams.tt'; 
my $vars = { 
    cgi => $cgi, 
}; 
 
print $cgi->header; 
 
$tt->process($input, $vars) || die $tt->error();
[download]

My template file:

<tr> 
    <td colspan="2" align="center" height="200"> 
        <ul> 
            [% FOREACH p = cgi.param -%] 
                <p><b>[% p %]:</b>&nbsp;[% cgi.param(p) %]</p> 
            [% END -%] 
        </ul> 
    </td> 
</tr>
[download]

My wrapper is s standard HTML page (header, footer). I'll paste the HTML for my CSS here as an example:

<link rel="stylesheet" type="text/css" href="css/wiw.css" />
[download]

If I change href="wiw.css" to href="../css/wiw.css" it will load fine, but this is what I want to avoid doing. Can I configure this in TT2? Thanks!

Comment on Template Toolkit Question Select or Download Code

Replies are listed 'Best First'.
Re: Template Toolkit Question by almut (Canon) on May 19, 2010 at 20:43 UTC
Maybe I'm misunderstanding, but I don't really see any involvement of TT2 here. If you don't want relative URLs, why don't you use absolute ones? I.e. `href="/css/wiw.css"` [download] presuming the document root `/` is set up to correspond to the `WIW` directory.	[reply] [d/l] [select]
Re^2: Template Toolkit Question by Your Mother (Archbishop) on May 19, 2010 at 20:59 UTC
That might be an absolute path(?). But an absolute URI needs the server and protocol, no? `href="/css/wiw.css"` is relative to the server root.	[reply] [d/l]
Re^3: Template Toolkit Question by almut (Canon) on May 19, 2010 at 21:35 UTC
That might be an absolute path(?). But an absolute URI needs the server and protocol Sure, but I deliberately used "URL" to make it clear that we're not talking about directories on the server here, but rather what the path part of the URL maps to via the web server configuration. `href="/css/wiw.css"` is relative to the server root. Yes, but in this sense you could also say that a path like `/usr/local` is relative to the root of the file system :)	[reply] [d/l] [select]
Re^2: Template Toolkit Question by Perobl (Beadle) on May 19, 2010 at 21:30 UTC
I think absolute URLs are turned off by default in TT2. Isn't there a reason for this? Allow me to provide some additional information. I chose to use TT2 because I want to separate the code from the HTML as much as possible. Ideally, I'd like to give our web designers creative control of the HTML (they are not coders). They will be creating the HTML using Coda (an editor). All of the image links in the HTML are relative to the site's root directory (and this is fine by me). I would simply like to grab their HTML code and drop it into my TT2 wrapper whenever they make changes. I will then send my CGI generated output to the page using the `[% content %]` directive. Very clean solution for us. The only problem is, I haven't figured out a way to make the image links work (or the external CSS for that matter). I think I can use a TT2 config template, such as: `[% root = '/Users/mysilmaril/Sites/WIW' images = '$root/assets/images" %]` [download] And then in my HTML image tags ... `<img src="[% images %]/logo.jpg">` However, this would still require us to hardcode the `[% images %]` TT2 variable into the HTML. I was hoping to avoid this, but maybe it isn't possible? Hope I'm not confusing everyone ... Thanks.	[reply] [d/l] [select]
Re^3: Template Toolkit Question by almut (Canon) on May 19, 2010 at 22:20 UTC
I think the easiest solution would be to have your designers type `src="/images/logo.jpg"`, `href="/css/wiw.css"`, etc. and then put the respective files in the directories `/Users/mysilmaril/Sites/WIW/images /Users/mysilmaril/Sites/WIW/css` [download] (with `/Users/mysilmaril/Sites/WIW/` being the webserver's configured document root) In this case, no additional mapping of path components like `/images` —> `/assets/images` would be required (via TT2 `[% images %]` or whatever). If you can't get your designers to type anything other than `src="/logo.jpg"`, you could set up a RewriteRule to prepend `/assets/images` to any URI-path that ends in `.jpg`, `.png`, `.gif`, etc. P.S.: if you're going to use `[% root = '/Users/mysilmaril/Sites/WIW' images = '$root/assets/images" %] ... <img src="[% images %]/logo.jpg">` [download] I'm pretty sure you don't want the `/Users/mysilmaril/Sites/WIW` part in there, as the image would then (most likely) be searched under `/Users/mysilmaril/Sites/WIW/Users/mysilmaril/Sites/WIW/assets/images/` [download]	[reply] [d/l] [select]
Re^4: Template Toolkit Question by Perobl (Beadle) on May 19, 2010 at 22:50 UTC
Re^5: Template Toolkit Question by almut (Canon) on May 19, 2010 at 23:12 UTC
Some notes below your chosen depth have not been shown here
Re: Template Toolkit Question by assemble (Friar) on May 21, 2010 at 13:06 UTC
The way I do it, I put all my paths and configuration in a module or something like that, so I can access it in Perl. From there, you can make them available in TT by modifying your ->new call like this: `my $tt = Template->new({ INCLUDE_PATH => [ .... '/Users/mysilmaril/Sites/WIW/cgi-bin', '.', ], WRAPPER => 'wrapper', VARIABLES => { IMAGE_URL = "/assets/images", CSS_URL = "/assets/css", STUFF = $Module::Stuff } });` [download] Then you can access them in your template like this: `<html> <head> <link rel="stylesheet" type="text/css" href="[%CSS_URL%]/wiw.css" /> </head> <body> <p>blah blah <img src="[%IMAGE_URL%]/image.png" /> <p>blah blah <p>Something else: [%STUFF%] </body> </html>` [download]	[reply] [d/l] [select]


No such thing as a small change
	PerlMonks