Background-image, php sans toucher au html

Salut tout le monde,

j'ai un soucis, enfin plutôt une question d'optimisation du travail pour plus tard.

Soit une page généré en php à l'aide d'un pseudo-template maison. Mon PHP se compose en gros ainsi :

soit la page appelée (je vous simplifie la structure à ce qui nous intéresse ici) :

$centre='blabla';
$droite='bla à droite';
$gauche='bla à gauche';
$classCentre='type1'
include 'base1.php';

Base1.php (je vous simplifie aussi au maximum)

<div id='centre' class='<?=$classCentre;?>'><?=$centre;?></div>
<div id='droite'><?=$droite;?></div>
<div id='gauche'><?=$gauche;?></div>

Le html généré ainsi ressemble en gros à ça :

<div id='centre' class='type1'>blabla</div>
<div id='droite'>bla à droite</div>
<div id='gauche'>bla à gauche</div>

Au niveau de l'html, je n'ai donc d'action que sur le contenu de mes 3 divs et sur la class de ma div centre. (et je n'ai pas l'intention de modifier mon fichier base1, car il intervient sur une grosse dizaine de pages)

A part que, sur au moins 2 pages différentes, je me retrouve avec un background image sur la div "#centre" qui dépend du php.

Actuellement, ça ressemble à ça :

$classCentre="dial-".$carte;

avec le css suivant :

div.dial-1{background-image:url(int2/parole/1.png);}
div.dial-2{background-image:url(int2/parole/2.png);}
div.dial-3{background-image:url(int2/parole/3.png);}
div.dial-4{background-image:url(int2/parole/4.png);}
div.dial-5{background-image:url(int2/parole/5.png);}
div.dial-6{background-image:url(int2/parole/6.png);}
div.dial-7{background-image:url(int2/parole/7.png);}

A part que... c'est moche déjà; mais surtout ce nombre de cartes peut évoluer, via une interface administrateurs pour permettre un jour à quelqu'un ne foutant pas une patte dans le code de pouvoir le faire.
Je peux donc rajouter moi-même pour l'instant div.dial-8,... mais ça va bloquer tôt ou tard quand je laisserais la fonction de créations de cartes à quelqu'un d'autres.

Y a moyen de faire un truc genre :

div.dial-{x}{background-image:url(int2/parole/{x}.png);}


(idéalement en natif. *a l'impression que ça va être impossible*)
Modifié par Lothindil (06 Feb 2014 - 18:17)

salut,
je ne pense pas trop que ça soit possible. Autant tu pourras sélectionner les classes commençant pas "dial-" autant le contenu ne pourras pas être dynamique.
J'ai beau chercher et ça m'énerve parce que je ne trouve rien. Les seuls trucs dynamiques en CSS pourrait être les contenus générés avec "content:attr(attribut)" mais à l'heure actuelle, il est impossible de combiner "url" et ce même "attr". J'aurais pensé à une grosse bidouille avec

[class^="dial-"]:before {content:url(attr(class))}

mais je sais que c'est actuellement impossible.
Donc peut être en passant par du JS ?

si, en javascript ça je sais le faire, c'est pas le plus complexe. Mais j'aime pas mettre de la pur mise en page dans mes fichiers javascript

C'est sûr que ce n'est pas très propre mais tu ne peux pas faire certaines choses quand on ne met pas à ta disposition les moyens adéquats. Les contraintes du langage imposent une pareille solution.

Ça lu,

Toute manière on peut faire sans le JS. Le JS n'est pas fait pour mettre en forme mais plutôt pour dynamiser la mise en forme entres autres.

En fait, si tu veux que ce background soit dynamique, je vois justement ta solution évidente. Mais à une chose prêt. Oui, tu dois créer des classes du style dial-$.

De mon côté je procéderai comme ceci :
- Si le bloc nécessite un background venant du user, je crée une class que j'appellerai dial- et un chiffre. Ce chiffre sera autoincrementé ou autoincrémenté avec l'id du user. Le problème maintenant, c'est la mise en forme.
- PHP parse très bien les fichiers txt et peut créer n'importe quel format. Je crées un fichier css exclusivement dédié. Ce fichier CSS peut être appelé dans un import d'une css ou le link d'une page html.

Après, je pense qu'il y a une meilleur solution au problème globale. Je pense que c'est de la config user et qu'elle devrait peut être détaillée dans un json/xml/mysql/sqlite/etc.
Modifié par niuxe (07 Feb 2014 - 00:25)

Salut,

Si j'ai bien compris, perso je transformerais ma feuille de styles.css en styles.php ensuite je lui fais passer un paramètre (ex : styles.php?target=1) et puis dans le fichier je récupère le GET

$target = $_GET["target"];

pour jouer sur :

div.dial-<?$=target?>{
    background-image:url(int2/parole/<?$=target?>.png);
}

Yordi

ps : Article sur le sujet
Modifié par Yordi (07 Feb 2014 - 14:00)

Bonjour,

Il te suffit d'utiliser un préprocesseur CSS, comme SASS (par ex)

Tu pourrais ainsi utiliser des variables dans ton css, et bien plus.

Exemples concrets ici :
http://www.blogduwebdesign.com/ressources-css3/css-sass-augmentez-votre-productivite-dans-vos-integrations/571

Site officiel :
http://sass-lang.com/guide
Modifié par ohweb (07 Feb 2014 - 15:48)

@ohweb : préprocesseur, soit je m'y penche réellement, soit j'oublie, je me vois pas lancer un gros truc comme ça pour 1 page. et le css est loin d'être ma spécialité, je compte pas m'y pencher.
C'est la raison pour laquelle je cherchais une solution en natif.

@niuxe : c'est pas en fonction de l'user, mais de la map sur laquelle est le personnage du user. et c'est vrai sur 2 pages sur les 50 (ou pas loin) que comportent l'application.
et le fichier css dédié (pour 1 lot de ligne ? ), ça fait un appel de plus. Et le nombre de requêtes peut réellement jouer sur la lenteur de mes pages (ayant des joueurs de l'autre coté du globe, avec un seul serveur en France, je suis sensible au moindre appel supplémentaire qui rajoute des poignées de millisecondes à l'affichage)

@Yordi : intéressant, mais à nouveau, je peux pas faire appel à mon fichier avec un get, vu qu'il est déterminé sur base1.php à laquelle je ne veux surtout pas toucher. (même si j'avoue que j'aime bien l'idée qui me semble en apparence bien plus légère que les préprocesseurs).

Bref, y a plein d'idées, pour l'instant, je l'ai fait avec le js, mais je note et je continue à réfléchir (en bossant sur mes autres pages)

Et pour être un poil plus simple et pragmatique:

<div style="background-image: url(<?php print $imageUrl; ?>);">
  blah blah
</div>

Bon les styles en lignes c'est pas le top du top, mais dans ce genre de cas ça me semble plus simple que de générer du css et pleins de classes ou de passer par du javascript.
Si on a juste un site de trois pages, c'est parfait. Si on monte un truc plus mastoc alors il faut se pencher sur d'autres options aussi.
Dans le futur on pourra utiliser attr
Modifié par kustolovic (07 Feb 2014 - 18:30)