Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to include CSS file in Symfony 2 and Twig?

Tags:

twig

symfony

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?

Questions

  1. Where do you place your asset files, JS, CSS, and images? Is it OK to put them in Bundle/Resources/public folder? Is that the right location for them?
  2. How do you include these asset files in your Twig template using asset function? If they are in public folder, how can I include them?
  3. Should I configure something else?
like image 917
Limeni Avatar asked Aug 28 '12 18:08

Limeni

People also ask

Is twig a Symfony?

Twig is a PHP template engine. It was created by Symfony developers. Twig files have the extension of . html.

What is block in twig?

Blocks are used for inheritance and act as placeholders and replacements at the same time. They are documented in detail in the documentation for the extends tag. Block names must consist of alphanumeric characters, and underscores. The first char can't be a digit and dashes are not permitted.

How do you make an inline CSS?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section.

2 Answers

You are doing everything right, except passing your bundle path to asset() function.

According to documentation - in your example this should look like below:

{{ asset('bundles/webshome/css/main.css') }}

Tip: you also can call assets:install with --symlink key, so it will create symlinks in web folder. This is extremely useful when you often apply js or css changes (in this way your changes, applied to src/YouBundle/Resources/public will be immediately reflected in web folder without need to call assets:install again):

app/console assets:install web --symlink

Also, if you wish to add some assets in your child template, you could call parent() method for the Twig block. In your case it would be like this:

{% block stylesheets %}     {{ parent() }}      <link href="{{ asset('bundles/webshome/css/main.css') }}" rel="stylesheet"> {% endblock %}
like image 90
Vitalii Zurian Avatar answered Sep 20 '22 22:09

Vitalii Zurian

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

like image 25
ZhukV Avatar answered Sep 20 '22 22:09

ZhukV
Sign in to Comment

Related questions

'The parameter "debug.error_handler.throw_at" must be defined' error after updating to Symfony 2.6
Remove "Remaining deprecation notices" in Symfony 2.8
Symfony2 - Force file download
Doctrine Entities and business logic in a Symfony application
What does ~ mean in the YML configuration file in Symfony 2?
symfony2 : failed to write cache directory
Use Javascript to access a variable passed through Twig
The method name must start with either findBy or findOneBy. Undefined method Symfony?
Generating a single Entity from existing database using symfony2 and doctrine
Use Limit and Offset in Doctrine2 query
Symfony2 invalid form without errors
Simple check if form field has errors in Twig template
Id attribute on form tag symfony
How to get the server path to the web directory in Symfony2 from inside the controller?
Conflict on Template of Twig and Vue.js
Accessing session from TWIG template
How to set a class attribute to a Symfony2 form input
How do I delete an entity from symfony2
How can I use now() in Doctrine 2 DQL?
How to use absolute path in twig functions

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!