gironi.fr

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 

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 :

 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 228 fois

: small.png (131.57 Kio) Vu 228 fois

Autre solution plus simple, Twig intègre nativement certaines fonctions et autres filtres très pratiques. Dont la fonction random().

Nommez vos images de 1 à 5 (1.jpg, 2.jpg, etc.) et placez-les dans le le dossier /randomheader du répertoire /theme du style.

Vous pouvez utiliser png ou un autre format au lieu de jpg, mais il faut que toutes les images aient le même format.

Ajoutez dans le head du fichier overall_header.html : ( par exemple juste avant la balise de fermeture </head> )

Code : Tout sélectionner

<style>
    .headerbar {
        background-image: url('{{ T_THEME_PATH }}/randomheader/{{ random(1, 5) }}.jpg');
    }
</style>

Videz le cache et Le tour est joué !

gironi.fr

Images aléatoires au header

Images aléatoires au header

Re: Images aléatoires au header