Discussion :

[Playerz]

Bonjour tout le monde

J'ai récemment acheté un livre pour apprendre Symfony et jusqu'à présent tout se passe plus ou moin sans accro. (Je suis ce tutoriel)

Sauf que depuis plusieurs jours je bloque sur un problème de css. Les fichiers semblent être dans les bons dossiers
CSS : web/css/****.css
IMAGES : web/images/****.png;.gif

Voici, l'arborescence de mes fichiers :


Le contenu du fichier apps/frontend/config/view.yml :

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
# You can find more information about this file on the symfony website:
# http://www.symfony-project.org/reference/1_4/en/13-View
 
default:
  http_metas:
    content-type: text/html
 
  metas:
    title:        symfony project
    description:  symfony project
    keywords:     symfony, project
    language:     fr
    #robots:       index, follow
 
  stylesheets:    [main.css]
 
  javascripts:    []
 
  has_layout:     true
  layout:         layout

Le titre symfony project s'affiche bien dans ma page web donc le lien se fait bien entre layout.php et view.yml.
Mais les images elles ne s'affichent pas la page change juste pour avoir un fond gris
Liens que l'on trouve dans le fichier css :

Code :

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

1
2
3
4
#header
{
  background: url(../images/bg-header.jpg) repeat-x top;
}

Css téléchargeable ici
Images téléchargeable ici

Donc d'où viendrait le problème de chemin qui bloque l'affichage des images ?
Résolut : Le tutoriel en ligne contient un supplément d'information qui indique la manipulation à faire.

[polkduran]

essaies de mettre comme chemin des images

/images/tonImage.png

au lieu de ../images/tonImage.png

pour moi ça marche comme ça

[Michel Rotta]

La solution si-dessus marchera.

Il peut être intéressant de comprendre pourquoi une version, à priori bonne, ne fonctionne pas (les chemins relatifs peuvent parfois avoir beaucoup d'intérêt). Je te propose d'installer Firefox pour tester et l'extension FireBug pour aller encore plus loin dans les tests.

Avec ceci tu vas pouvoir allez voir le chemin compris par l'explorateur et donc pourquoi il ne fonctionne pas.

[polkduran]

Etant donnée que Symfony avec son système de routing peut transformer les url de manière (entre autres) à convertir tes paramètres get dans l'url comme si c'était un chemin (path), c'est à dire pour l'application par défaut:
http://tonHost/module/action?p1=alo&p2=bye
devient
http://tonHost/module/action/p1/alo/p2/bye //si pas de route spécifiée
http://tonHost/module/action/alo/bye //si tu as spécifié tes params dans une route

bon sans entrer dans les détails le principe c'est ça, donc si tu donne un chemin relatif pour tes images (../images/truc.png) il est probable que le navigateur ne donne pas la bonne route pour tes images, par exemple
http://tonHost/module/action/alo/images/truc.png
au lieu de
http://tonHost/images/truc.png

tu évites ça en mettant juste /images/truc.png comme ça le navigateur cherche direct dans http://tonHost/images/truc.png
c'est aussi valable pour les js et css

[Michel Rotta]

Encore faudrait-il qu'une route puisse interpréter la demande sur un png, donc que l'on ait explicitement défini le sf_format de la route à png...

Je pense que regarder ce que l'explorateur interprète reste une solution simple et rapide pour débugger ce genre de chose.

[polkduran]

j'avais oublié de dire qu'on suppose que dans le .htaccess (si on en a un) on a une instruction comme ça

Code htaccess :

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

1
2
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule #nos règles

c'est à dire que si le fichier existe on y accède directement (donc pas d'application du routing symfony), si les images sont donc dans web/images/*
un appel à http://monHost/images/truc.png doit retourner l'image directement sans tenir compte du routing symfony

mais c'est vrai que la manière la plus pratique de connaître ce que le navigateur demande c'est avec firebug par exemple.