I would like add CSS to one Action/View in my Project. In Symfony i can use for this config/view.yml in specific folder. This add CSS to section HEAD.
In Symfony i use:
{% stylesheets 'bundles/acme_foo/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
but this add CSS in current place, not in section HEAD. How is the best method in Symfony2 to add CSS and JS for one action/view in section HEAD of HTML?
You can add it as a code-block by extending the template.
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'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.