Le thème Freshy est livré avec 14 images (voir ce billet pour la liste exhaustive). Voyons comment mettre en place l'affichage aléatoire de l'une d'entre elle. J'avais déjà exposé deux méthodes utilisables avec le thème Travelogue, je vais ici reprendre la deuxième et l'intégrer au thème Freshy.
Première étape, création des 14 feuilles de styles pour chacune des 14 images disponibles. Pour ça, rien de bien compliqué car il suffit dans chacune d'elle de mettre le code suivant, en changeant bien sûr le numéro de l'image :
#title_image { margin:0; text-align:left; display:block; height:95px; background:url(images/headers/header_image1.jpg) center center transparent repeat-y; }
Vous trouverez en annexe de ce billet une archive contenant les 14 feuilles de style. Pas la peine de refaire le travail. Décompressez l'archive et placez toutes les feuilles de style dans le répertoire principal du thème (/themes/freshy/
).
Deuxième étape, suppression du style correspondant dans la feuille de style du thème (style.css
). Il faut éditer le fichier et supprimer ou mettre en commentaire les lignes 57 à 62. Elles contiennent ceci une fois mises en commentaire :
/* #title_image { margin:0; text-align:left; display:block; height:95px; background:url(images/headers/header_image6.jpg) center center transparent repeat-y; } */
Troisième et dernière étape, appel aléatoire d'une des feuilles de style. Il faut éditer le fichier template.php
du thème pour y rajouter la ligne suivante :
<link rel="stylesheet" type="text/css" href="<?php dcInfo('theme'); ?>/image<?php echo(rand(1,14)); ?>.css" media="screen" />
Copiez cette ligne et insérez là juste après la ligne 49 du fichier (dans la section <head>
).
Voilà maintenant le thème muni d'un affichage aléatoire de l'image d'entête. Notez que si le cache est activé sur votre blog, cela peut empêcher l'affichage d'une nouvelle image. Il faudra alors vider le cache avant de recharger la page (ou forcer le raffraichissement) pour déclencher le mécanisme.
1 De Alain Saint-Etienne -
Très élégant !
Une autre approche possible (crédits idée : moala), consisterait à faire pointer une CSS unique sur un fichier
header_image.php
du style :(Crédits code, heu... : realestatewebmasters, désolé...)
En résumé, la page PHP se comporte comme une image aléatoire.
Dans cette approche, c'est le cache du navigateur client qui va jouer à plein. L'effet obtenu : chaque visiteur aura une image différente, mais il verra la même pendant un certain temps (la durée de vie de son cache) : toute sa visite ou plus.
On pourra contrôler cette durée (et donc l'effet produit) en jouant sur les headers (
Expires
notamment) pour réduire la durée de vie de ce cache. 1 jour semble très approprié pour un blog.Deux limites cependant à cette approche :
Bref, c'est avant tout fonction de l'effet désiré.
Re-bref, pas d'utilisation prolongée sans avis médical.
Et gaffe quand même à conserver invariant un élément fort de sa charte graphique, histoire que le visiteur occasionnel ne croie pas s'être trompé de site...
2 De Franck -
Voilà une méthode intéressante. Je la garde dans un coin, on ne sait jamais !
Merci.
3 De Keiran -
Petite note pour Franck.
Soit je suis un gros boulet (qui a dit que ce n'était pas une surprise ?) soit ta méthode ne fonctionne pas bien, en tout cas chez moi (hébergé chez free.fr). Cependant, la Méthode 1 décrite dans le précédent article que tu sites fonctionne : j'ai rajouté les 13autres image_titleXX ds le style.css et avec le rand(1,14) ceci fonctionne très bien. En tout cas merci pour ce thème ^^.
4 De Franck -
C'est peut-être dû à la gestion du cache ?
5 De Keiran -
Peut-être, mais j'étais un peu pressé hier soir et mon ordi avait sa grosse flemme de fin de semaine donc il était plutot lent, et j'arrivais pas à faire grand chose. Peut-etre un jour où un vent de folie me prendra de rebidouiller un système qui fonctionne pour un autre qui n'a pas été concluant pour moi, je rententerai ma chance.. En attendant j'apprécie bien ce site et je viens le visiter de temps en temps ^^ pourvu que ça dure =).
6 De Groumphy -
Hello,
Dis l'utilité du CSS n'est-elle pas de simplifier le tout ? Dans un cas comme le tiens, je trouve cela un peu inutile d'avoir 14CSS par exemple alors que PHP peut très aisément écrire dans un fichier.
Ecrire dans un fichier texte voila l'exemple que je te propose. La seule contrainte est de ... Numéroter logiquement ses images (pour un choix au hasard, au mieux tu stockes dans une zone de mémoire tes images).
Ensuite il suffit d'écrire dans le fichier texte (ici du CSS) et par la suite dans ton modèle, de faire un simple lien.
Ne serais-ce pas plus évident que de faire 14 CSS ? Donc en place que ce soit toi qui travaille, c'est le serveur qui travaille. Tu produis un fichier CSS vide que PHP se charge de remplir, un petit algo qui permet de choisir un nombre au hasard et un simple "lien HTML" (via META) pour lier le CSS "calculé" à ton template.
Qu'en penses-tu ??
G.
7 De Franck -
Dans la mesure ou les 14 fichiers sont créés une fois pour toute (et que les images ne changent pas tout les jours), je ne vois pas l'intérêt de faire bosser le serveur pour ça, surtout sur des hébergements mutualisés.
Maintenant, il y a surement plein de cas où il serait judicieux de faire comme tu l'expliques !
8 De blog.imprimante -
bonjour, Je crois que dans ce cas, le temps serveur n'est pas un facteur assez important pour s'embêter avec ce genre de détail. Est-ce que je peux savoir comment on fait pour avoir les boutons de mise en page dans le commentaire ?
9 De Franck -
Pour la wikibarre (c'est comme ça qu'on l'appelle), je suis en train de me renseigner …
10 De Phristo -
Merci .. pour le nom de cette option ! Un petit tour sur Google et j'ai compris que la wikibarre ne fonctionne que pour les commentaires au format wiki.
11 De Charger -
Merci beaucoup pour ce tutoriel ! Mais pourriez vous le refaire avec la version 2 du thème freshy (pas mal de fichiers ont changé)? Merci.
12 De Franck -
Ben à part l'endroit où est déclaré le fichier
style.css
, qui doit probablement se trouver dorénavant dans le fichier_head.html
, le reste ne doit normalement pas varier.