css background-image [résolu mais bon...]

GariGari Member
mars 2015 modifié dans Entraide
Salut à tous,

J'ai un soucis actuellement sur le rendu css des background-image. Je commence à prendre l'habitude de ne plus mettre de <img...> dans le html lorsque l'image à mettre fait partie du thème et non du contenu.
Mon problème vient du fait que je ne sais pas mettre autre chose qu'un chemin relatif dans le "url".
Exemple : 
background-image: url(../img/MonImage.png)
Sachant que c'est un css d'un plugin et qu'il se trouve dans le répertoire css du plugin. On a l'arborescence suivante : 
plugins
  |- monplugin
    |- css
    |- img

Ca marche donc très bien tant que le cache css n'est pas mis en place. Par contre, quand je mets le cache en place, ça déraille complétement. En effet, le fichier de cache généré se retrouve dans le répertoire plugins. Dans ce cas, le chemin d'accès à l'image devient ./monplugin/img/MonImage.png. Toutes mes images disparaissent donc.

J'ai l'impression que mon problème est relativement "classique", pourtant je n'ai pas trouvé de réponse sur Internet. Je ne dois pas utiliser les bons mots clés...

Est-ce que quelqu'un aurait une idée à me proposer ? Comment créer un chemin absolu ? Faut-il parser dynamiquement le fichier css pour modifier les chemins (moche, quand même) ?

Merci !

Réponses

  • Jerry WhamJerry Wham Member
    Le fichier de cache se trouve à la racine du dossier plugins. Donc tu dois adapter ton chemin relatif par rapport à ça en mettant : 
    background-image: url(ton-plugin/img/MonImage.png)
  • GariGari Member
    Effectivement Jerry j'avais remarqué ça, mais mon objectif serait de faire un css qui soit consistant même si on le déplace. Typiquement en mettant un chemin absolu. Ca n'existe pas du tout ?
  • GzygGzyg Member
    Une raison supplémentaire de ne pas mettre de css dans les plugins... ]:D


    à plus,

    Gzyg
  • GariGari Member
    @Gzyg : je suis en train de travailler sur un plugin, quand il sera terminé je le publierai, et tu pourras m'expliquer comment je suis censé faire sans mettre de css.
  • GariGari Member
    J'ai trouvé un contournement qui me convient à peu près : il s'agit de mettre deux images différentes, avec des chemins différents, correspondant aux deux emplacements possibles des css :
    background-image: url(../images/MonImage.png), url(./MonPlugin/images/MonImage.png);

    Mais bon, c'est pas encore ce que je cherchais... Bon, je dois être un peu trop maniaque...
  • GzygGzyg Member
    Gari : il n'y a rien de mal à mettre des images dans le code html avec les balises figure et img si elles ont un sens dans le contexte concerné. Si ce n'est que de la déco, OK, ça va en css. Mais charger deux images pour n'en afficher qu'une... pas trop dans l'esprit PluXml... ;)

    Sinon pour développer, tu as bien comme base un PluXml avec déjà une feuille de style ? Soit celle par défaut, soit une perso. Pourquoi en rajouter une ? Au cas où certaines balises ne serait pas traitées par le css de PluXml, tu lui ajoutes une section plugin avec tes classes et basta.


    à plus,

    Gzyg
  • Jerry WhamJerry Wham Member
    Gari a écrit:
    Effectivement Jerry j'avais remarqué ça, mais mon objectif serait de faire un css qui soit consistant même si on le déplace. Typiquement en mettant un chemin absolu. Ca n'existe pas du tout ?
    Tu peux mettre un chemin absolu mais il faut le coder à la main et l'adapter à chaque déplacement (changement de nom de domaine), ce qui revient au même.
    Ou alors tricher en faisant un fichier php qui se fait passer pour du css ou qui génère un fichier css. Ou en utilisant la méthode onActivate des plugins qui vérifierait où se trouve le plugin et qui chargerait tel ou tel fichier css.
  • GariGari Member
    En effet je cherchais à mettre un chemin absolu variable, c'est à dire qui serait fonction du contexte.
    La remarque de Gzyg m'a titillé d'autant plus que je suis d'accord sur le côté "on tente de charger deux images alors qu'il n'y en a qu'une".

    J'ai donc résolu mon problème en modifiant mon plugin cssNoCache pour qu'il fabrique un fichier de... cache (!) et le mette au même endroit que le fichier de cache standard de pluXml. Autrement dit, les chemins d'accès seront consistants entre mon environnement de dev (où cssNoCache est installé) et mon environnement de prod (où le plugin n'est pas installé).
Connectez-vous ou Inscrivez-vous pour répondre.