Symfony2: Beautify with Assetic and a Template – Part II

If you were like me that was trying to get the css stylesheet loaded from different paths then you would have run into the same problems that i did. I was using the cssrewrite, a very weird and undocumented thing seen around. What this filter cssrewrite does is basically reads into your css stylesheets and seeks to make paths like background-image: url(‘pathtoimage/file.jpg’); relative with respect to the folder in which the css file is in and placed when dumped to web subfolders.

Problem: The cssrewrite filter still does not support grabbing files from two different loading paths. What this means is basically you need to follow more closely how things are done the symfony2 way.

Here is the practical example and solution:

I first have this, and was also using both filters cssrewrite and yui_css for compressing and merging into single file to avoid many HTTP requests:

{% stylesheets output='css/*.css' filter='cssrewrite,?yui_css' debug=false
    '@CordovaXBundle/Resources/public/css/main1.css'
    '@CordovaXBundle/Resources/public/css/main2.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

You can see here that I was telling the filters to work with paths relative to my bundle directories. So whenever I generated the css file the url paths inside the stylesheet were trying to pull assets that were not available or were in the wrong path or were accessed through the app_dev.php on the dev environment. This is not good, if you want to make this work do the following:

{% stylesheets output='css/*.css' filter='cssrewrite,?yui_css' debug=false
    'bundles/cordovaX/css/main1.css'
    'bundles/cordovaX/css/main2.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

What I have done here? Basically I unfolded the process into two steps:

1. I dump assets with php app/console assets:install --symlink web.

Note: This will place all my assets into the web/bundles/cordovaX/css, web/bundles/cordovaX/images, and web/bundles/cordovaX/js folders. Notice that previously I have moved all my assets for the bundle CordovaXBundle into the public path: src/Cordova/XBundle/Resources/public/css, src/Cordova/XBundle/Resources/public/images, and src/Cordova/XBundle/Resources/public/js respectively.

2. I tell the csswritefilter to generate relative paths with the step1 above in mind with:

{% stylesheets output='css/*.css' filter='cssrewrite,?yui_css' debug=false
    'bundles/cordovaX/css/main1.css'
    'bundles/cordovaX/css/main2.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

This has been verified to work in dev and prod environments. Of course make sure you clear the cache again and again for every change if you are not using the pearl of –watch for when you run the assets:install command (see my earlier post on assetics for this Part I).

Acknowledgements: To kriswalsmith, to cmwelsh and many others for bearing with me.

Results!

Before and After:

4 thoughts on “Symfony2: Beautify with Assetic and a Template – Part II

  1. Hi! Pls, help me. Image from my CSS don;t loading…. I do:

    In app/config.yml:

    assetic:
    bundles: [VanchoZBundle]
    #java: /usr/bin/java
    filters:
    cssrewrite: ~

    Next I did command:

    php app/console assets:install web –symlink

    ….and symbolic links succefully created.

    In Twig template, in header:

    {% stylesheets
    ‘bundles/vanchoz/manage3/css/default.css’
    filter=’cssrewrite’ %}

    {% endstylesheets %}

    In CSS:

    background-image: url(‘../images/a5.gif’);

    Folders ‘css’ and ‘images’ on one level took place in: Vancho/ZBundle/Resources/Public/Manage3/…

    I tried also:

    php app/console cache:clear

    php app/console assetic:dump
    ….

    In fact, only images don’t appears. Whats wrong???
    Please, help me!!!

Leave a Reply

Your email address will not be published. Required fields are marked *