In the html file i can access the images folder using asset function but in my css i am not able to us e images
background-image:url(../images/back.png)
{% stylesheets 'css/*' %}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
How to fix that
I use this:
background-image: url(/bundles/yourbundle/images/pic.png)
Works without cssrewrite filter.
This is something that always puzzles me as well! Anyway there is a cssrewrite assetic filter that should help you to solve this problem detecting and rewriting urls in css scripts (anyway, even using this, you may need to change urls in your css).
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'm using the knp-snappy-bundle to generate PDF's out of twig.
But my css files are not loading.
I tried it with static url, with absolute url and with only asset url, noting works, but these are the normal css files which I also use when display for example in my edit form. Here are the three options I tried in my pdf.html.twig file
// STATIC DOES NOT WORK
<link rel="stylesheet" href="https://localhost/test/boot.css">
// ASSET DOES NOT WORK
<link rel="stylesheet" href="{{ asset('test/boot.css') }}">
// ABSOLUTE DOES NOT WORK
<link rel="stylesheet" href="{{ absolute_url(asset('test/boot.css')) }}">
Always get this: Warning: Failed to load https://localhost/test/boot.css (ignore)
I presume you are using wkhtmltopdf, in that case you need to use the absolute path to the css file. Not sure what the path is to your web folder, but something like this:
<link rel="stylesheet" href="/var/www/html/Symfony/test/boot.css">
I had this same problem with wkhtmltopdf and had to hard code it like that.
pdf.html.twig file do not extend with another file. Try this code, it works
<link href="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('test/boot.css') }}" rel="stylesheet"/>
As soon as we're in Symfony you could try in TWIG like the following
{% stylesheets
'test/boot.css'
filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
Your css file should be reside in your Symfony application web/test directory. Check availability in browser
http://localhost/test/boot.css
Should work
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 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.
I have trouble referencing images from my .css file in a symfony2 project. I have a main.css in app/Resources/public/css and my image directory is app/Resources/public/images.
I include the css sheet like so:
{% stylesheets '../app/Resources/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
How would I go about referencing images in my css file?
Use ../ to go to the previous directory (app/Respirces/public/), then proceed with the rest of the URL.
selector {
background-image: url(../images/image.png);
}
Inori's answer helped me with this issue:
Symfony2 - Assetic - load images in CSS
In the end I had to run assetic:dump and then referenced images like this:
background-image: url('/images/background.jpg');