including or importing (@import) a stylesheet inside a Smarty 2 template

Question

I have a Smarty 2 template and I wish to use CSS import or even just a regular <link> tag to include a CSS file rather than using the traditional {literal} tags with inline CSS.

Is this possible in Smarty 2?

The CSS file is in the same directory as the Smarty template, so I want to just get it from the same directory - but this is not working.

<link href="{$smarty.server.PHP_SELF}thumbnails.css" rel="stylesheet" type="text/css" />

Neither is the CSS @import functionality.

Answer 1

You can try the following:

Use {php} tags:

<style>
{php}include('/filesystem/path/to/thumbnails.css');{/php}
</style>

Use this case if you know the path to your file, and don't mind to be smarty3-incompatible

Use custom function:

Create a custom smarty function and place it in a file called function.include_file.php, inside your plugins_dir:

<?php
function smarty_function_include_file($params, &$smarty)
{
    include($params['file']);
}

Then call it with:

<style>
{include_file file='/filesystem/path/to/thumbnails.css'}
</style>

Use this case if you know the path to your file, and don't mind creating a new function for this purpose

Edit your css file: Append {literal} tags to the start and end of your css file, for example:

/*{literal}*/
body{background-color:red!important}
/*{/literal}*/

then include it with:

<style>
{include file = "thubnails.css"}
</style>

Use this case if you don't mind editing your css file

Keep in mind that all of the cases above would obviously include all of your file as inline stylesheet, which is not a good practice. A much better procedure would be to place your css file somewhere that is accessible via web (that is, you can access it with something like http://yoursite.example.com/path/to/css/thumbnails.css) and then hard-link to it like you do now

Answer 2

$smarty.server.PHP_SELF returns the name and path of the current file executing your template, i.e. htt.../mypage.php, if you look at the source code after the remplate is rendered you will see why the css is not loading.

Instead, declare a variable in your php file with the desired path and pass it to smarty (in the example, $css_path):

<link href="{$css_path}thumbnails.css" rel="stylesheet" type="text/css" />