4

I have different Bundles: MainBundle (Homepage), SecurityBundle (Login, Registration), MessageBundle (Message System), ShopBundle.

I also follow the three stage layout schema (::base.html.twig, AcmeMainBundle::layout.html.twig, AcmeMainBundle:Default:index.html.twig).

But I have problems sharing common js libaries through the application (e.g. jquery) and defining a base.css (which sets some base classes, backgrounds, fonts etc.)

So whats the best approach to use shared css and js withouth having to lose assetic support?

One idea would be to create a CommonBundle which holds all global js and css and some layout files but I don't think this is the best way to handle this...

bodokaiser
  • 15,122
  • 22
  • 97
  • 140

2 Answers2

17

If you want to share common assets among all your bundles, the best choice is to place them in the app/Resources/public directory. For example:

app/Resources/Public
|-- css
|   `-- base.css
|-- js
|   `-- jquery.js

Then you can reference them in your layout as follow:

{% block stylesheets %}
  {% stylesheets '../app/Resources/public/css/*' %}
    <link rel="stylesheet" type="text/css" charset="UTF-8" media="all" href="{{ asset_url }}"/>
  {% endstylesheets %}
{% endblock %}

{% block javascripts %}
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  {% javascripts '../app/Resources/public/js/*' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

Remark: As you can see, for common libraries like jQuery, the best choice remains the use of common cached version hosted at Google. This kind of practice can speedup your application response time.

fsenart
  • 5,661
  • 2
  • 35
  • 54
  • 2
    I found a even better way to do this: You can define own libaries in the assetic section of config.yml which contains your libs with dependencies. These can easily get load with a shortcut. See here for details: http://stackoverflow.com/questions/10830129/with-assetic-twig-symfony2-can-i-define-front-end-libraries – bodokaiser Jun 25 '12 at 15:57
  • This is all about the school you like to follow. The solution you found, hides the detail of the asset's path into the config.yml and the solution I suggest embeds such details directly in the Twig template. – fsenart Jun 25 '12 at 16:03
  • 1
    Indeed! I still hang a bit making a background image in app/Resources/public/img available in a css file. I have used css rewrite but assetic doesn't seem to know that you can store images in the base dir – bodokaiser Jun 25 '12 at 16:09
  • After trying ways (Using web directory, way suggested here and creating a design bundle), I think creating a design bundle is the best answer – Mohammad Ali Akbari Dec 04 '12 at 20:04
0

Using a recent version of Symfony (2.5) I have seen that the fsenart's response did not work in my case. Instead I put the public folder with the shared content into the web folder :

web/public
  --js
  --css

Then to use it in the main layout the following code works :

{% block javascripts %}
    {% javascripts 'public/js/*' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

But for this to work to not forget to call the Twig parent() function when using the javascript block in a child layout.

websoft102030
  • 55
  • 1
  • 4