I'm using KnPUniversity's video tutorial on Getting Started with Symfony2, and everthing's been going good except the video is teaching based off of version 2.0.3 and I am using 2.1.x-dev. When I get to a certain point in the video, it directs me to write code block #1 then modify it to more efficiently use code block #2, except code block #2 doesn't work. It doesn't throw any errors, it just fails to actually detect the stylesheets. In the source code of the page, there are zero references to any css style sheets using code block #2. Any idea what I'm doing wrong?
{# this causes the page to be styled and works fine #}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/event/css/event.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/events.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/main.css') }}">
{% endblock %}
.
{# this causes the page to be unstyled. Missing stylesheet links in page source #}
{% block stylesheets %}
{% stylesheets
'bundes/event/css/*'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
Well, I had a typo. It's not "bundes" it's "bundles". Problem solved and I'm an idiot.
When you use {{ asset() }} it creates a link to your web (public) directory.
But for the second part Assetic manages the css files - so it looks for the file inside your application and then writes it out into your web directory.
To fix your problem you can change your stylesheets like this:
{% stylesheets
'%kernel.root_dir%/../web/bundes/event/css/*'
filter='cssrewrite'
%}
But I suggest reading more about assetic to understand how you should be managing your css files Symfony 2 Assetic
Related
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 want to load my page with different theme CSS files and I need a solution to inject the theme name into the css/less path.
{% block stylesheets %}
{% stylesheets
'bundles/design/css/templates/{{ theme_name }}/style.less'
output='css/compiled/template_{{ theme_name }}_style.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" />
{% endstylesheets %}
{% endblock %}
Unfortunately neither this nor the concat syntax work. How can I do that?
EDIT: Maybe someone could give me an example or a tutorial link how can use that more comfortable in my template?
index.php?layout=classic&theme=blue
You cant't do it, there is a closed issue about it. Stof well define because it's impossible to do.
In one of my Symfony projects I am using assetic for asset managment.
All my twig files extend a base file called base.html.twig. I This file (base) I have:
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'../vendor/bootstrap/css/bootstrap.css'
'css/general.css'
'css/navigation.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
In the other files that extend the base file I override the stylesheets block so that I can add other css files. This is what I do:
{% block stylesheets %}
{{ parent() }}
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'bundles/account/css/signup.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Now the problem is that signup.css is never added in main.css and so are all the other files that are not in the stylesheet block in the base file.
I don't know why but this started happening when I swtiched to prod environment (it was working fine in dev). I've done, as recommending on Symfony's website:
php app/console assetic:dump --env=prod --no-debug
One other thing, it seems that I can't swtich back to dev mode even when I'm using app_dev.php
Do you guys have any idea of where these errors could come from ?
Thank you in advance for you help,
kimimsc
Your have a conflict with your 'option' attribute. So in prod environnement, the second stylesheet overwrite the first.
You must use another output value for signup.css (or don't use this option)
I have a one-page webapp written with Symfony 2 where all css and javascript assets sit in web/static/all.js and web/static/all.js. These a linked from the intex.html.twig template in a standard way:
{% javascripts output='static/all.js' filter="?closure"
'#MyBundle/Resources/assets/vendor/jquery/jquery.js'
'#MyBundle/Resources/assets/...'
'#MyBundle/Resources/assets/...'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% stylesheets output='staic/all.css' filter="?yui_css" combine=true
'#MyBundle/Resources/assets/css/reset.css'
'#MyBundle/Resources/assets/css/...'
'#MyBundle/Resources/assets/css/...'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}
This is pretty cool already, because the browser only has to do 3 requests during the first launch and 1 or 0 requests later (all.css and all.js are cached using .htaccess).
But I want to go further and just dump all css and js into index.html similar to what google does on their homepage. This will result only one http request during the first run, which will speed up the app a little. It would be ideal to have a flag that I pass to the template or keep in twig globals that will enable switching between two modes on demand.
{%if dumpAssetsIntoTemplate %}
{# all js and css here #}
{% else %}
{# asset urls #}
{% endif %}
How could this be done with minimum pain?
If you look at Twig reference about Twig extensions you can see that the render function takes a path or a URL.
{{ render(path('route', {params})) }}
{{ render(url('route', {params})) }}
Quoting the usage from the doc "This will render the fragment for the given controller or URL".
So I would try that:
<style type="text/css">
{% stylesheets output='static/all.css' filter="?yui_css" combine=true
'#MyBundle/Resources/assets/css/reset.css'
'#MyBundle/Resources/assets/css/...'
'#MyBundle/Resources/assets/css/...'
%}
{{ render(asset_url) }}"
{% endstylesheets %}
</style>
Same approach with your Javascript files.
If it doesn't work, you'll probably want to tweak the settings of the Assetic bundle in particular the setting named use_controller.
I'm including CSS stylesheets in my template like so:
{% stylesheets
"#SomeBundle/Resources/assets/css/default.css.twig"
"#SomeBundle/Resources/assets/css/global.css.twig"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
However I want to run these CSS files through Twig, is this in any way possible while using the {% stylesheets %} tag or does this require some other approach. I've already tried enabling a twig filter but that does not exist.
You could do it if you load the css as an internal stylesheet. Something like this:
{% block stylesheets %}
{{ parent() }}
{% include 'AcmeBundle:Bundle:mycss.css.twig' %}
{% endblock %}
And then the mycss.css.twig template would contain:
<style type="text/css">
/* */
</style>
Most common things you'd want to do by processing CSS with Twig should be possible with Sass, LESS or similar, which can be applied as Assetic filters. First tutorial Google threw up was this one: http://alexandre-salome.fr/blog/Sass-Compass-Assetic-In-Ten-Minutes
Admittedly, that doesn't look like much help if you're unable to run Ruby/Node.js/whatever on the production server you're developing for, but it should be possible to create an Assetic filter based on one of the PHP ports of Sass/LESS (assuming they're any good) if that's the case.