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.
Related
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.
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'm currently developing a web application using Symfony 2.1.0.
I've read through the Templating chapter of the book and I'm trying to include assets (right now, it's just a single stylesheet) in my web pages.
I'm using the Three-level inheritance system that is mentioned in the book, and my application structure currently looks like this:
app/Resources/views/
base.html.twig: base template, containing title, stylesheets and body blocks.
src/My/PageBundle/Resources/views
layout.html.twig: layout template (extending the base template), appending the main stylesheet to the stylesheet block, and overwriting the body block, including navigation.html.twig and defining a content block
layout-admin.html.twig: same thing as above, but including navigation-admin.html.twig
src/My/PageBundle/Resources/views/Main
standard templates, extending the layout template and overwriting its content block
src/My/PageBundle/Resources/views/Administration
administration templates. Same thing as above, but extending the administration layout template.
src/My/PageBundle/Resources/public/css
main.css: main stylesheet
As you can see, I have put the stylesheet in my bundle. I don't know whether this is good practice or not.
Now, the thing is, in layout.html I added this:
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" type="text/css" href="{{ asset('css/main.css)' }}" />
{% endblock %}
But asset('css/main.css') is just linking to /css/main.css, whereas ./app/console assets:install installs the assets in web/bundles/mypagebundle/. I don't like the fact that this way, my bundle name would be publicly visible (which could make users suspect I'm using Symfony, and I like keeping the internals of my webpage, well, internal). Is it possible to change the directory where assets:install would install the assets? It seems tedious to me to manually install the assets in web/.
I'm also thinking about using Assetic for asset management, as I personally like the possibility to automatically minify my scripts/stylesheets and store them all together in one file. However, I hear that this is not possible if you include stylesheets at different levels, i.e. it wouldn't work with the three-level inheritance system. Is it possible to work around that? Also, would using Assetic enable me to hide my bundle name from the public?
Using assetic would address all your issues.
I hear that this is not possible if you include stylesheets at different levels, i.e. it wouldn't work with the three-level inheritance system
You can, but it will generate a css file for each level (just like with asset(), actually).
Example:
layout:
{% block stylesheets %}
{{ parent() }}
{% stylesheets 'main.css' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
sub-template:
{% block stylesheets %}
{{ parent() }}
{% stylesheets 'sub.css' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
result:
<link rel="stylesheet" type="text/css" href="..." />
<link rel="stylesheet" type="text/css" href="..." />
Alternatively sub-template can completly override the stylesheets block, so that only one stylesheet is generated (but it's less dry):
{% block stylesheets %}
{% stylesheets 'main.css' 'sub.css' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
result (in production / non debug):
<link rel="stylesheet" type="text/css" href="..." />
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.