I have added a css file to src/MyApp/MyBundle/Resources/public/css/my.css
Using assetic how do I include it? I've tried {% stylesheets 'bundles/myapp_my/css/*' filter='cssrewrite' %} but it's not coming through.
Is the bundles/myapp_my/css/* format correct?
I've followed http://symfony.com/doc/current/cookbook/assetic/asset_management.html but I'm really not clear on what format (see the line above) I should be using. An underscore separating the app name from the first word of the bundle?
Any help appreciated, thanks.
Edit: the full code I'm using to include it is this:
{% block stylesheets %}
{% stylesheets 'bundles/myapp_my/css/**' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
That is correct, but then afterwards, you have to do app/console assets:install; app/console assetic:dump to use everything in the production environment. If you are using dev, the controller should serve up the files dynamically so you can edit it on the fly.
Related
I use asseticBundle for my files but when I use php app/console assets:install and php app/console assetic:dump, all my files are transfered except images.
{% block stylesheets %}
{% stylesheets filter='cssrewrite'
'#BattutaBackBundle/Resources/public/libs/bootstrap/css/bootstrap.min.css'
'#BattutaBackBundle/Resources/public/libs/font-awesome/css/font-awesome.min.css'
'#BattutaBackBundle/Resources/public/libs/iCheck/skins/flat/green.css'
'#BattutaBackBundle/Resources/public/libs/animate/css/animate.css'
'#BattutaBackBundle/Resources/public/libs/custom.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
{% endblock %}
I have images like green.png but they not transfered. that image file is important because I use it for checkbox background. How can I do ?
If you are talking about resources referenced inside css files:
Symfony2 - Assetic - load images in CSS
You need to use css filters which will process the css and get images required and dump them appropriately.
And you cant use #Bundle syntax for this feature.
I created a Bundle in order to include Twitter Bootstap into my project. I'm aware, that there existing Bundles for that but I wan't to take control of it by myself. That means I don't want to install Less compiler and stuff like that.
The .js and .css file are applied well if I include them as follows into my template:
{% block javascripts %}
{% javascripts
'#MyAssetBundle/Resources/public/js/jquery.min.js'
'#MyAssetBundle/Resources/public/js/bootstrap.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% block stylesheets %}
{% stylesheets '#MyAssetBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
I only struggle with including the appropriate fonts in order to use the glyphicons Bootstrap provides.
According to the css definitions the fonts are supposed to be available at ../fonts relative to the css-file. In fact I put them there. But Symfony2 resolves this relative urls into an absolute path and does not find a route for that.
How can I solve this? I really feel like I didn't get a important part of the Symfony2 concepts here.
Use the cssrewrite filter provided by Assetic to correct the paths within your CSS files.
{% stylesheets filter='cssrewrite'
'bundles/myassetbundle/css/bootstrap.min.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Make sure that you are using the bundles/myassetbundle/... notation instead of the #MyAssetBundle one.
Read the Symfony docs about this matter.
I also had this issue.
The answer from #albertedevigo is working just fine but there might be a case when you need to take an additional precaution:
Make sure you have extracted the full bootstrap zip before moving its files in your web folder.
I first only moved them from inside the ZIP and they would appear in green in my windows explorer and I could not access them. So make sure you unzip the folder first before moving its content and have the full access write on the files.
i didnt understand how assethic paths works..
{% block stylesheets %}
<link href="{{ asset('/bundles/dproc/css/base.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
My css and images are in /bundles/dproc/ directory. The code i showed below works, but i cant understand why should i use asset function, i can do it like this and get the same result
{% block stylesheets %}
<link href="/bundles/dproc/css/base.css" type="text/css" rel="stylesheet" />
{% endblock %}
So what does asset function? Or how should my path look like with asset function?
Because you probably shouldn't even use it like that. You should probably use Assetic with css like this:
{% block stylesheets %}
{% stylesheets
'/bundles/dproc/css/base.css' {# this will just get base.css #}
'/bundles/dproc/css/mycustomdir/* {# this will find all css files in that dir #}
%}
<link href="{{ asset_url }}" rel="stylesheet">
{% endstylesheets %}
{% endblock %}
By setting it up like this (with default config), in dev environment you will get exactly the same thing as if you just used <link .... > without assetic. But in production environment, your whole stylesheets assetic block will be merged into one file to reduce number of requests.
Later, you can set up some css and javascript minifiers and make them run in production environment. So, when you switch to production, you will have nice,economic css and javascript, while in dev invironment you will have exactly what you'd expect if you didn't use assetic at all.
Furthermore, if you use less or sass or something that needs to be precompiled, you could just include those files and tell assetic to recompile them automatically when they are changed.
I hvae the css located in
app/Resources/FOSUserbundle/css
How can i include that in my twig template
The reason i am putting css there is that my all overridden FOSUser templates in in that folder. So i want to keep css , js images all in there so that if i need to use in other website i just copy that folder
I'm not quite sure how you would include that in your TWIG templates, but ...
1) I put the resources I use in several bundles / projects in the web/ directory. Then you can reference then like this:
{% stylesheets 'css/styles.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
2) If you need to override the FOSUserbundle anyway, you can put the resources inside the inheriting bundle, referencing them like this:
{% javascripts '#YourBundle/Resources/public/js/scripts.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
What you have done is perfectly all right.
Just do the following:-
$ app/console assets:install web
It will install the assets in the public "web" directory, where the assets should technically be, to be used with your Twig Templates.
Assets can then be used within Twig templates like this:-
{% block stylesheets %}
<link href="{{ asset('/css/main.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('/js/main.js') }}" type="text/javascript"></script>
{% endblock %}
Although the question suggests and override case, it also aks for a case where the css or js are in a common folder, away from the bundle structure.
One answer is to use the available twig variables. For example if I have one css file located here
app/Resources/views/clientSite/customFolder/css/mycss.css
I can load in any template using something like this (note the example overrides the full stylesheets block, but not required, the stylesheet twig tag can be added in any block):
{% block stylesheets %}
{{ parent() }}
{% stylesheets '%kernel.root_dir%/Resources/views/clientSite/customFolder/css/mycss.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Also remember to execute the assetic:dump command, so symfony knows it had to publish the css to the web/css folder with all the other files.
Is there a way to pass a variable to the Assetic method in templates
{% stylesheets
'#SomeExampleBundle/Resources/views/ SOMEVAR /css/*'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
So what I want to do is pass SOMEVAR from the controller.
It is possible through this way :
<link rel="stylesheet" href="{{ asset('bundles/yourbundle/css/'~ SOMEVAR ~'/css/' ) }}" />
For now, I don't think it is possible at all. The reason behind this is that Assetic is run upfront to dump the assets, so it does not run the Twig template to compute the variable. This is probably the same if you do it in a PHP template.
This means that runtime variables will not be computed and expanded. Thus, this make it impossible to generate the assets if a variable is used. This may change in the future, but this would incur an overhead in production each time the assets are requested by the user because Assetic would need to generate the assets.
I know it is possible to programmatically defines and generates the asset by using the code found in Assetic directly (not by using the AsseticBundle). You will need to experiment, read the source code, and do trials and errors to work out off this problem.
There is little to no documentation on Assetic at the moment. The only link I can give is the README found on the github page of Assetic here. I hope this will change soon.
Hope this helps.
To elaborate a bit on Chopchop's answer:
First you need to include all files that assetic needs to dump, as it needs to know what you need dumped. What you can make in a conditional manner is the inclusion of the asset itself at runtime.
So first put in the assetic part:
{% javascripts
'#ExampleComBundle/Resources/public/js/module1.js'
'#ExampleComBundle/Resources/public/js/module2.js'
%}
{% endjavascripts %}
Now you can put in the condition that you wanted. Both those script will be dumped at deployment time but you will be able to choose at runtime which one to include:
<link rel="stylesheet" href="{{ asset('bundles/examplecombundle/js/module' ~ WHICH_MODULE_TO_INCLUDE ~ '.js ) }}" />
The ~ character is just the concatenation operator in Twig templates.
Works of course the same with CSS and JS.
Another alternative, which works with limited ranges of options (Piotr's solution didn't work for me in dev mode):
{% javascripts
'#AcmeDemoBundle/Resources/public/js/module_A.js'
output='js/module_A.js'
%}
{% if myVar == "A" %}
<script src="{{ asset_url }}"></script>
{% endif %}
{% endjavascripts %}
{% javascripts
'#AcmeDemoBundle/Resources/public/js/submodule1_B.js'
'#AcmeDemoBundle/Resources/public/js/submodule2_B.js'
'#AcmeDemoBundle/Resources/public/js/submodule3_B.js'
output='js/module_B.js'
%}
{% if myVar == "B" %}
<script src="{{ asset_url }}"></script>
{% endif %}
{% endjavascripts %}
...
That way, each module will be dumped on deployment or dynamically handled by assetic, AND you can choose which module to be included, using myVar.
Note: I used the javascripts block here, but it will work the same with stylesheets.
Maybe I didn't understand, but... are you trying to do this?
{% stylesheets
'#SomeExampleBundle/Resources/views/' ~ somevar ~ '/css/*'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Because, as far as I know, the string passed to stylesheets is a valid Twig expression, so you're free to use variable interpolation.
Anyway, I don't think it's a good practice to have dynamic assets. What do you exactly want to achieve? There may be a better solution.