Date de publication: le jeudi 14 mai 2009 à 20h23
Dernière modification: par Pascal BOYER le vendredi 15 mai 2009 à 22h22
« Article précédent: Playlist automatique : filtre d'ombre ImageMagick - III
» Article suivant: Playlist automatique : créer les playlists - V

Le template d'affichage du player flash

Nous allons commencer par le template de vue utilisé pour afficher sur le site public le(s) player(s) flash.

dossierDiscotheque.tpl

Ce template est utilisé chaque fois que l'on clique, dans le menu gauche (template associé: flat_left.tpl ) du site public, sur le nom d'un artiste.

Ce template est situé dans le répertoire:

design/plain_site/override/templates/discotheque/

et fait l'objet de la surcharge suivante dans le fichier override.ini.append.php du site access public:

# ###### DISCOTHÈQUE ######
[full_rubrique_discotheque]
Source=node/view/full.tpl
MatchFile=discotheque/dossierDiscotheque.tpl
Subdir=templates
Match[class_identifier]=artiste

De cette surcharge on déduit qu'il faut créer le répertoire discotheque :

mkdir design/plain_site/override/templates/discotheque

Puis on lui affecte le bon utilisateur et groupe d'utilisateurs pour que le serveur Apache puisse y accéder sans rencontrer de problèmes de permissions:

chown www-data:www-data design/plain_site/override/templates/discotheque

Le contenu (commenté) du template dossierDiscotheque.tpl est le suivant:

