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
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?
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?
Should I configure something else?
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 %}
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
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.
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>
Related
Let's just say I have a basic class-based view like:
from django.views.generic import TemplateView
class HomePage(TemplateView):
template_name = "homepage.html"
and in homepage.html of course we load some CSS, apocryphally:
{% extends "base.html" %}
{% load static %}
{% block CSS %}
<link rel="stylesheet" type="text/css" href="{% static 'css/default.css' %}" />
<link rel="stylesheet" type="text/css" href="some CDN based CSS file' %}" />
{% endblock %}
Now I'd like the view to read/load the CSS that will be sent to the client.
If we could just find the source files, we could parse them with cssutils.
And of course it's technically possible to find and parse the template file too, but Django already implements that and has a template loader. Is there any way short of rendering the template into a string, and trying to parse the HTML to extract CSS rules? And even if that's the path we need to pursue, is there a package that will given rendered HTML, and return the CSS rules?
An interesting problem that arises from the need, server-side, to extract some CSS information, notably colours.
I have been trying to figure out how to get assetic working with my CSS sources but am having no luck. Two articles I've been tyring to cross-reference are combining and minimising ccs files and assetic asset management. However, the hybrid I've ended up with is the below which isn't working:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
However, when I try running (in Dev) I get an error saying:
Unexpected token "name" of value "rel" in base.html.twig at line 19
PS I have installed leafo and jsqueeze (I have javascripts to do figure out next) with:
$ composer require leafo/scssphp
$ composer require patchwork/jsqueeze:"~1.0"
You have here an error in your code:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
in every line you have a file that should be rendered. In the second line you have added rel and type. you have to delete that both parameters otherwise its an option for stylesheets. If you delete them it should work.
Maybe I don't understand it. My main template is: app/Resources/view... But where should be css/js/img ? In my opinion in: app/Resources/view/public/... Because it isn't files bundles and all project in production environment. In my case "frontend page".
Of course, when the files(css/js/img) belongs to bundle is in appropriate bundle.
Now I have:
{% stylesheets '../app/Resources/views/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Assetic Add file located in app/Resources/js
But don't see images files.
How according to the standard symony2, I should store and manage "main" template files?
I would like to safely and well. I learn the symfony2.
All "web assets resources" should be place into web folder (that is made for all files "reachable" from the www).
You only need to run php app/consolle assets:install(*) to let symfony place all of your assets in the right place
When you want to use them simply use
<link href="{{ asset('bundles/yourbundlename/css/style.css') }}" type="text/css" rel="stylesheet">
(or whatever you have called your files)
(*) you can choose even the --symlink option to avoid file copies
All the images CSS js file should be kept in /web folder and can be used
{% stylesheets '/css/*' %}
<link href="/abc.css" type="text/css" rel="stylesheet" />
{% endstylesheets %}
or should be kept in bundle and you have to assetic dump them.
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
kindly refer the below link for the same:
http://symfony.com/doc/current/cookbook/assetic/apply_to_option.html
I am working on a Symfony2 application. I am customising the layout.html.twig file from the FOSUserBundle.
Any HTML changes I make within the file are immediately obvious when I reload the page in the browser.
I am using assetic to link to my CSS and JS files. They appear to have linked successfully, the files contents load when I click on their paths from within the source of the web page.
However the CSS classes I have specified on the elements of the page don't seem to be appearing with their styles applied. I can't figure out why this is.
Here is the syntax I've used to link to the JS and CSS:
{% javascripts
'bundles/sysdevpunctuality/js/jquery-2.1.1.min.js'
'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<!-- Bootstrap -->
{% stylesheets 'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheets" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
Appreciate any tips on how I can go about debugging this issue.
I had the same problem, try this syntax:
{% block stylesheets %}
<link href="{{ asset('bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
Of course don't forget to install assets:
php app/console assets:install web --symlink
i cant comment but my suggestion is check the page source of the generated webpage, then you can check the directory where symfony is looking for the resources.
I have this:
ShopBundle
Controller
Resources
public
images
marker.png
views
Default
index.html.twig
In my index.html.twig, I'd like to have this
<img src="{{ asset("images/marker.png") }}"/>
And I'd love people using my bundle who just want to use their own marker.png to just have to build a bundle inheriting mine and place their image just by following files structure:
MyShopBundle
Resources
public
images
marker.png
Is there any simple way to do this in Symfony2 ? The need seems so simple that I can't believe I didn't find answers already.
So,
How do you include an image asset in your bundle template from your bundle resources directory ? I already did a ./apps/hfr/console assets:install web but my template does not print the right url (/images/marker.png instead of /bundles/ShopBundle/Resources/public/images/png)
Is it possible to override the way I want or did I lost my way ?
Solution:
use the # syntax ...
{% image '#VendorMyShopBundleBundle/Resources/public/images/example.jpg'
output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
Please note that Vendor/YourBundle/Resources/public will NOT be accessible by your web server normally.
The assets:install command will therefore copy the assets to web/bundles/vendoryourbundle
The {{ asset('path/to/asset.jpg') }} function will adjust the url of your asset if youre using the dev environment:
http://hostname/app_dev.php
from
/path/to/asset.jpg
to
/app_dev.php/to/asset.jpg
[EDIT]
if you want more control over the assets maybe consider using asset collections.
You can configure them as follows:
# app/Resources/config/config.yml
assetic:
[...]
assets:
css_bootstrap:
inputs:
- %kernel.root_dir%/../src/Vendor/YourBundle/Resources/public/twitter-bootstrap/less/bootstrap.less
- [...]
filters:
- lessphp
- [...]
output: css/bootstrap.css
my_image:
inputs:
- %kernel.root_dir%/../path/to/image.png
filters:
- optipng
output: images/image-with-new-name.png
and use them afterwards in your template like this:
{% stylesheets '#css_bootstrap' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
I am NOT sure right now if the assetic/assets/packagename/inputs configuration array supports the #VendorYourBundle syntax aswell and then uses bundle inheritance though.
Addition:
Before you can use these packages you will have to use the console command:
php app/console assetic:dump