Symfony2: assetic, rewriting image paths in CSS

Twig template:

 {% block stylesheets %}  
{{ parent() }}
{% stylesheets filter='cssrewrite' output='css/*.css'
'bundles/testcompanytestbundle/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% endblock %}

Console commands:

 php app/console assets:install web/

 php app/console --env=prod assetic:dump  

CSS example

Before rewriting (original CSS):

 #box { float: left; height: 30px; width: 30px; padding-right: 65px; padding-bottom: 5px; padding-top: 5px; background-image: url('../images/share_bubble.png'); background-repeat: no-repeat; text-align: center; color: white; }  

After rewriting:

 #box { float: left; height: 30px; width: 30px; padding-right: 65px; padding-bottom: 5px; padding-top: 5px; background-image: url('../bundles/testcompanytestbundle/images/share_bubble.png'); background-repeat: no-repeat; text-align: center; color: white; }  

It’s cool :–)

This entry was posted in assets, CSS, rewrite, Symfony2. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s