Symfony2 - How to set CSS path based on current user local without losing twig and filters functionality

Question

I work a multi-localization project using Symfony2 , and i separate ( CSS/Images ) on different folder based on current user local.

Folder Structure Ex:

Resources\
    public\
        css\
            ar\
                home.css
            en\
                home.css

**Now i need the Assetic to render the correct home.CSS file based on current user local {ar | en} without loosing twig and filters functionality **

Example - This not work :

{% stylesheets 
    'bundles/atcopcore/css/{ app.request.locale }/home.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />

Note : I want to get advantage of css compine and this can't be done if i do the following :

<link rel="stylesheet" href="{{ asset('css/' ~ app.request.locale ~ '/home.css') }}" />

How i can do this ...

i found a link could be usefull , but i think there is more professional way to do this.

How to embed stylesheets with Assetic based on a value in the session

Please , Any suggestions ?

Kakaaba

Did you try <link rel="stylesheet" href="{{ asset('css/' ~ app.request.locale ~ '/home.css') }}" />? – Spunk

I think this approach will let me not get advantage of combine css files . or am wrong ?! – Kakaaba

Assetic doesn't combine CSS on the fly it processes the files and dumps the output when you run the dump command. So dynamically setting up css files with assetic is at best very impractical. – Roy

Did you manage to come up with a good solution for this ? If you did, could you update your question or reply, it would be really helpfull. – Desiraedesire

Using <link rel="stylesheet" href="{{ asset('css/' ~ app.request.locale ~ '/home.css') }}" /> work form me , but how to do this with images . – Kakaaba

After years of using symfony2 assetic I realized, that assets minification, etc are not backend-dev task. Grunt-like tools are much convenient and powerful ones for assets management tasks. – Gascon

i appreciate you answer @Gascon but am stuck no with this thing :d – Kakaaba

Did u find any good robust solution to ur Question? – Stith

actually no , but as @Gascon better to use something like grunt – Kakaaba

Answer 1

Assetic provides an functionality for you problem.

Add this to your configuration

assetic:
   # more from assetic
   variables:
      locale: [de, en, it, es] # whatever

And in your twig file:

{% stylesheets  filter='cssrewrite' 'bundles/atcopcore/css/home.{locale}.css' %}
{% endstylesheets %}

<link href="{{ asset('bundles/atcopcore/css/home.' ~ app.request.locale ~ '.css') }}" rel="stylsheet" />

Now assetic will create 4 files, home.de.css, home.en.css, home.it.css and home.es.css. And in your template your decide which css should be loaded.

Justinajustine

i can't get this , and its now work , local variable can't be added to the style or image twig tag ? – Kakaaba

Image tags should work thought the {% image 'bundles/mybundle/img/myimage-{locale}.png %} tag. I believe this won't work for style tags. – Justinajustine

Answer 2

You maybe should try something like this:

{% if app.request.locale == "en" %}
    {% stylesheets  filter='cssrewrite'
    'bundles/atcopcore/css/en/home.css'
    'bundles/atcopcore/css/en/foo.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% elseif app.request.locale == "fr" %}
    {% stylesheets  filter='cssrewrite'
    'bundles/atcopcore/css/fr/home.css'
    'bundles/atcopcore/css/fr/foo.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% elseif app.request.locale == "ar" %}
    {% stylesheets  filter='cssrewrite'
    'bundles/atcopcore/css/ar/home.css'
    'bundles/atcopcore/css/ar/foo.css'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endif %}

It looks a little bit verbose, but this way all your css files will be combined and good one will be served to the user.

Recital

of course this is the first thing came to my mind , but i can't apply this in a real project :S – Kakaaba

Answer 3

This is a trick

Your Twig file

{% stylesheets
'@AcmeBundle/Resources/public/css/css.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Your '@AcmeBundle/Resources/public/css/css.css'

/* acme_css */
@import url('/css.css'); 

Your routing.yml

acme_css:
    path:     /css.css
    defaults: { _controller: AcmeBundle:NameOfYourConroller:css}

Your controller

public function cssAction()
{
    $request = $this->get('request');
    // all your css files here
    $css = array(
        "@import url('/css/".$request->getLocale().".css.css');",
    );
    return new Response(implode(';',$css), 200, array('Content-Type' => 'text/css'));
}

NB : To test dont forget to empty your cache

Aiken

i don't want to do any code in my controller , just twig and ascetics. – Kakaaba