Images aléatoires au header

[admin]

Voici un exemple pour ajouter 5 images, de façon aléatoire, au format webp au header d'un forum phpBB.
Ce code est prévu pour le style prosilver, si vous utilisez un style autre que prosilver il ne bénéficiera pas des images aléatoires au
header

Qu'est-ce qu'un fichier WebP ?
Google a lancé le format WebP dans le but d'accélérer les temps de chargement sur Internet. WebP permet aux sites web d'afficher des images de qualité avec des tailles de fichiers inférieures aux formats traditionnels comme PNG et JPEG.

Ajouter ce code au fichier overall.footer.html juste après <!-- EVENT overall_footer_after -->

code : Tout sélectionner

<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
<script>
    var imageUrl = '{ROOT_PATH}images/headerbar/' + Math.floor(Math.random() * 5) + '.webp';
    document.getElementsByClassName('headerbar')[0].style.backgroundImage = 'url(' + imageUrl + ')';
</script>
<!-- ENDIF -->

Détails du code :

• <!-- IF T_TEMPLATE_NAME == 'prosilver' --> ce code ne sera affecté qu'au style prosilver
• {ROOT_PATH}images/headerbar/ le dossier contenant les images
• Math.floor(Math.random() * 5) nombre d'images au total
• '.webp' format des images

les images de la bannière (header) seront mises, dans mon exemple, dans le répertoire : {ROOT}/images/headerbar/ et porteront les noms : 0.jpg, 1.jpg, 2.jpg, etc.. jusqu'à la dernière image 5.jpg.
Pour information, les images de cet exemple font 1200x200px


Ajouter ce code CSS :

code : Tout sélectionner

/* Responsive headerbar
-------------------------*/
.headerbar {
    background-color: transparent;
    background-size: 100% 110%;
    background-position: 50% 25%;
    border-radius: 7px;
    height: 90px /* choisir la hauteur du header */
}
@media (max-width: 600px) {
    .headerbar {height: 90px;border-radius: 0}
}

L'affichage responsive est respecté sur les petits écrans.

wide.png (249.48 Kio) Vu 72 fois

small.png (131.57 Kio) Vu 72 fois