I'm playing around with Symfony2, and I have problems including CSS and JS files in Twig template.
I have a bundle named Webs/HomeBundle inside which I have HomeController with indexAction that renders a twig template file:
public function indexAction()
{
return $this->render("WebsHomeBundle:Home:index.html.twig");
}
So this is easy. Now what I want to do, is to include some CSS and JS files inside this Twig template. Template looks like this:
<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
</body>
</html>
The file I would like to include, main.css file is located in:
Webs/HomeController/Resources/public/css/main.css
So my question is basically, how the hell do I include simple CSS file inside Twig template?
I'm using Twig asset() function and it just doesn't hit the right CSS path. Also, I run this command in console:
app/console assets:install web
This created a new folder
/web/bundles/webshome/...
this is just linking to the
src/Webs/HomeController/Resources/public/
right?
Bundle/Resources/public folder? Is that the right location for them?In case you are using Silex add the Symfony Asset as a dependency:
composer require symfony/asset
Then you may register Asset Service Provider:
$app->register(new Silex\Provider\AssetServiceProvider(), array(
'assets.version' => 'v1',
'assets.version_format' => '%s?version=%s',
'assets.named_packages' => array(
'css' => array(
'version' => 'css2',
'base_path' => __DIR__.'/../public_html/resources/css'
),
'images' => array(
'base_urls' => array(
'https://img.example.com'
)
),
),
));
Then in your Twig template file in head section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% block head %}
<link rel="stylesheet" href="{{ asset('style.css') }}" />
{% endblock %}
</head>
<body>
</body>
</html>
The other answers are valid, but the Official Symfony Best Practices guide suggests using the web/ folder to store all assets, instead of different bundles.
Scattering your web assets across tens of different bundles makes it more difficult to manage them. Your designers' lives will be much easier if all the application assets are in one location.
Templates also benefit from centralizing your assets, because the links are much more concise[...]
I'd add to this by suggesting that you only put micro-assets within micro-bundles, such as a few lines of styles only required for a button in a button bundle, for example.
And you can use %stylesheets% (assetic feature) tag:
{% stylesheets
"@MainBundle/Resources/public/colorbox/colorbox.css"
"%kerner.root_dir%/Resources/css/main.css"
%}
<link type="text/css" rel="stylesheet" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
You can write path to css as parameter (%parameter_name%).
More about this variant: http://symfony.com/doc/current/cookbook/assetic/asset_management.html
Source: Stackoverflow.com