où mettre le css général et les images de mon site

**grinder59** · 13/03/2014, 23h32

Bonjour,

je suis en train de me former à Symfony2 et je galère un peu sur des trucs qui pourtant me semblent tout simples. J'ai un layout de base (nommé base.html.twig) enregistré dans Symfony/app/Resources/views.

Les vues de mes bundles héritent de cette base pour retrouver la mise en forme général du site. Par contre, dans le twig base, j'ai un fichier css. Où dois-je le mettre et comment l'appeler via asset ? de cette façon là : {{ asset('url_complete_vers_fichier'); }} ?

De même, où placer les icones et images générales de mon site et comment les appeler ? Si à chaque fois que j'ai une icone ou une image je dois appeler l'url complète, ça va être un peu galère ! Quelle est la meilleure des façons de faire ? Je n'ai pas trouvé beaucoup de réponses sur le web sur ce sujet (en tous cas des pas claires !)

Dernier truc, j'ai lu qu'il était recommandé de faire un bundle de décoration qui gérait le css global et les images et ensuite de faire hériter les autres bundles de ce bundles. Mais comment faire dans mes bundles fils pour afficher le css et les images gérés par le bundle de déco ? En outre, mes controllers héritant de la classe Controller de Symfony, comment ajouter l'héritage du bundle de déco, sachant que l'héritage mutltiple n'est pas possible ?

Merci de votre aide à un jeune padawan un peu paumé !

**dukoid** · 14/03/2014, 08h38

salut,

entraine toi et un jour tu pourra faire léviter un vaisseau par la force de la pensée ..... oups je m'égare

je ne suis pas au courant d'un bundle de décoration, je laisse le soin à d'autre personne de te répondre.

la hierarchie des vues est la suivante :
base
layout
les templates

il y a 3 niveaux, un template peut heriter d'un layout qui lui même hérite d'une base.

mes fichiers CSS, images, js se trouvent dans un répertoire du bundle concerné:
xxxBundle/resources/public/css
xxxBundle/resources/public/js
xxxBundle/resources/public/image

* dans mon template de base, j'ai cette ligne :

Code :

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

1
2
 
        {% stylesheets  '@AcmeXxxBundle/Resources/public/css/*' filter='cssrewrite' %}

ce qui veut dire que tous les fichiers qui se trouve dans /css doivent être chargé

* on peut aussi nommer un fichier que l'on veut charger

Code :

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

1
2
 
 {% stylesheets  '@AcmeXxxBundle/Resources/public/css/monfichier.css' filter='cssrewrite' %}

**gototog** · 14/03/2014, 10h40

Tu peux meme descendre dans l'heritage de template aussi loin que tu veux.
Personnellement j'ai un bundle CommonBundle qui contient mes css, javascripts et images, et d'autres objets/services qui sont commun a tout l'appli.

Pour les images, ta racine c'est le dossier web. c'est simple tu peux utiliser

Code :

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

<img src="/images/somwhere/title.png"></img>

ou

Code :

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

<img src="{{ asset('bundles/monBundle/images/logo.png') }}" />

On oublie pas phpapp/console assets:install pour mettre nos ressources de bundles dans le dossier web

**grinder59** · 14/03/2014, 10h49

Merci de vos réponses.

Personnellement j'ai un bundle CommonBundle qui contient mes css, javascripts et images, et d'autres objets/services qui sont commun a tout l'appli.

Supposons que j'ai 2 bundle :
- CommonBundle
- BlogBundle

De ce que je comprends, c'est via le controller de CommonBundle qu'on va pouvoir rendre la vue principale avec les images et css utilisées sur toutes les pages de mon site. J'ai bon ?
Le controller Blog permet d'afficher, par exemple, un article de mon blog.

