8796 sujets

Développement web côté serveur, CMS

Utiliser un switch pour changer background selon Itemid

Bonsoir à tous,

Je suis des cours de webmaster à la fac et je voulais me créer un site sous joomla pour m'entrainer. J'ai réussi à le faire mais comme mon fond change à chaque page, j'ai du faire un template par page, ce qui n'est pas très propre. J'ai commencé les cours de php aussi je voulais changer mon index.php pr modifier les background et publier certains modules avec un switch relié à l'item id de la page demandée. Je bloque depuis plusieurs jours, pouvez-vous me dire ce qui vous semble faux ou me conseiller un moyen de parvenir au même résultat?
P.S.: Je suis débutante, et je m'y perds avec les $this (jquery?), alors toute aide sera vraiment précieuse!
P.P.S: Oui j'ai posté sur des forums pour joomla, mais les gens ne sont soit pas enclins à répondre, soit n'aime pas mettre les mains dans le cambouis...


<body>

<div id="container">
<div id="haut">
<div id="logo">
<h1><a href="http://www.kalianey.fr" accesskey="1"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/logo.png" alt="<?php echo JText::_('Kalianey Developpement - Page d\'accueil'); ?>" width="70" height="67" /></a></h1>
</div>
<div id="titre">
<jdoc:include type="modules" name="header" />
</div>
</div>

<div id="contenu" <?php
$page = $_GET['Itemid'];
switch($page){
case 11:
echo " class='accueil' ";
echo "<div id='accroche_accueil'>
<div id='presentation'><jdoc:include type='modules' name='right' /></div>
</div>";
break;

case 2:
echo "class='competences'";
echo "<div id='environnements'><jdoc:include type='modules' name='user1' />
</div>";

echo "<div id='navigateurs'><jdoc:include type='modules' name='user2' />
</div>";

echo "<div id='post-it'><jdoc:include type='modules' name='right' />
</div>";

echo "<div id='dock'><jdoc:include type='modules' name='user3' />
</div>";
break;

case 7:
echo " class='credits' ";
break;

case 3:
echo " class='realisation' ";
break;

case 4:
echo " class='mecontacter' ";
break;

case 5:
echo " class='credits' ";
break;

default:
echo " class='accueil' ";
echo "<div id='accroche_accueil'><div id='presentation'><jdoc:include type='modules' name='right' /></div>
</div>";

}
?>>
</div>


<div id="bas">
<div id="menu_principal">
<jdoc:include type="modules" name="bottom" />
</div>
</div>

</div>

</body>
Qu'est-ce qui ne marche pas exactement? J'avoue que j'ai pas tout saisi.

