Discussion :

[rolandl]

Bonjour,

Je travaille actuellement sur mon premier projet Symfony2 et je souhaiterais utiliser Bootstrap et jQuery, le tout avec Assetic. je travaille actuellement dans un environnement de développement (app_dev.php).

Ma première question concerne l'endroit où je dois mettre les fichiers images, css, javaScript et les images de ces différents outils. En effet, ces ressources sont globales à mon application et je ne trouve donc pas logique de les placer dans le dossier Resources d'un Bundle. Aussi, j'ai placé ces ressources dans le dossier app\Resources\public.

Ce dossier contient l'arborescence suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    css
        bootstrap.min.css
        jquery-ui.min.css
        my-css.min.css
    fonts
        glyphicons-halflings-regular.eot
        glyphicons-halflings-regular.svg
        glyphicons-halflings-regular.ttf
        glyphicons-halflings-regular.woff
    js
        bootstrap.min.js
        jquery-1.9.1.min.js

Les layouts des différentes routes de mes Bundles héritent toute de mon layout.html.twig qui se trouve dans le dossier app\Resources\views. Dans ce dossier, je charge le css et je javaScript de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!-- CSS -->
{% block stylesheets %}
  {% stylesheets filter='cssrewrite'
    '../app/Resources/public/css/bootstrap.min.css'
    '../app/Resources/public/css/jquery-ui.min.css'
    '../app/Resources/public/css/my-css.min.css'
  %}
  <link href="{{ asset_url }}" rel="stylesheet" media="screen">
  {% endstylesheets %}
{% endblock %}
 
<!-- JS -->
{% block JavaScript %}
  {% javascripts
    '../app/Resources/public/js/jquery-1.9.1.min.js'
    '../app/Resources/public/js/bootstrap.min.js'
  %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

Les fichiers css semblent correctement se charger mais quand j'utilise glyphicon, les icônes ne se chargent pas et la console développeur de Firefox me signale le problème suivant :

GET http://localhost/mylibrary-web/app/R...s-regular.woff [HTTP/1.1 403 Forbidden 4ms]

J'ai essayé de modifier le fichier security.yml de la façon suivante, mais sans succès :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
firewalls:
    dev:
        pattern: ^/(_(profiler|wdt|error)|css|images|js|fonts)/
        security: false

Les questions sont donc les suivantes :
* Comment puis-je autoriser l'accès au dossier "fonts" ?
* Ou dois-je mettre les ressources (css, js, images, etc.) globales à l'application ?

Merci d'avance pour votre aide !

[rolandl]

J'ai finalement décidé de ne pas utiliser Assetic...

Je mets les fichiers CSS, JS et ttf directement dans le dossier `web\bundles\app directory` du projet et j'importe le CSS et JS de la façon suivante dans mon layout twig :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<link href="{{ asset('bundles/app/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('bundles/app/css/jquery-ui.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('bundles/app/css/custom.min.css') }}" rel="stylesheet" media="screen">

Je suis conscient que ce n'est pas la meilleure solution mais elle a le mérite de marcher