5

I'm trying to understand symfony2 assetic bundle. I'm trying to use a jquery plugin which uses it's own css file. I've put everything in mybundle/Resources/public and then split into images/ javascript/ and css/

The plugins css is using relative paths to get the images like ../images/sprite.png

Using assetic to serve the css file: 

{% stylesheets
    '@MyBundle/Resources/public/css/mycss.css' 
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

The path generated by assetic is /app_dev.php/css/mycss.css, which is correct i guess. Obviously the relative image pathes are not working anymore now. Because the files itself are located in mybundle/Resources/public and not in /images/

When trying to use the cssrewrite filter, the pathes are rewritten to: http://server.com/Resources/public/images/sprite.png. But this i not correct, the files are not located there.

How can i serve the images relative using assetic?

hakre
  • 193,403
  • 52
  • 435
  • 836
patchrail
  • 2,007
  • 1
  • 23
  • 33
  • I asked a similar question: http://stackoverflow.com/questions/9500573/path-of-assets-in-css-files-in-symfony2 (you can see my tries to solve it there, too) – apfelbox Feb 29 '12 at 15:41

1 Answers1

3

You can spell out the output path and not use cssrewrite at all.

{% stylesheets output="bundles/zaysoarbiter/css/forms2.css"
    '@ZaysoArbiterBundle/Resources/public/css/forms2.css'
%}

And then of course you use assets:install to copy your images to web/bundles/bundle/images or wherever. As far as the browser is concerned, your css and images are now located relative to each other. In production you will use assetic:dump to move the actual generated css file over.

Gottlieb Notschnabel
  • 9,408
  • 18
  • 74
  • 116
Cerad
  • 48,157
  • 8
  • 90
  • 92
  • 2
    When using this solution, the path in dev environment for images is: app_dev.php/bundles/mybundle/images/sprite.png, which results in a NotFoundHttpException. Do you also have a solution for serving them dev env? – patchrail Mar 01 '12 at 08:17
  • Since images tend not to change I just use asset:install to install them on my dev machine. So while the css gets dynamically generated the images just sit there. You can use use the --symlink option to avoid having to make actual copies. – Cerad Mar 01 '12 at 15:07
  • I guess i misdescribed my problem a little. When having "app.php" or "app_dev.php" in my url (e.g.: app.php/bundles/mybundle/images/sprite.png), the result is a 404. When leaving the app.php / app_dev.php (e.g.: bundles/mybundle/images/sprite.png), the path is fine and the image is being served. Assetic serves the css files through your current environment. If you're using app_dev.php, it's also in all assetic generated style urls. Means all relative image pathes (inside the .css files) are using app_dev.php too, resulting in the url i mentioned above. – patchrail Mar 01 '12 at 15:56
  • Ok. I use the standard .htaccess delivered in the symfony web directory so I don't actually have app_dev.php in my urls. The .htaccess file takes care of checking to see if a real file under the web directory is being requested before calling the php code. – Cerad Mar 01 '12 at 16:12