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:ur         


        

Answer 1

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.

Answer 2

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.

Answer 3

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; ?>

Answer 4

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

Answer 5

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.

Answer 6

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.