Images in CSS Asset in Symfony2 - css

I have the following problem:
I included the CSS File from fancybox into my base.html.twig file:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'#Bundle/Resources/public/css/site.css' filter='cssrewrite'
'#Bundle/Resources/public/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}
My directory is the following:
The Problem I'm fancing now is that fancybox can't find the fancybox_sprite.png,fancybox_overlay.png and fancybox_loading.gif.
Here's one of the paths in the jquery.fancybox.css:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../images/fancybox_sprite.png');
}
Here's the path that the browser is looking for:
http://project/Resources/public/images/fancybox_sprite.png
What I also found out is that the /images directory won't be loaded into the /web dir, but in the /bundles dir, though I used assets:install, assets:install --symlink and assetic:dump.
Why can't the system read the images or why aren't the images loaded into the /web dir?
I found a few Questions on SO about this, but neither of them helped me.

Do not use the #Bundle notation with cssrewrite, it is known to fail -- read the second notice here.
You should instead write the relative path to your css files from the web folder. Once you have exported your assets using bin/console assetic:install, your new base.html.twig should read:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'bundles/something_online/css/site.css' filter='cssrewrite'
'bundles/something_online/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}

Related

css and scss in twig file

I want to include a .css and .scss file in a twig template, is it necessary to write is this way?
{% stylesheets filter="sass"
"css/proposal/edit.scss"
"bundles/bmatznerfontawesome/scss/font-awesome.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% stylesheets
"bundles/simplemde/debug/simplemde.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I dont like the redundant writing, but when I try to link the css file in the first block that is filtered for scss files it wont work.
Remove the filter attribute and add an 'apply_to' option in your config :
// app/config.yml :
assetic:
# ...
filters:
sass:
# ...
apply_to: ".scss$"
Then you can group everything in the first :
{% stylesheets
"css/proposal/edit.scss"
"bundles/bmatznerfontawesome/scss/font-awesome.scss"
"bundles/simplemde/debug/simplemde.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Symfony2 asset_version being added twice

My config.yml looks like so
framework:
templating:
engines: ['twig']
assets_version: 2
And my twig template has this
{% block stylesheets %}
{% stylesheets output='css/compiled/main.css'
'#AppBundle/Resources/public/css/bootstrap.min.css'
'#AppBundle/Resources/public/css/main.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset(asset_url) }}" />
{% endstylesheets %}
{% endblock %}
This works but the output has the version param twice.
/css/compiled/main.css?v=2?v=2
I have no idea why this is happening and I am not overriding the assets_version_format either. I even searched my whole project for it just in case.
This only occurs though in my production env, dev is fine and works correctly with just one query param.
It should be:
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
(do not put asset_url within an asset() function)

Twig Error: Unknown tag name "stylesheets"

I'm creating small blog on Silex, using Twig for rendering views. Now I've got an error:
Unknown tag name "stylesheets" in "index.html" at line 5
Here is my stylesheet tag:
{% stylesheets '../css/main.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
As I understood, we can not use tag, because it's only Symfony2 approach and this tag related to AsseticBundle. So how I can include stylesheets without it?
The solution for me was:
{% block stylesheets %}
<link href="../css/main.css" rel="stylesheet" type="text/css" />
{% endblock %}

load css in child of a twig

I have a super class twig which has the following block:
{% stylesheets filter='css_url_rewrite,?yui_css'
'#MainBundle/Resources/public/css/bootstrap.css'
'#MainBundle/Resources/public/css/vendor/*.css'
'#MainBundle/Resources/public/css/_normalize.css'
'#MainBundle/Resources/public/css/main.css'
'#MainBundle/Resources/public/css/fonts.css'
'#MainBundle/Resources/public/css/include/*.css'
'#MainBundle/Resources/public/css/footer.css'
%}
I have another twig that extends from the twig above, but I wanted to add an additional css on this page, so I did:
{% block stylesheets %}
{{ parent() }}
{% stylesheets filter='css_url_rewrite,?yui_css'
'#ShopiousMainBundle/Resources/public/css/shippingconfirm/*.css'
%}
{% endstylesheets %}
{% endblock %}
however this doesn't import the css that I have inside shippingconfirm,
Any idea on how to fix this?
You need to set the link element again in your stylesheets block. So it should work with the following:
{% block stylesheets %}
{{ parent() }}
{% stylesheets filter='css_url_rewrite,?yui_css'
'#ShopiousMainBundle/Resources/public/css/shippingconfirm/*.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
But your additional stylesheets in the shippingconfirm folder will be in an extra file. Assetic won't put all stylesheets (css from parent and css from the current template) into one file.
A similar question was posted here: Combining Assetic Resources across inherited templates
There you can find some approaches to fix your problem.

Error 404 in symfony 2 web forlder

I wanted to add stylesheet with a variable inside
{% stylesheets combine=true
'#MyBundle/Resources/public/css/*'
'#MyBundle/Resources/public/XXX/css/*'
'#CramifCramifKitBundle/Resources/public/jquery/css/' ~ jquery_theme ~ '/jquery-ui-1.1.10.custom.min.css'
filter='cssembed'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
but it is not possible to put variables in the {% stylesheets %} block.
so I decided to do that way :
{% stylesheets combine=true
'#CramifCramifKitBundle/Resources/public/css/*'
'#CramifCramifKitBundle/Resources/public/JQMenu/css/*'
filter='cssembed'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
<link type="text/css" rel="stylesheet" href="{{ asset('bundles/mybundle/jquery/css/' ~ jquery_theme ~ '/jquery-ui-1.1.10.custom.min.css') }}" />
of course I ran the command line : assets:install
The resources are in the web/bundles/mybundle folder, no problem
The problem is that the server returns a 404 error (the path is right thugh). More than that, when I type in the browser the url even to the bundles folder under web, same error 404
Maybe you can tell me another way to load css with dynamic paths
It's a known problem in Assetic :
try to replace #BundleName/Resources/public/ by bundles/names/{css, js, images or whatever}/*
in your {% stylesheets %} block
More informations here : https://github.com/kriswallsmith/assetic/issues/53#issuecomment-2523420

Resources