[Flibouk]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site :
#~ Hébergeur / Soft : perso
#~ Informations Système :
#~ site pas en ligne
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour a tous,
je suis nouveau sur ce forum ainsi que dans l'utilisation du CMS MadeSimple.
J'ai fait mon gabarit template + css, ca marche impec.
Par contre pour le menu, j'aimerai comprendre comment ca marche exactement.

Aujourd'hui en html j'ai mon code qui est comme ca :

Code :

[== HTML ==]
<nav>
                <ul class="sf-menu">
                    <li class="item1 active"><a href="#">Accueil</a></li>
                     <li class="item5"><a href="#">Activités</a></li>
                     <li class="item6"><a href="#">Facebook</a></li>
                     <li class="item7"><a href="#">Contact</a></li>
                </ul>
              
              </nav>

Il y a plusieurs class car j'ai différent image bouton. Il s'agit d'un simple menu horizontal.
Concrètement, comment je dois procéder pour faire mon menu avec MadeSimple ?

Merci par avance.

[bess]

Bonjour Flibouk, bienvenue sur le forum

Prenons le sujet par le bon bout. Tu as une image associée à chaque entrées du menu donc à chaque pages.

Est-ce que l'association est manuelle (telle image pour telle page) ou est elle automatisable (une page nommée "toto" sera toujours associée à une image nommée ./uploads/images/toto.png)

La seconde solution est plus simple a gérer et plus rapide en terme d’exécution car le système n'aura pas à devoir se souvenir de l'url d'image pour telle et telle page.

Prenons comme référence l'alias de la page, c'est un nom unique, donc aucun risque d'avoir 2 pages pointant vers une même image.

Ton menu affiché :
- Accueil
- Prenez Contact
- A propos

Tes alias de page :
- accueil
- contact
- about

Tes images :
- /uploads/images/accueil.png
- /uploads/images/contact.png
- /uploads/images/about.png


Imaginons un template de menu ultra simple : je ne gère que les pages de type contenu et que sur un seul niveau. Il faudra évidement extrapoler avec tes propres utilisations et pas utiliser mon code tel quel !!

<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a href="{$node->url}">{$node->menutext}</a></li>
{/foreach}
</ul>

Ce que je vais faire c'est ajouter une classe à lien qui affichera une image bidon nommée /uploads/image/bidon.png

<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a class='bidon' href="{$node->url}">{$node->menutext}</a></li>
{/foreach}
</ul>

et mon CSS :

a.bidon{
background: url([[root_url]]/uploads/images/bidon.png) no-repeat top left transparent;
}

Là j'ai tous mes menus avec une image standardisée. Maintenant je vais surcharger lien par lien selon son alias

<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a class='bidon' href="{$node->url}" style="background-image:url({root_url}/uploads/images/{$node->alias}.png)">{$node->menutext}</a></li>
{/foreach}
</ul>

et là toutes les images sont surchargées en CSS directement node par node. Reste qu'il faut gérer là ou je n'ai pas encore d'image...

La suite tout de suite

[bess]

Tester si l'image existe. En Php c'est

if (file_exists($root_path.'/uplaods/images/'.$node->alias.'png'))

L'équivalent Smarty c'est donc

{if file_exists($root_path.'/uplaods/images/'.$node->alias.'png')}

Allez hop !

<ul>
{foreach from=$nodelist item=node}
<li>Alias : {$node->alias}, Text du lien : <a class='bidon' href="{$node->url}"
{if file_exists($root_path.'/uplaods/images/'.$node->alias.'png')}style="background-image:url({root_url}/uploads/images/{$node->alias}.png)"{/if}>{$node->menutext}</a></li>
{/foreach}
</ul>

et voilà fin de l'histoire, c'est automatique, ca trouve une image correspondante ou celle par défaut dans tous les cas

[Jean le Chauve]

Beau petit cours Bess
Attention : {if file_exists($root_path.'/uplaods/images
{if file_exists($root_path.'/uploads/images.

Autre lien : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2680

[Flibouk]

Ok j'ai compris le principe.
Merci beaucoup ! enfin surtout a BESS

[bess]

une fois que t'as testé avec succès oublie pas [Résolu] dans le titre de ce topic