Comment: Un nouveau petit site Yacs

Bon je continue sur mon expérience.

Aprés avoir passé du temps à entrer des sections, quelques articles, quelques photos

est venue le temps de jouer avec les options standard pour changer le look (le type d'affichage) des sections, des articles, etc... Cela prend beaucoup de temps, mais évidement cela est primordial (grace à Yacs on peux changer plein de fois d'avis, et faire quasiment ce que l'on veux avec les options standards)
Ensuite arrive le temps où, il faut passer au graphic, avoir une jolie entête de page, etc... Là il faut du gout et encore du temps... Comme pour l'instant ce n'est qu'une maquette, ce n'est pas primordial mail il faut un minimum...)

 

Arrive le moment ou ce que l'on veux faire est pas dans les options standards de YACS

Un des souhait de l'association a été d'avoir un visuel graphic cohérent sur tout le site, mais un entête de page qui change (un peux) en fonction de la section consulté.

Ce qui se traduit par un fichier .jpg différent pour chaque section dans la definition du style "header_panel".

Comme header_panel est définie dans le fichier .css du skin, il n'est pas dynamiquement changeable, la logique doit être codé dans le fichier template.php.

Le principe utilisé a donc été de déplacer la definition du style header_panel depuis le css vers le fichier template et d'ajouter la logique pour paramétrer le nom de fichier.

Merci à Lesage Alain et Paques, Bernard qui m'ont donner les éléments qui me manquaient pour faire fonctionner le tout (voir article Bandeau différents pour chaque section (Via 1 skin)?)

Il faut donc:

• supprimer ou commenter la définition de header_panel dans votre CSS
• ajouter ce bout de code dans template.php dans la partie de définition du header au alentour de la ligne 80.

<p>// we have one style sheet for everything -- media="all" means it is not
    loaded by Netscape Navigator 4</p>
<p>echo "t".'&lt;link rel="stylesheet"
    href="'.$context['url_to_root'].'skins/RanaSkeleton/RanaSkeleton.css"
    type="text/css" media="all" /&gt;'."n";<br />
<br />
// Debut ****** Insertion PL<br />
// En fonction du N° de section courant génére lé nom de l'image de
    fond<br />
$PLsectionID = NULL;<br />
if(isset($context['current_focus'][0]))   <br />
$PLsectionID = str_replace('section:', '',   
    $context['current_focus'][0]);<br />
if(isset($context['current_focus'][1]))   <br />
$PLsectionID = str_replace('section:', '',   
    $context['current_focus'][1]);<br />
if(isset($context['current_focus'][2]))   <br />
$PLsectionID = str_replace('section:', '',   
    $context['current_focus'][2]);<br />
if(isset($context['current_focus'][3]))   <br />
$PLsectionID = str_replace('section:', '',   
    $context['current_focus'][3]);</p>
<p>$PLfilename =
    'skins/RanaSkeleton/images/header_background_'.$PLsectionID.'.jpg';</p>
<p>// test si l'image existe? sinon utilise l'image défaut<br />
if (!file_exists($context['path_to_root'].$PLfilename)) { <br />
$PLfilename = 'skins/RanaSkeleton/images/header_background.jpg';<br />
};<br />
    <br />
// Affiche le style du header entre les balises head et /head<br />
echo "t".'&lt;style type="text/css" media="screen"&gt;'."n"<br />
."tt".'#header_panel {'."n"<br />
."ttt".'background-image:
    url("'.$context['url_to_root'].$PLfilename.'");'."n"<br />
."ttt".'margin: 0;'."n"<br />
."ttt".'padding: 0;'."n"<br />
."ttt".'width: 100%;'."n"<br />
."ttt".'max-width: 90em;'."n"<br />
."ttt".'position: relative;'."n"<br />
."ttt".'min-height: 7.5em;'."n"<br />
."ttt".'height: 7.5em;'."n"<br />
."ttt".'border-width: 1px;'."n"<br />
."ttt".'border-style: solid solid none solid;'."n"<br />
."ttt".'border-color: #000;'."n"<br />
."tt".'}'."n"<br />
."t".'&lt;/style&gt;'."n";</p>
<p>// Fin  ****** Insertion PL<br />
    <br />
// implement the 'you are here' feature</p>

Dans mon besoin toutes les sections peuvent avoir potentiellement une image différente, cependant si l'image est différente uniquement pour les sections root (et les sous-section l'hérite). Il sufiit d'utiliser uniquement un test :

<p>if(isset($context['current_focus'][0]))   <br />
$PLsectionID = str_replace('section:', '',   
    $context['current_focus'][0]);</p>

Evidement ensuite il suffit de faire vos images et des les appeler header_background_12.jpg pour la section N°12, etc... si vous n'avez pas d'image avec le bon indice alors l'image par defaut est utilisé.

 

Ce que j'ai appris:

• un bon exercice de passer un style "static" dans le CSS en quelque chose de dynamique dans template.php.
• L'existence de certaine variables contextuelles pour paramétrer la logique php (voir plus bas)



• La difference entre $context['url_to_root'] et .$context['path_to_root']. Utiliser path_to_root dans les tests d'existances de fichier ou pour toutes manipulations de fichiers dans le contexte du server, utiliser url_to_root pour creer le lien dans la page généré pour l'utilisateur.

 

Current_focus mon ami:

La variable $context['current_focus'][0] qui contient le nom de la section parent (ex: section:12), mais aussi $context['current_focus'][1] la sous-section et $context['current_focus'][2] la sous-sous-section où l'on ce trouve.

Exemple: L'article: http://www.rananiger.info/yacs/articles/view.php/13/ecole-de-karakara-en-septembre-2007 est dans la section et les sous-section suivantent: Accueil «   Nos activités «   Education et social «   Ecole de Karakara «  C'est à dire section:11 / section:12 / section:14 donc les valeurs sont:

• $context['current_focus'][0] = 11
• $context['current_focus'][1] = 12
• $context['current_focus'][2] = 14

NB: dans le cas de section special (page d'accueil, panneau de control,...) ces variables n'existent pas.

 

Actuellement cette solution est mise en place sur le site http://www.rananiger.info/yacs les images ne sont pas les images finales, mais on peux voir l'image d'entête changer sur certaine section et pas sur d'autres.

Exemple en place actuellement:

• dans les sous-sections de Accueil «   Nos activités «   Education et social « toutes les sous-sections ont une image différente,
• par contre dans Accueil «   Nos activités «   Economique «  toutes les sous-sections ont la même image que la section Economie, etc...

 

Le besoin pour allez encore plus loin: Connaitre la liste des variables que l'on peux utiliser dans le fichier template.php pour construire une logique dynamique en fonction du contexte... Pour pouvoir afficher ou pas des menus, des images, des textes specifiques, etc.... en fonctions de l'article, d'une section, d'un utilisateur, etc....

Si quelqu'un a un pointeur vers une documentation de la liste des variables YACS utilisable dans template.php, je suis preneur....