Images in CSS Asset in Symfony2

Question

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:

src/Bundle/Resources Directory

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.

The /web directory

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.

chrisben · Accepted Answer · 2014-10-16 20:37:01Z

2

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 %}

answered Oct 16, 2014 at 20:37

chrisben

9558 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Images in CSS Asset in Symfony2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related