Symfony2 - Assetic - Load Images in CSS

Symfony2 - Assetic - load images in CSS

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

Symfony2 - Images In CSS with Assetic

I seem to have found a third party bundle that, with a bit of configuration, appears to accomplish what I am looking for: AlexAsseticExtraBundle. The only disadvantage currently is it doesn't do any type of cache busting. However, adding that functionality was as simple as forking/patching and adding the required dependencies to composer.

I still welcome any official/suggested methods of accomplishing this, but for now this seems to work well enough that I'm comfortable using it in production.

Assetic (with Symfony 2) changes the name of image files when 'assetic:dump' is run

Assetic are made for processing assets. Don't use it for the images if you don't like it to process yours images.

First, remove that, you don't need it.

{%image 
  'images/masthead-4.jpg'
%}
{% endimage %}

Next, use php app/console assets:install --symlink for creating the symlink in the web folder. Like that, your CSS file can access the image file.

Symfony2, where to put css, javascript, images

You can put them into the *Bundle/Resources/public/, then run

$ php app/console assets:install --symlink

This will create a symbolic link with the bundle name in your web/bundles/ linking to the existing bundles' public folders. If you want a simpler path in your html (or mainly css) code you can create a symbolic link directly in your web folder.

Symfony2 and Assetic - Images referenced in my CSS won't load

Solved it by changing the reference from:

{% block styles %}
    {% stylesheets '@MajorProductionsSewingDivaSiteBundle/Resources/public/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

to:

{% block styles %}
    {% stylesheets 'bundles/majorproductionssewingdivasite/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

Apparently the auto-magical reference in the first version is not the way to go, despite it being used in the official Symfony docs.

Symfony assetic cssrewrite image path in app/Resources

When you create a public directory in the Resources directory of your bundle, and run the assets:install --symlink command, a symbolic link is created in the web/bundles directory, corresponding to the name of your bundle.

Also, to retrieve your image, you should use the relative path of the web directory instead of the absolute path of your asset, which is :

/bundles/bundlename/images/background.jpg

EDIT

If you really doesn't want to place them inside a bundle, just move them from the app/Resources directly to the web folder, and call it in your css using :

url('/images/background.jpg');

See symfony2 how to access app/Resources/img from browser?

---

Related Topics