1 {def  $liste_albums=fetch_alias( children, hash('parent_node_id', $node.node_id,
2                                        'depth', 1,
3                                        'class_filter_type', 'include',
4                                        'class_filter_array', array( 'album')))
5       $i='0'}
6 <div class="content-view-full">
7     <div class="class-folder">
8         <br />
9         {if $liste_albums} {* S'IL N'Y A PAS D'ALBUM ALORS ON AFFICHE RIEN *}
10             {foreach $liste_albums as $album} {* ON DEMARRE LA BOUCLE « pour chaque album de l'artiste » *}
11                 <div class="ombrePlayer">
12                     {literal}
13                         <script type="text/javascript" src={/literal}{'flashPlayer/swfobject.js'|ezdesign}{literal}></script>{/literal}
14                 <div id="player{$i}"></div>{* INDISPENSABLE POUR L'AFFICHAGE DU PLAYER *}{literal}
15                         <script type="text/javascript">
16                             var s{/literal}{$i}{literal} = new SWFObject('{/literal}{'flashPlayer/player.swf'|ezdesign(no)}{literal}','ply','555','220','9', '#');
17                             s{/literal}{$i}{literal}.addParam('wmode','opaque');   {* OBLIGATOIRE POUR QUE L'IMAGE DE LA JAQUETTE S'AFFICHE PAR DESSUS L'OBJET FLASH *}
18                             s{/literal}{$i}{literal}.addParam('allowscriptaccess','always');
19                             s{/literal}{$i}{literal}.addParam('allowfullscreen','false');
20                             s{/literal}{$i}{literal}.addParam('flashvars','file={/literal}{concat('listesAlbums/liste.', $album.node_id,'.xml')|ezdesign(no)}{literal}&backcolor=f2f2f2&frontcolor=a7a7a7&lightcolor=ff5700&screencolor=ffffff&playlistsize=281&streamer=lighttpd&playlist=right&autostart=false');
21                             s{/literal}{$i}{literal}.write('player{/literal}{$i}{literal}');
22                         </script>
23                     {/literal}
24                 </div>{* ombrePlayer *}
25                 {set $i=inc( $i )}
26                 <div class="jaquette_ombre">
27                     <img src={$album.data_map.photo_pochette_album.content[ombrejaquette].full_path|ezroot} alt="" /> {* ON AFFICHE L'OMBRE DE LA JAQUETTE *}
28                 </div>
29                 <div class="jaquette">
30                     <img src={$album.data_map.photo_pochette_album.content[jaquette].full_path|ezroot} alt="" /> {* ON AFFICHE L'IMAGE DE LA JAQUETTE *}
31                 </div>
32                 <br />
33                 <br />
34                 <br />
35             {/foreach}
36         {/if}
37     </div>
38 </div>

Les points importants:

• Lignes 1 à 4 : on crée un tableau contenant la liste des objets album présents sous le noeud artiste .
• Ligne 5 : on déclare une variable $i à zéro. Cette variable est utilisée lignes 14, 16, 17, 18, 19, 20 et 21. S'il y a plusieurs players affichés, ce qui arrive chaque fois que plusieurs albums sont présents sous un même noeud artiste , alors le id de la ligne 14 et la variable s$i définie ligne 16 doivent être différents pour chacun des player.
• Ligne 13 : le répertoire dans lequel est placé le javascript swfobject.js sera donc design/plain_site/flashPlayer/ (répertoire à créé).
• Ligne 20 : le nom du fichier xml contenant la liste de lecture sera donc de la forme: liste.XXX.xml où XXX sera le numéro de ID du noeud album . Par ailleurs, ces fichiers xml seront placés dans le répertoire design/plain_site/listesAlbums/ .
• Ligne 25 : on incrémente la valeur de la variable $i de 1.
• Ligne 27 : on affiche l'image de la jaquette téléchargée à laquelle a été appliqué le filtre dont l'alias est ombrejaquette ( content[ombrejaquette] ). Le positionnement exact de l'ombre est réalisé à l'aide de règles CSS.
• Ligne 30 : cette fois-ci on affiche l'image de la jaquette téléchargée à laquelle a été appliqué le filtre dont l'alias est jaquette ( content[jaquette] ). Le positionnement exact de l'ombre est réalisé à l'aide de règles CSS.

Le template d'affichage de la rubrique Discothèque

L'astuce

Le menu horizontal du site FEMOCA n'affiche jamais le noeud discotheque . Au lieu de cela, je crée un noeud de type link (classe par défaut fournie par eZ Publish ) nommé Écouter que je fais pointer directement vers le premier noeud artiste situé sous le noeud discotheque . Lorsque que l'on instancie un objet link , il faut en effet renseigner le champ URL avec l'adresse HTTP de destination vers laquelle sera renvoyé l'internaute lorsqu'il cliquera sur le menu Écouter .

Les noeuds artiste sont classés par ordre alphabétique sous le noeud discotheque . Le premier de ces noeud est donc susceptible de changer régulièrement.

Pour éviter de devoir modifier régulièrement l'adresse du champ URL de l'objet Écouter j'utilise, pour le menu horizontal, le template design/plain_site/templates/menu / flat_top.tpl dont le code est le suivant (voir les commentaires en capitales):

1 <div id="topmenu">
2     <div id="topmenu-design">
3
4     <h3 class="hide">{"Top menu"|i18n("design/base")}</h3>
5
6     {let root_node=fetch( content, node, hash( node_id, 2 ) )
7          menuitems=fetch( content, list, hash( parent_node_id, 2,
8                                                class_filter_type, include,
9                                                class_filter_array, ezini( 'MenuContentSettings', 'TopIdentifierList', 'menu.ini' ),
10                                                sort_by, $root_node.sort_array ) )
11
12         premierArtiste=fetch_alias(children, hash( parent_node_id, 10,   <==== 10 EST LE N° DE ID DU NOEUD « Discothèque »
13                                                 'limite', 1,
14                                                 'sort_by', array( 'name', true()),
15                                                 class_filter_type, include,
16                                                 class_filter_array, array('artiste')))}
17     {if $menuitems|count|gt(0)}
18     <ul>
19         {foreach $menuitems as $index => $menu}
20 {*
21 $module_result.path contient les infos sur chaque noeud qui constituent l'URI. Or les noeuds de l'URI permettent, en partant du noeud affiché, de remonter l'arborescence jusqu'au noeud racine de ID 2.
22 count( $module_result.path ) contient donc le nombre de noeuds qui constituent l'URI.
23 $module_result.path[1].node_id vaut la valeur du ID du deuxième noeud de l'arborescence dont il est question ci-dessus. Donc pour Accueil il est vide et c'est normal puisqu'il n'y a pas de deuxième noeud.
24 *}
25             {*  selected est défini, c'est à dire est vrai donc vaut 1, si le nombre de noeuds permettant, en partant du noeud affiché, de remonter l'arborescence jusqu'au noeud racine de ID 2 est supérieur à 1 ( gt(1) ) ET si
26                 le ID du deuxième noeud ( path[1].node_id - donc forcément un item du menu) de $module_result.path est égal au ID de l'item/noeud du menu sur lequel on vient de cliquer *}
27             {let selected=and( count( $module_result.path )|gt(1), eq( $module_result.path[1].node_id, $menu.node_id ) )}
28
29
30             {if and(eq( $menu.object.content_class.identifier, "link" ), eq( $menu.node_id, "4" ))}  <=== ON TRAITE ICI LE CAS DU NOEUD « Écouter » DU MENU HORIZONTAL
31                 <li {$selected|choose( '', 'class="selected"' )}>
32                     <div class="spacing">
33                         <a href={$premierArtiste.0.url_alias|ezurl}>{$menu.object.name|wash}</a>    <=== POUR LE NOEUD DE ID 221 (« Écouter » ) LE LIEN ASSOCIÉ EST L'URL DU PREMIER ARTISTE 
34                     </div>
35                 </li>
36             {elseif eq( $menu.object.content_class.identifier, "link" )}
37                 <li {$selected|choose( '', 'class="selected"' )}>
38                     <div class="spacing">
39                         <a href={$menu.data_map.location.content|ezurl}>{$menu.object.name|wash}</a>
40                     </div>
41                 </li>
42             {else}
43                 {if and(eq( sum( $index, 1 ), $menuitems|count ), eq( $menu.object.content_class.identifier, "page_contact" ))}
44                     <li class="last {$selected|choose( '', 'selected' )}">
45                         <div class="spacing">
46                             <a href={$menu.url_alias|ezurl}>{$menu.name|wash}</a>
47                         </div>
48                     </li>
49                 {elseif eq( $menu.object.content_class.identifier, "page_contact" )}
50                     <li {$selected|choose( '', 'class="selected"' )}>
51                         <div class="spacing">
52                             <a href={$menu.url_alias|ezurl}>{$menu.name|wash}</a>
53                         </div>
54                     </li>
55                 {else}
56                     <li {$selected|choose( '', 'class="selected"' )}>
57                         <div class="spacing">
58                             <a href={$menu.url_alias|ezurl}>{$menu.name|wash}</a>
59                         </div>
60                     </li>
61                 {/if}
62             {/if}
63             {/let}
64         {/foreach}
65     </ul>
66     {/if}
67     {/let}
68     <div class="break"></div>
69     </div>
70 </div>
71 <hr class="hide" />

Pour que le menu horizontal prenne en compte les objets de type link il faut renseigner le fichier de surcharge menu.ini.append.php du siteaccess public (voir ligne 9 ci-dessus):

[MenuContentSettings]
TopIdentifierList[]
TopIdentifierList[]=folder
TopIdentifierList[]=link
LeftIdentifierList[]
LeftIdentifierList[]=folder

Avec un tel fonctionnement du menu, un clic sur le menu Écouter renvoie systématiquement une page dont l'URI est de la forme:

http://femoca.fr/index.php/femoca/Discotheque/<nom d'un artiste>

Cependant, si l'internaute efface à la main <nom de l'artiste> pour ne garder que:

http://femoca.fr/index.php/femoca/Discotheque/

alors le système affiche le contenu du noeud discotheque par le biais du template design/standard/templates/node/view / full.tpl . Afin d'éviter cet affichage particulièrement laid, je crée un template discotheque.tpl spécifique au noeud discotheque .

Le template discotheque.tpl

Ce template, dont le contenu est présenté ci-dessous, est placé dans le répertoire design/plain_site/override/templates/discotheque/ :

{section show=$node.data_map.contenu_rubrqiue.content.is_empty|not}
      {attribute_view_gui attribute=$node.data_map.contenu_rubrique}
{/section}

Voici la surcharge ajoutée au début du fichier override.ini.append.php du siteaccess public:

[rubrique_discotheque]
Source=node/view/full.tpl
MatchFile=discotheque/discotheque.tpl
Subdir=templates
Match[class_identifier]=discotheque

Ne reste plus à présent qu'à créer les playlists...

Commentaires