Symfony2 - How to set CSS path based on current user without losing twig and filter functions

Question

I am working on a project with multiple localizations using Symfony2, and I am sharing (CSS / Images) in different folders based on the current local user.

Ex folder structure:

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

** Now I need Assetic to display the correct home.CSS file based on the current user local {ar | ru} without loss of branch functions and filters **

Example - this does not work:

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

Note: I want to use css compine, and this cannot be done if I do the following:

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

How can i do this...

I found the link, but I think there is a more professional way to do this.

How to insert style sheets with Assetic based on value in a session

Please any suggestions?

Answer 1

Assetic provides you with functionality.

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 you decide which css should be loaded.

Answer 2

Maybe you 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 bit verbose, but in this way all your css files will be merged and a good user will serve the user.

Answer 3

It's 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')); } 

Note. To check if you forget to omit the cache