Polaroïd aléatoire

IconeOn 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)); ?>">
&nbsp;
</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">
&nbsp;
</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.

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/2933

Haut de page