Discussion :

[guiyomh]

Bonjour,

je suis entrain de m'essayer à SF2. Pour l'instant pas de gros soucis.
Mais je but sur un problème de chemin d'image dans les CSS.

je m'explique j'ai mis ça dans mon template login.html.twig :

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
22
23
24
25
26
27
28
 
{% extends "MyUserBundle::layout.html.twig" %}
 
{% block stylesheets %}
  {{ parent() }}
  {% stylesheets '@MyUserBundle/Resources/public/css/login.css' %}
  <link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" />
  {% endstylesheets %}
{% endblock %}
 
{% block fos_user_content %}
{% if error %}
    <div>{{ error }}</div>
{% endif %}
 
<form action="{{ path("fos_user_security_check") }}" method="post">
    <label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
    <input type="text" id="username" name="_username" value="{{ last_username }}" />
 
    <label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
    <input type="password" id="password" name="_password" />
 
    <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
    <label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
 
    <input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
</form>
{% endblock fos_user_content %}

et dans ma CSS j'ai ça :

Code :

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

1
2
3
4
5
 
 
body {
  background: #393939 url(../images/login/login_bg.jpg) no-repeat top center;
  }

lorsque je regarde dans firebug , ma CSS se charge bien avec le chemin : /app_dev.php/css/ef49724_login_1.css
et le navigateur tente de chargé l'image avec ce chemin : /app_dev.php/images/login/login_bg.jpg

et je me chope une belle erreur 404. Comment peut-on faire pour utiliser des images de fonds dans les CSS ? Y a t'il une syntaxe spéciale (prefix ou autre ?

Merci

[symfony2]

Bonjour,
pour pouvoir utiliser CSS ou les images il faut les mettre dans /web/bundles/nomdevotrebundles

Ensuite dans votre fichier twig:

Code :

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

<link rel="stylesheet" type="text/css" href="{{ asset('bundles/nomdevotrebundles/css/login.css') }}"  media="screen" />

Merci
__________________
---
"Tous est possible"
http://symfony2.MadevWeb.com

[guiyomh]

Bonjour,

merci pour la réponse, mais mon problème n'est pas comment appeler la CSS, cela marche bien. Mais plutôt depuis un fichier CSS, comment renseigner le chemin d'une image de fond.

cdt

[symfony2]

Je vous conseille de mettre les fichier .css , image et js dans le fichier /web parce que pour mois sa fonctionne .


Merci
__________________
---
"Tous est possible"
http://symfony2.MadevWeb.com

[guiyomh]

Bonjour,

oui je pourrais faire cela, mais ce n'est pas le but que je recherche.
C'est un sacré avantage de tout avoir dans le bundle et de publié les "assets".

Le jour ou je en veux dépublié le bundle, j'ai juste (en théorie) à commenter sont apple dans le AppKernel.php.

[winzou]

Et en utilisant le filtre assetic CSSRewrite dans ton appel a stylesheets ?

[djayp]

Salut,

La syntaxe de ton css est correcte, mais il te faut publier ton contenu publique (image, css...) dans le répertoire web grâce à la commande "php app/console assets:install web")

A++

[guiyomh]

Merci pour ces réponses,

@djayp : j'ai déjà publier mes css avec la commande. Elle s'applique bien. Au document html. J4ai juste un problème de chemin pour les images de fond.

@winzou : je en connais pas se filtre, peut tu me donner un exemple de mise en place.

[RapotOR]

Code :

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

1
2
3
{% stylesheets 'bundles/nomdevotrebundles/css/login.css' output='css' filter='cssrewrite' %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

et dans le config:

Code :

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

1
2
3
4
5
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

[winzou]

Voila RapotOR a donne la solution. J'ai rencontre le meme probleme, et ce qu'il faut faire :
- Ne pas utiliser la syntaxe @Bundle dans le tag stylesheet, mais plutot bundles/monBundle/...
- Utiliser le filtre cssRewrite

Bah c'est super relou parce que meme en dev, quand tu modifies ton CSS, t'es oblige de faire un app/console assets:install web, sinon le css utilise (dans web/... du coup, et non dans src/...) n'est pas mis a jour.

Qqn a un paliatif pour cette enorme limitation d'assetic ?

(Limitation qui d'ailleurs j'espere sera reglee avant la sortie finale de sf2 parce que c'est quand meme la merde !)

[RapotOR]

Voila qui est poétique!

C'est effectivement très lourd. Pour ma part, je n'utilise rien en "public" avant d'avoir bien fixé les css/js. Je place tout dans "bundles/nomdevotrebundles/*" et j'y édite ce qu'il faut directement là.

Sous linux, un lien symbolique devrait éviter le problème.