Puissant pour les pros
Simple pour les utilisateurs

CMS Made Simple, un CMS open source, permet la gestion rapide et facile des contenus d'un site web. Ce CMS est adapté aussi bien pour les petites sociétés que pour les grandes entreprises.

La Gestion de Contenu Simplifiée

Astuce : afficher aléatoirement une image dans votre site web

Catégorie : Astuces et conseils
Article léger cette fois ci qui nous est fournit par Jean Le Chauve : comment afficher de manière aléatoire une image dans votre gabarit.

Contexte

Qui n'a jamais rencontré le soucis : j'ai une série d'une dizaines d'images de même dimensions qui doivent s'afficher de manière aléatoire dans ma page à chaque rafraichissement de page (une bannière de pub, un logo, ...)

Il existe certes la solution de monter toute une galerie photo avec le module Gallery et d'utiliser ses fonctionnalités d'affichage en Random afin de sortir une image aléatoire. Mais comment se passer du module dans le cas ou vous maitrisez complètement la liste des images en entrée ?

Très simplement

Nommez vos images de la façon suivante :

  • image1.jpg
  • image2.jpg
  • image3.jpg
  • ...
  • image99.jpg

Insérez dans le gabarit l'appel à l'image :

<img src=""uploads/repertoire/de/vos/image92.jpg"" alt=""logo"" title=""logo"" />

avec 1 qui restera inchangé et 99 qui doit être le nombre d'images en stock.

Finit ! en sortie vous aurez automatiquement une image aléatoire

<img src=""uploads/repertoire/de/vos/image1.jpg"" alt=""logo"" title=""logo"" /> <img src=""uploads/repertoire/de/vos/image72.jpg"" alt=""logo"" title=""logo"" /> <img src=""uploads/repertoire/de/vos/image17.jpg"" alt=""logo"" title=""logo"" /> ...

Note personnelle : N'oubliez pas que la balise alt est indispensable pour une validation Xhml de votre page. Les balise width et height sont pas obligatoires mais permettent d'accélérer le rendu utilisateur si elles sont correctement renseignées. N'hésitez donc pas si vous avez une série d'images de même dimension:

<img src=""uploads/repertoire/de/vos/image15.jpg"" alt=""logo"" title=""logo"" width='100px' height='100px' />

Astuce issue du forum. Merci à Jean Le Chauve.

  Flux Rss Twitter Facebook