Déjà je constate quelques erreurs dans ton code (ou source d'erreurs).
Par exemple ici :
<div id="contenu" <?php
$page = $_GET['Itemid'];
switch($page){
case 11:
echo " class='accueil' ";
echo "<div id='accroche_accueil'>
<div id='presentation'><jdoc:include type='modules' name='right' /></div>
</div>";
break;

Le résultat HTML sera (si on est sur l'itemId 11) 
<div id="contenu" class='accueil' <div id='accroche_accueil'> <div id='presentation'><jdoc:include type='modules' name='right' /></div>
</div>>


==> Le résultat n'est pas conforme ni HTML, ni XHTML du coup tu auras des surprises à l'affichage.

Sur le fond, que veux-tu obtenir au final? Changer de background et de modules en fonction de l'ItemId? Si c'est le cas, il y a plus simple comme solution sur Joomla.
Merci pour ta réponse Smiley smile

Alors j'ai pas mal travaillé dessus et j'arrive désormais à afficher les bons modules sur les bonnes pages:
<div id="contenu" <?php
//$page = JRequest::getInt('Itemid', 0);
//$page = $_GET['Itemid'];
$itemid = JRequest::getVar('Itemid');
switch($itemid){

case 1:
echo "<div class='accueil'></div>";
break;

case 2:
echo "<div class='competences'></div>";
break;

case 7:
echo "<div class='cv'></div>";
break;

case 3:
echo "<div class='realisation'></div>";
break;

case 4:
echo "<div class='mecontacter'></div>";
break;

case 5:
echo "<div class='credits'></div>";
break;

default:
echo "<div class='accueil'></div>";



}
?>>


<div class="accueil">
<jdoc:include type="modules" name="user1" />
</div>

<div class="competences" >
<jdoc:include type="modules" name="user2" />
</div>



</div>


<div id="bas">
<div id="menu_principal">
<jdoc:include type="modules" name="bottom" />
</div>
</div>

Cela dit je ne parviens toujours pas à y associer un background différent pour chaque page, j'ai essayé d'inclure un element background dans une div, essayé un <link rel= "stylesheet" un peu partout mais rien à faire, quand il a un css, il le garde ;(. Si tu as plus simple pour changer tout le background par page je suis preneuse, j'ai fouillé encore et encore le net et rien trouvé qui fonctionne (mon dernier espoir en date était le plugin cssbyitem mais non Smiley ohwell ).

Pour info voilà mon site, qui fonctionne pour l'instant avec un template différent par page: http://kalianey.fr/
Bon j'ai trouvé la solution si ça peut servir à quelqu'un un jour:

<!-- On insère le script php pour générer chaque page avec son propre background nommé fond(numero de l'id) stocké dans images/stories associé à l'id de la page -->

<?php
$itemid = JRequest::getVar('Itemid');
if ($itemid==1) {
?>
<div class="contenu" style="background: url(images/stories/fond<?php echo($itemid); ?>.jpg) 0 0 no-repeat;">
<?php echo "<div class='accueil'></div>";?>
</div>


<?php } else { ?>

<?php } ?>



<?php
$itemid = JRequest::getVar('Itemid');
if ($itemid==2) {
?>
<div class="contenu" style="background: url(images/stories/fond<?php echo($itemid); ?>.jpg) 0 0 no-repeat;">
<?php echo "<div class='competences'></div>";?>
</div>


<?php } else { ?>

<?php } ?>


<!-- Partie contenant les modules propres à chaque page appelé dans plus haut dans le php -->

<div class="accueil">
<jdoc:include type="modules" name="user1" />
</div>

<div class="competences" >
<jdoc:include type="modules" name="user2" />
</div>


</div>


<div id="bas">
<div id="menu_principal">
<jdoc:include type="modules" name="bottom" />
</div>
</div>


</div>

Par contre je pense qu'on peut faire plus simple au lieu de lister id par id, faire une boucle qui récupère le chiffre et le compare automatiquement.. M'enfin je suis arrivée au bout de ce que je suis capable de faire là je crois Smiley lol
Tu as plusieurs autres solutions.
- Dans la partie admin de Joomla, tu peux associer un template par entrée de menu. Du coup, pour chaque template, tu ne mets que les modules souhaités et tu mets les couleurs ou le design que tu veux. C'est un peu lourd parce qu'il faut créer des templates.
- Utiliser des composants qui permettant de changer de CSS en fonction de la page sur laquelle tu te trouves (cssswitch fait ça très bien).

Le problème de ton code est qu'il n'est pas très portable. Si tu détruis une entrée de menu et que tu en recrées, il faut à nouveau revenir modifier ce fichier.
Alors c'est pas évident de savoir quelles sont les bonnes pratiques. Mon site qui est actuellement en ligne, http://kalianey.fr fonctionnait avec un template différent par page (donc 6 templates): or mon maître de stage en le voyant à crié au scandale et m'a dit que ça ne se faisait pas, et c'est vrai que ce n'était pas très pratique, quand je voulais modifier qq chose des parties communes du site il fallait que je copie-colle les modifications dans chacun des 6 templates... J'ai essayé un plug in css  qui devait switcher les feuilles selon la page, cssbyitemid, mais il ne fonctionnait pas, peux tu m en recommander un autre? Cependant il y aura tjs le pb de recopier les modifs générales dans chaque css, ce qui est long et fastidieux si on a bcp de pages.. La l avantage c'est que je n'ai qu'un index.php et qu'une feuille de style, et un template.
Cela dit c'est intéressant de savoir quelles sont les bonnes pratiques, j'avoue que je suis perdue entre les différents avis! Quid du référencement avec différents templates, par exemple? Ou de la lenteur vu que joomla doit changer de dossier à chaque page?
En fait c'est pas cssswitch c'est css2switch, je l'utilise pour mon site. Il marche nickel. Pour chaque item de menu tu peux dire quel est le template principal. Essayes-le et si t'as des questions tu viens me voir. Je l'utilise notamment pour le blog qui ne s'appuie pas sur la même feuille de style que le reste du site.

Si tu as une base commune à tous les templates, je te conseille d'avoir un template tbase.css et de rajouter des déclinaisons tbasebleu.css, tbasevert.css, ... Ainsi tu n'as pas à tout recopier à chaque fois, tu modifies que les parties impactées.

Pour le référencement il n'y a aucun impact. De plus les fichiers templates restent dans le même répertoire. Pour ce qui est de l'optimisation du temps d'affichage de tes pages, tu peux déjà utilisé la technique du gzip (au niveau htaccess), compresser tes fichier css, js, ... Par contre, c'est vrai il y a un gros flash quand on change de page.

Sinon graphiquement, c'est un site agréable.
Sujet clos
Aller à