On me demande fréquemment, par mail, comment je fais pour avoir un polaroïd aléatoire affiché en haut à gauche de la page. Du coup j'ai décidé de vous expliquer ça en détail. Il y a peut-être d'autres méthodes, ceci-dit celles que je vais vous décrire fonctionnent et ont été testées ici-même. Voilà comment on peut procéder.
Préalable :
Il faut stocker les images qui seront utilisées dans un sous-répertoire img du thème courant. Pour chacune des deux méthodes que je vais décrire, j'ai choisi le cas où 3 images seront utilisées. Vous pouvez bien sûr adpater ce nombre à vos besoins (actuels ou futurs).
Méthode 1 :
La première méthode utilise un style numéroté pour chacune des images (ex polaroid1, polaroid2, ...). Tous ces styles définis dans la feuille de style (style.css) du thème. Par exemple :
.polaroid1 {
background: url('img/polaroid1.jpg') no-repeat;
}
.polaroid2 {
background: url('img/polaroid2.jpg') no-repeat;
}
.polaroid3 {
background: url('img/polaroid3.jpg') no-repeat;
}
Puis dans le fichier template.php du thème[1], j'ai le code suivant :
<div id="polaroid" class="polaroid<?php echo(rand(1,3)); ?>"> </div>
qui conduit à choisir un nombre au hasard (ici de 1 à 3) et de sélectionner par conséquent un des styles définis auparavant.
Cette solution est relativement simple à gérer (une seule feuille de style) mais est plutôt couteuse en téléchargement vu qu'elle oblige le visiteur à charger toutes les images possibles.
Méthode 2 :
La deuxième solution s'appuie sur une série de feuilles de style numérotées (polaroid1.css à polaroid3.css par exemple) qui contiennent chacune un style où seule l'image diffère :
polaroid1.css contient :
.polaroidxx {
background: url('img/polaroid1.jpg') no-repeat;
}
polaroid2.css contient :
.polaroidxx {
background: url('img/polaroid2.jpg') no-repeat;
}
polaroid3.css contient :
.polaroidxx {
background: url('img/polaroid3.jpg') no-repeat;
}
Notez le .polaroidxx dans toutes les feuilles. Puis dans le fichier template.php, dans la partie <head>...</head> j'ai :
<link rel="stylesheet" type="text/css"
href="<?php dcInfo('theme'); ?>/polaroid<?php echo(rand(1,3)); ?>.css"
media="screen" />
qui me sélectionne une des 3 feuilles de styles (du coup je n'ai qu'une seule image chargée à la fois), et plus bas, là ou on souhaite l'affichage :
<div id="polaroid" class="polaroidxx"> </div>
Voilà ;-)
Notes
[1] Je vous rappelle que si votre thème ne comporte pas de fichiers PHP, il faut faire une copie de tous ceux qui se trouvent dans le répertoire du thème default. Ensuite modifiez les fichiers copiés dans le répertoire de votre thème uniquement.
1 De Thanh -
Autre méthode : http://www.photopif.net ;-)
2 De Franck -
Merci pour l'info !
3 De Romuald -
Quel pédagogue tu fais....
4 De Thanh -
Moi j'avais déjà regardé en douce dans sa feuille de style à Franck :p
5 De sensørie -
Hors sujet évidemment... On n'entend plus parler de ta liste de résolutions :-)
6 De Franck -
Romuald, merci (on s'est loupé hier soir ?).
Thanh, c'est pas beau de regarder sous les jupes des blogs ;-)
Sensorie, ah oui, ma liste, bon je vais rajouter un 102ème point : "s'occuper de la liste" ! (je vois passer tes œuvres via RSS, c'est vachement chouette)
7 De sensørie -
"vachement chouette", toi, tu sais parler aux femmes, grand taquin, va ;-) Ben contente de te retrouver sur ton blog après toutes ces péripéties :-)
8 De Groumphy -
Bonjour,
Et pour ceux qui malheureusement ne peuvent utiliser le PHP sur leur site / blog, pourquoi ne pas adopter une solution en langage client sans oublier tous les inconvénients que cela donne (et ne pas oublier ainsi la balise NOSCRIPT) (petite note personnelle : j'ai oublié d'y inclure la possibilité de faire cela avec du CSS, prochain article avec une v1.1.0 !).
;)
G.
9 De Franck -
Sensorie, qu'est-ce tu veux, comme ça, ma femme ne va rien me reprocher quand elle viendra lire ceci (bisous à ma femme si tu lis ça).
Merci Groumphy. J'avais raison de dire qu'il y avait d'autres méthodes :-)
10 De Olivier -
Sinon il y aussi la possibilité d'utiliser le script de Dan Benjamin (cité sur le forum de Dotclear je crois) : comme ça pas besoin de mettre à jour son template si on rajoute une image, on joue à la pioche dans un dossier... Sa nouvelle version est plus paramétrable mais impose de mettre les mains dans le cambouis du coup je préfère l'ancienne.
11 De Franck -
Et bien comme ça, on a le choix ! Vous n'avez plus qu'à faire votre marché ;-)
12 De RN2 -
Autre solution encore : faire ta feuille de style en PHP et donc insérer la fonction rand() dans la feuille de style.
13 De Fred -
En ce qui concerne la gestion de l'aléatoire, je l'utilise de deux manières :
En ce qui concerne l'image, j'ai utilisé la fonction "randImage()" du plug in "Gallery v0.9".
Pour le billet, j'ai crée un plug in subtilement intitulé "random billet". Plus de détail ici
14 De Franck -
Pas idiot le billet aléatoire ! Merci pour les infos.
15 De Christophe -
superbe ce thème ! j'ai juste un peu de mal à faire une image au style de polaroid1.jpg
16 De Franck -
Pour ça, il faut télécharger le gabarit (fichier photoshop) dans lequel il y a tout ce qu'il faut à l'intérieur (couches, …)
17 De Franck -
Oups j'ai oublié de donner le lien :
18 De Julien -
Bonjour. J'ai opté pour la première méthode qui marche très bien, grand merci. Je souhaiterai ajouter une description à chaque image, un "title" dans le css, mais je ne sais comment l'intégrer. Savez-vous si cela est possible?
19 De Franck -
Julien, le
titleest un attribut XHTML et pas CSS, donc c'est au niveau de la page qu'il faut l'insérer et pas via la CSS.20 De Julien -
Merci Franck pour cette précision. La seule possibilité est donc d'ajouter cet attribut au code à insérer dans le template:
<div id="top" class="top<?php echo(rand(1,10)); ?>"> </div>On ne peut afficher que le nom de l'image (top1.jpg, top2.jpg...) si je comprends bien. ou dois-je rajouter la balise dans le code php et que dois-mettre? Merci
21 De Franck -
Même pas car dans ce cas précis ce n'est pas une image faisant partie du code XHTML mais une image qui sert de fond à un élément,
divici. Ce n'est donc que de la décoration et il n'est pas possible de mettre untitleà un tel élément.22 De creeks -
salut
super cette idee d'image aleatoire mais moi g un probleme (meme pb avec les 2 methodes) sur les 3 images seulement 2 apparaissent j'ai meme essayé d'en mettre 6 mais toujours la meme chose
ca vient dou???
merci
23 De Franck -
Je soupçonne un problème de cache ou alors la fonction
rand()qui jouerait un tour à sa façon ?24 De Ethanol -
j'aimerais eventuellement utiliser ce theme vraiment sympa mais j'aurais aime pouvoir limiter le caractere aleatoire de la selection des polaroids. j'aimerais en fait qu'un polaroid particulier s'affiche en fonction de la categorie dans laquelle on se trouve.
d'apres vous, comment je dois m'y prendre ? envisager l'appel d'une feuille css differente pour chaque categorie ? ou y a-t-il une modification dans le code php qui permettrait de faire ca ?
(desolee pour le "pas d'accent" mais je suis sur un clavier japonais et switcher toute les deux secondes est assez gonflant XD)
25 De Franck -
Ethanol, une feuille de style peut suffire (tout dépend du nombre d'images et par conséquent de catégories), il faut voir en fonction de la taille totale à récupérer pour le visiteur et estimer si ce n'est pas trop.
Côté code :
devrait permettre d'obtenir la mise en place de la bonne classe en fonction du contexte. Il faut tester les différentes situations pour déterminer ce qu'il y a lieu de faire dans le cas où il n'y a par exemple pas de catégorie sélectionnée.
Puis avec une définition des classes idoines dans la feuille de style, il ne devrait pas y avoir de problème (prévoir une classe par defaut).
Voilà une piste ;-)
26 De Ethanol -
Merci beaucoup pour ces petites precisions, je vais creuser le tout et voir si je m'en sors ;) Merci d'avoir pris un peu de ton temps pour repondre.