Mais comment lier les 2 (CommonBundle et BlogBundle) pour obtenir un article de mon blog, affiché dans mon site avec tout le css et les images générales (qui s'affichent sur toutes les pages de mon blog) ?

**gototog** · 14/03/2014, 11h05

le layout de base (app/.../base.html.twig) Contient la mise en forme générale du site.
Après, ton bundle blog a une page index.

Dans le controlleur, on appelle bien le template twig qui correspond:

Code :

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

1
2
//controller
return $this->render('YourBlogBundle:Blog:index.html.twig', array(/* ... */ );

Jusque la il retrouve bien tout ce que tu veux.
Maintenant, pourquoi/comment va il étendre le layout?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
//blogBundle/Ressources/view/blog/index.html.twig
{% extends '::base.html.twig' %}
{% trans_default_domain "blog_messages" %}

{% block title %}
{{ parent() }} - {% trans %}blog.index.page_title{% endtrans %}
{% endblock %}

{% block content %}
    /*code de l'index*/
{% endblock content %}

La on dit d'abord au template twig d'étendre le layout de base grace a {% extends '::base.html.twig' %}Puis on lui dit quelle portions on utilise. Ici on utilise un block title, et on rajoute a son contenu (parent()) un suffixe de page.
Puis on remplace tout le contenu du block content (car il n'y a pas parent() ) par le contenu de notre bundles.

Mais comment sait on quels blocs vont où?
Et bien, les blocs correspondent a ceux du layout base.html.twig

Jusque la tout va bien, mais si on veut que blog bundle affiche dans son index la liste des derniers utilisateurs inscrits, contenu dans un bundle user?
Et bien, on appelle la méthode render Controller

Code :

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

{{ render(controller('UserBundle:Subscribe:recentUsers', { 'max': 5 })) }}

Symfony ira donc appeler ce controlleur et retournera du code twig a cet emplacement.

**grinder59** · 14/03/2014, 11h13

Mais, dans cet exemple, tu ne fais pas intervenir le CommonBundle qui contient les css, javascript, images communes ?
Comment est-ce que le css général va être pris en compte par le layout de base ?

Supposons que mon css général soit :

Code :

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

1
2
3
4
5
6
7
 
* {
    background : #cccccc;
}
div{
    background : #444444;
}

oui, je sais c'est light, mais c'est pour l'exemple ;-)

Ou placer le fichier MainStyle.css ? et comment y faire référence ? dans mon layout de base ? via le CommeBundle ?

**gototog** · 14/03/2014, 11h26

Par exemple tu as deux fichier css dans ton bundle common: bootstrap.css et common.css
Ensuite tu as un css blog.css dans ton bundle blog qui contient ton découpage des blocs par exemple.

Tu les appelles dans ton layout

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- bashe.html.twig -->
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}base.welcome{% endblock %}</title>
        {% stylesheets
		"bundle/common/css/lib/bootstrap.css"
		"bundle/common/css/common.css"
		"bundle/blog/css/blog.css"
 %}
            <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

**grinder59** · 14/03/2014, 11h32

Mais il faut que j'appelle ces styles au niveau de mon template global, pas de mon template de blog ? Sinon, si je change le nom de mon fichier css global il faudra que je le change dans tous les twig dans lesquels il est appelé, non ?

Autre question, si on appelle le fichier css directement, à quoi sert de l'associer à un bundle ?

Merci beaucoup pour le temps que tu passes à m'aider !

**dukoid** · 14/03/2014, 13h47

je trouve que c'est se compliquer la vie pour rien que d'avoir un bundle commun, on peut toujours trouver des solutions plus propre que propre.

surtout que la plupart du temps un projet symfony2 = un bundle
donc on va se retrouver avec un bundle projet et un bundle common, la belle affaire. "pourquoi faire simple quand on peut faire compliqué "

pour les débutants ne vous cassez pas la tête, suivez les recommandations symfony2 de base. cad les ressources correspondant au bundle dans le bundle lui même ....
quand vous serez plus calé , amusez vous à faire des choses hors sentiers si ça vous chante....

**grinder59** · 14/03/2014, 18h09

ok dukoid, mais on en va pas dupliquer les images communes et le css communs dans tous les bundles sous prétexte que les bundles les utilisent ! comment tu fais pour mutualiser dans ce cas ?

**dukoid** · 14/03/2014, 18h13

dans ce cas, je met mes ressources dans app/resource/public.

tu as combien de bundle? as tu bien pensé à l'architecture de ton projet ?

**grinder59** · 14/03/2014, 18h18

par exemple, le logo de ton site, tu le mets où ? dans les resources d'un bundle ?

Non je n'ai pas encore pensé à l'architecture car je suis en train de me former à Symfony2.

Ce que j'ai lu (sur le site du 0), c'est pas 1 projet = 1 bundle, mais 1 fonctionnalité = 1 bundle (par exemple, la gestion des utilisateurs inscrits sur le site = 1 bundle). D'ailleurs la distribution de bundles (via kpnbundles.com) va dans ce sens, non ?

**dukoid** · 14/03/2014, 18h31

comme je l'ai dis plus haut tu le met dans APP

ou pour quelques elements, pas besoi nde se faire chier avec un bundle commun tu le met direct dans WEB

Code :

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

1
2
 
/web/images/logo.gif

Code :

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

1
2
 
{{ asset('images/logo.gif') }}

c'est tout simple et ça marche très bien ! pas besoin d'un bundle commun pour un logo ... c'est magique

en effet, un bundle = une fonctionnalité(qui pourrait être utilisé dans un autre projet) car il faut toujours penser re-utilisabilité.
(les utilisateur, pagination,.. ) là, se sont des cas particulier et intéressant de dispatcher dans différents bundle pour les re utiliser.

mais par exemple pour un projet perso : si tu fais une gestion de pizza, je ne pense pas que tu va l'utiliser ailleurs

tu ne va pas faire la gestion de fabrication de pizza dans un bundle et la gestion des livraisons dans un autre bundle.
quel intérêt vu que ces 2 fonctionnalités tu ne va pas les réutiliser, enfin normalement

**DarckCrystale** · 17/03/2014, 11h14

Pour compléter dukoid :

un projet Symfony2 = une application web.
un bundle = quelque cose qui sera réutilisable tout seul en dehors de l'application.

Donc si un bundle a besoin d'images particuliers ou de CSS particulier : enregistrer ces images dans les Resources du bundles (src/Acme/DemoBundle/Resources/images par exemple). C'est vraiment si sans ces ressources, le bundle est 'cassé'.
Et si les fichiers par contre doivent être accessibles dans tout le site, les mettre dans web (web/images par exemple).
Et encore, si on veut faire le tri, on peut mettre dans web des sous dossiers pour chaque bundle (web/acmedemo/images par exemple) : c'est utile si on a des bundles qui permettent d'enregistrer des fichiers par exemple, et qu'on veut pouvoir les retrouve facilement.