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...