Symfony2 - Assetic - load images in CSS

Question

I have a CoreBundle that contains main css files and images. Now I have a problem when I load an image from css; the image isn't shown.

 background-image:url(../images/file.png)

(with a full path it works)

I installed the assets using the command: assets:install web and i can see the image and css files under web/bundles/cmtcore/(css|images).

Here's the file structure inside the core bundle:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

And here's how I load the css file into the template:

 {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Thank you for your help in advance.

I have same issue. Trying to solved it by images folder to css, but that didn't work — user257980, Aug 13 '11 at 11:43

score 54 · Accepted Answer · edited Sep 28 '14 at 11:44

54

use the cssrewrite filter from Assetic bundle

In config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

And then call your stylesheets like this:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Oh and don't forget to use php app/console assetic:dump

edited Sep 28 '14 at 11:44

ggirtsou

2,050
2
20
33

answered Aug 15 '11 at 13:16

Inoryy

8,365
2
39
40

13

My issue with this solution is that symfony tries to find the images at /Resources/public/css/* when it should be looking to /bundles/mybundle/images/ ... any ideas on that one? – Clint Nov 09 '11 at 23:21
1

cssrewrite is used to rewrite paths to images in css. It doesn't "look for images", it doesn't even know what an image is. – Inoryy Nov 10 '11 at 08:45
10

okay, well cssrewrite is rewriting my paths to my images to /Resources/public/css/* When it should be rewriting it to /bundles/mybundle/images/ Do you know of a way to change that in cssrewrite? – Clint Nov 10 '11 at 23:38
It will do that only if you've configured assetic incorrectly. Please make a separate question with your code – Inoryy Nov 11 '11 at 15:43
8

Inor - using the default assetic config (which is what you have used above) i am getting the same problem as Clint. css and js files are fine but inside the css file, it looks for images in "../../Resources/Public/css/img" when it should look in "bundle/bundlename/img" ? – Mr Pablo Feb 20 '12 at 14:02
I'm having the same problem. Has anybody gotten past that one? – Jason Swett Mar 31 '12 at 23:44
@Jason Try what's suggested below, i.e. 'bundles/demo/css/*' instead of '@AcmeDemoBundle/Resources/public/css/*' – Inoryy Apr 01 '12 at 06:28
I'm already doing it the way that's suggested below. Doesn't work. – Jason Swett Apr 01 '12 at 06:30
1

And then the real issue comes out... a limitation of assetic. https://github.com/kriswallsmith/assetic/issues/53 – Clint Apr 23 '12 at 23:27

score 16 · Answer 2 · edited May 11 '15 at 09:58

There was few issues with ccsrewrite:

the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.

Here is php version for cssrewrite:

<?php 
    foreach ($view['assetic']->stylesheets(array(
        'bundles/test/css/foundation/foundation.css',
        'bundles/test/css/foundation/app.css',
        'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url):
?>
    <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach; ?>

score 13 · Answer 3 · edited Oct 21 '13 at 15:29

13

I solved the problem by following the instructions on this site: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

The actual problem is that you reference your bundle resources absolute, but must reference them relative.

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

Clear your cache and install your assets again

edited Oct 21 '13 at 15:29

Jake N

10,535
11
66
112

answered Sep 13 '11 at 18:49

Yann

139
2

1

Don't you have to install the assets after every change (even in dev environment) with this method? i'll try it out. – LBridge Sep 14 '11 at 20:38
@tobias, yes, I just tried this and you do indeed need to install the assets after each change. Eeek. – Clint Nov 09 '11 at 23:16
this worked for me. i would develop my assets in web/bundles... and later when the bundle should be distributed copy them back to the bundle to commit – ivoba Jul 04 '12 at 17:45
1

You can do `php app/console assets:install --symlink` to develop the files inside your bundle as usual and won't need to install them after each change – Ramy Nasr Jun 27 '14 at 15:19

score 6 · Answer 4 · answered Jul 16 '12 at 18:26

6

I have developed a small bundle with a extra filter to solve this issue. You can find it on github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

With this bundle the @Notation for assetic works if you have relativ paths in your css file.

answered Jul 16 '12 at 18:26

fkrauthan

498
4
8

without really understanding what your code does I have to say it works wonders. Thank you very much =) – azzy81 Aug 14 '13 at 14:58

score 6 · Answer 5 · edited Dec 19 '11 at 23:28

6

Regarding Yann's answer, actually you don't have to re-install assets after every change if you use the --symlink option.

Note, however, that running the vendors install script will overwrite the symlinks, so you'll need to delete the bundles/* folders and install the assets with the --symlink option again after running the vendors script.

edited Dec 19 '11 at 23:28

James Allman

40,573
11
57
70

answered Dec 19 '11 at 23:17

tystr

61
1
2

Or add an option in composer.json to use --symlink instead (if you are using 2.1+) – ChocoDeveloper Nov 19 '12 at 10:08

score 1 · Answer 6 · answered Nov 17 '12 at 18:34

I solved this using htaccess:

My assets are stored in src/Datacode/BudgetBundle/Resources/public/(css|img|js) and the assetic output parameter is set to write to: bundles/datacodebudget/css/styles.css (in web directory)

In my css i use the relative path ../ to reference images.

Here is the .htaccess rule:

# Make image path work on dev
# i.e. /app_dev.php/bundles/datacodebudget/img/glyphicons-halflings-white.png rewrites to /bundles/datacodebudget/img/glyphicons-halflings-white.png
RewriteRule ^app_dev\.php/(.*)/(.*)/img/(.*)$ /$1/$2/img/$3 [L]

My css is loaded as follows:

{% stylesheets
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap.css'
    '@DatacodeBudgetBundle/Resources/public/css/bootstrap-responsive.css'
    '@DatacodeBudgetBundle/Resources/public/css/styles.css' 
    '@DatacodeBudgetBundle/Resources/public/css/chosen.css' output="bundles/datacodebudget/css/styles.css"
%}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}

In my config.yml file i have:

assetic:
    use_controller: true

Which (without the htaccess rewrite) causes the images not to load since the relative path for the image is at app_dev.php/bundles/datacodebudget/img/someimage.jpg. Using the cssrewrite filter doesn't work either because then it rewrites ../img to ../../../../Resources/public/img/ which resolves to Resources/public/img.

By using the htaccess method the images load fine and I only need to run assetic:dump / assets:install when i add new images or want to push changes to production.

score 1 · Answer 7 · answered Dec 19 '13 at 15:51

1

I solved this issue by permanently creating 'images' folder with images inside in 'symfony_root/web/' folder. Result: 'symfony_root/web/images/' - and it becomes work great!

answered Dec 19 '13 at 15:51

yura

169
4
10

Bad advise if you are planning to share your bundles with others. It's better to keep ressources in their bundles. – k0pernikus Jan 30 '14 at 15:09

score 0 · Answer 8 · answered Apr 27 '12 at 22:47

I have a similar problem, and I've looked around for at least a day, and I'm not convinced there's a good practical solution to this problem. I recommend using Assetic to handle javascript and css, and then just putting your images in the docroot of your web site. For example, if you have a css file that references ../images/file.png, just create and images folder under your docroot and put file.png in there. This is definitely not the best theoretical solution, but it's the only one I could find that actually works.

Read user257980's answer and Clint comment. There is a way to do it right. — ChocoDeveloper, Nov 19 '12 at 10:10

LBridge · Answer 9 · 2013-04-07T19:51:54.043

-1

I "solved" this by loading the css file differently:

<link rel="stylesheet" href="{{ asset('bundles/cmtcore/css/main.css') }}" type="text/css" media="all" />

This is the way it is done in Acme/DemoBundle.

I'll leave this question unsolved because this seems silly.

edited Apr 07 '13 at 19:51

answered Aug 13 '11 at 17:16

LBridge

2,135
5
21
32

6

This method works, but it does not use the assetic bundle to load the stylesheet, which means you can't add cool filters like yui_css. – Clint Nov 09 '11 at 22:59

Symfony2 - Assetic - load images in CSS

9 Answers9

Linked