Serving relative images using assetic

Question

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?

Partlet

I asked a similar question: #9501073 (you can see my tries to solve it there, too) – Spielman

Answer 1

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.

Marvelofperu

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? – Partlet

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. – Marvelofperu

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. – Partlet

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. – Marvelofperu