MiniGriSpip

Bonjour Gigi :-)

Question qui, en effet, sort un peu du cadre de Mgs, mais j'aurai peut-être un début de piste :

Au lieu d'utiliser un fichier de type texte, pourquoi ne pas utiliser les feuilles de style pour gérer les différents affichages ?

Je n'ai pas de disponibilité suffisante pour développer maintenant, mais si ton besoin n'est pas urgent, je pourrai consacrer un peu de temps pour t'expliquer cette technique plus amplement à partir de dimanche soir (pas avant, je suis trop pris d'ici là).

à+ :-)

Bonjour Gigi

Bon, comme promis (mieux vaut tard que jamais ), voici une petite explication d'une méthode d'affichage aléatoire en utilisant principalement les feuilles de style.

Cette méthode n'est pas la seule possible, d'autres sont envisageables et peut-être même plus efficaces, mais celle-ci a l'avantage d'être assez simple et souple d'utilisation.

Nous allons donc voir comment générer le bandeau du squelette Mgs (version 1.6) en changeant l'image de fond de manière aléatoire parmi 3 possibilités, puis comment afficher un texte descriptif suivant l'image de fond choisie.

function mgs_rand($min, $max) {
/* Fonction pour retourner une valeur aleatoire */
    return mt_rand($min, $max);
}

Édite donc le fichier "mes_fonctions.php" et place ce code au début (juste après la balise d'ouverture de Php "<?php"), enregistre les modifications de ce fichier.

'mgs_ban_txt_1' => 'Bonjour Monde !',
'mgs_ban_txt_2' => 'Bienvenue !',
'mgs_ban_txt_3' => 'Bonne Visite !',

Nous avons donc un texte différent pour chaque image (bon, c'est vrai, il sont un peu nazes mes textes  , mais ce ne sont que des exemples ), à toi de les personnaliser selon tes besoins.

Nous verrons plus loin, avec les feuilles de style, comment afficher ces textes suivant l'image choisie.

<div id="mgs_bandeau">
    [<div id="mgs_logo_site">(#LOGO_SITE_SPIP|#URL_SITE_SPIP|image_reduire{96})</div>]
    <div id="mgs_nom_site">[<h1>(#NOM_SITE_SPIP)</h1>]</div>
    [<div id="mgs_desc_site">(#DESCRIPTIF_SITE_SPIP)</div>]
</div>

Nous allons modifier ce code pour avoir ceci :

<div id="mgs_bandeau" class="mgs_ban_img_[(#REM|sinon{1}|mgs_rand{3})]">
    [<div id="mgs_logo_site">(#LOGO_SITE_SPIP|#URL_SITE_SPIP|image_reduire{96})</div>]
    <div id="mgs_nom_site">[<h1>(#NOM_SITE_SPIP)</h1>]</div>
    <div id="mgs_desc_site" class="mgs_ban_txt_1"><:mgs_ban_txt_1:></div>
    <div id="mgs_desc_site" class="mgs_ban_txt_2"><:mgs_ban_txt_2:></div>
    <div id="mgs_desc_site" class="mgs_ban_txt_3"><:mgs_ban_txt_3:></div>
</div>

Petite explication :

Tout d'abord nous avons ajouté une "class" au bloc principal, lequel contient le nom du style que nous allons utiliser par gérer les différents affichages.

Le nom de ce style reprend les mêmes infos que les images, mais à la place du numéro nous avons placé un bout de code qui aura pour rôle de générer un nombre aléatoire entre 1 et 3.

Ce bout de code n'est autre chose que l'utilisation sous forme de filtre du code Php que nous avons ajouté au fichier "mes_fonctions.php".

Si la syntaxe de ce code te paraît bizarre, c'est que Spip nécessite des données pour leur appliquer un filtre, c'est pourquoi on a utilisé la technique du "#REM" et du filtre "sinon" (pour plus amples explications, voir par ici et par là).

Nous avons aussi dans ce code trois blocs "div" très semblables, mais dont la "class" diffère et dont le contenu reprend les clés des valeurs ajoutées au fichier "local_fr.php", qui assureront l'affichage des différents descriptifs selon l'image choisie aléatoirement.

Enfin, petit détail mais qui a son importance, il faut ajouter, tout au début de ce fichier, le code suivant :

#CACHE{0}

Ce code demande à Spip de calculer le contenu de ce fichier à chaque rechargement de la page, sans le mettre en cache, afin que le choix aléatoire soit visible.

.mgs_ban_img_1 {
    background-image: url(images/mgs_ban_img_1.jpg);
}
.mgs_ban_img_2 {
    color: #ffffff;
    background-image: url(images/mgs_ban_img_2.jpg);
}
.mgs_ban_img_3 {
    color: #ffffff;
    font-size: 20px;
    background-image: url(images/mgs_ban_img_3.jpg);
}

Ces styles correspondent donc aux différentes images que nous souhaitons afficher de manière aléatoire dans le bandeau. On peut affiner l'affichage d'autres éléments contenus dans ce bloc suivant l'image choisie, c'est le cas ici pour les images 2 et 3 où le texte de description est quelque peu modifié.

Jusqu'à là tout va bien, il nous reste à gérer l'affichage des textes suivant l'image choisie aléatoirement, car pour l'instant les 3 textes vont s'afficher simultanément.

Ajoutons donc, juste après, les styles suivants :

.mgs_ban_img_1 div.mgs_ban_txt_2, .mgs_ban_img_1 div.mgs_ban_txt_3 {
    display: none;
}
.mgs_ban_img_2 div.mgs_ban_txt_1, .mgs_ban_img_2 div.mgs_ban_txt_3 {
    display: none;
}
.mgs_ban_img_3 div.mgs_ban_txt_1, .mgs_ban_img_3 div.mgs_ban_txt_2 {
    display: none;
}

Ces style n'ont qu'un simple et unique rôle, masquer les blocs "div" qui ne correspondent pas à l'image affichée, donc, lorsque l'image choisie aléatoirement est la numéro 1, il faut masquer les blocs 2 et 3, lorsque c'est la 2 qui est choisie, il faut masquer les blocs 1 et 3, et ainsi de suite...

Gigi

Tout ce qui pourrait éventuellement être utile pour d'autres utilisateurs du squelette, est bien-sûr le bienvenue dans ce forum.

Si c'est juste pour partager le résultat de ton développement, je te propose de publier un lien dans cette discussion...

Pour des explications sur la manière de faire tel ou tel chose, de résoudre telle ou telle limitation ou pour partager des bouts de code, etc, il suffit d'ouvrir une discussion dans le présent forum en essayant de mettre un titre suffisamment explicite...

Merci à toi

PS. Désolé pour cette réponse un peu tardive suite à une absence de quelques jours...