[Résolu] Comment changer le gabarit d'un page à la volée?

[Résolu] Comment changer le gabarit d'un page à la volée? - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] Comment changer le gabarit d'un page à la volée? (/thread-4270.html)

[Résolu] Comment changer le gabarit d'un page à la volée? - archeo - 11/11/2019

Bonjour,

Je désirerais utiliser deux gabarits différents pour une même page suivant l'endroit du site où la page est appelée. Je n'ai trouvé aucun paramètre correspondant dans le tag de lien interne.

Si vous avez un lien ou un bout de code merci d'avance.

RE: comment changer le gabarit d'un page à la volée? - airelibre - 11/11/2019

Bonjour,

si je comprends bien tu veux changer le gabarit d'une page à la volée. A ma connaissance ceci n'est pas possible avec les gabarits classiques pour plusieurs raisons.

Tout d'abord, il faut que le gabarit soit attaché à une page pour que le CMSContentManager puisse trouver les champs de contenus {content} et prévoir le formulaire d'édition en backoffice. Changer de template à la volée signifie ne plus avoir forcément les mêmes champs pour le contenu.

Ensuite les pages ont 1 URL et en effet il n'y a pas de paramètre permettant de changer de template, en tous cas pas à ma connaissance (ce qui me semble logique).

Cependant, dans ton cas je dirais qu'il faut gérer le changement de look selon un paramètre passé dans l'url (par exemple "?tpl=2) et dans le gabarit de page :

Code :
{if isset($smarty.get.tpl) and $smarty.get.tpl eq 2}

    Code 2

{else}

    Code 1

{/if}

Et ce avec tes balises CSS ou encore avec {cms_stylesheet} (dans laquelle tu peux spécifier un design_id) ou avec des {cms_queue_css} différents sur une 2.3 (en beta mais va sortir sous peu).

Enfin en terme de SEO, sois sûr de ce que tu veux faire et gère bien ton URL canonique (si tu es toutefois sur des pages publiques bien sûr).

Tiens-nous au courant de la solution que tu auras choisie, cela peut aider d'autres utilisateurs. Merci Wink

RE: comment changer le gabarit d'un page à la volée? - archeo - 12/11/2019

merci airelibre.
Je détaille le problème:
Une page doit s'afficher soit de manière standard dans les menus du site soit en en utilisant une map et des area shape sur une image. Dans ce dernier cas la page s'affiche en pop up grâce à fancybox. Dans ce dernier cas le gabarit n'a pas de menus et de banière.
J'ai d'abord pensé à utiliser deux copies identiques de la page, l'une s'affichant dans les menus l'autre ne s'affichant pas dans les menus et ne s'affichant que par l'image interactive. Avec cette solution, je crains que Google me colle un "duplicate contents".
L'autre solution est une même page avec 2 gabarits différents ou gabarit qui se modifie en fonction de l'adresse de la page d'origine. L'idée est de stoker la page d'origine dans une variable globale puis de la tester dans le gabarit. Tester l'alias de la page d'origine devrait suffire.

RE: comment changer le gabarit d'un page à la volée? - airelibre - 12/11/2019

J'aurai tendance à partir sur la solution de 2 pages / deux gabarits car le contenu sera différent, donc pas de duplicate content.

Mais en effet tu peux aussi utiliser un paramètre dans l'url et adapter le contenu dans Smarty Wink

Tiens-nous au courant

RE: comment changer le gabarit d'un page à la volée? - archeo - 12/11/2019

variable globale: j'oublie, ça n'existe pas pour les smarties.
Je vais donc tester ton idée d'ajouter un paramètre à l'url.

Page3 page qui doit être affichée de deux manières différentes, il lui est associé un gabarit "popup" qui est identique à un gabarit standard du site.
Page1 lance la page3 dans un menu popup, le gabarit "popup" est modifié pour ne pas afficher les éléments superflus (menus, bannière...)
Page2 lance le page3 dans une page standard, le gabarit "popup" n'est pas modifié.

Dans la page1 qui affiche page 3 dans un popup :
<area shape="poly" coords="510, 178, 510, 207, 639, 208, 644, 107, 606, 114, 604, 179" class="various" href="{cms_selflink href='gymnospermes' urlparam='?tpl=2'}" data-fancybox-type="iframe" />

dans la page2 qui affiche page 3 dans un gabarit standard
<a href="{cms_selflink href='gymnospermes'}"> Gymnospermes</a>

pour tester:
Dans la page3 qui s'affiche avec aspects différents j'ai copié ton code:

{if isset($smarty.get.tpl) and $smarty.get.tpl eq 2}
Code 2
{else}
Code 1
{/if}

Avec un test rapide j'ai bien affichage de "Code2" depuis la page 1 et "Code 1" depuis la page 2

URL canonique est le même dans les deux cas:
<link rel="canonical" href="http://localhost/cmsmadesimple/histoire-de-la-vie/conquete-des-continents/histoire-des-végétaux-terrestres/gymnospermes.html" />

Il ne reste plus qu'à créer le gabarit en shuntant les parties inutiles lors de l'affichage en popup.

Ce qui donnera :
solution 1
{if isset($smarty.get.tpl) and $smarty.get.tpl eq 2}
{*on affiche rien*}
{else}
{*on affiche le code standard du gabarit*}
{/if}
Ceci pour chaque item à éliminer

ou
solution2
{if isset($smarty.get.tpl) and $smarty.get.tpl eq 2}
{*code du gabarit pour le popup*}
{else}
{*code du gabarit pour un affichage standard*}
{/if}

Pour moi le plus simple sera la solution2 puisque que j'ai déjà un gabarit simplifié.

RE: comment changer le gabarit d'un page à la volée? - archeo - 12/11/2019

voici finalement le gabarit. Je n'ai mis que la partie entre les balises <body></body> le head est commun aux 2 gabarits

Code :
  <body >

{if isset($smarty.get.tpl) and $smarty.get.tpl eq 2}

{*On crée le gabarit de la fenêtre popup*}

    <div id="ncleanblue" >

      <div id="pagewrapper" class="core-wrap-100 core-center">

{* start accessibility skip links *}

        <ul class="accessibility">

          <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>

          <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>

        </ul>

{* end accessibility skip links *}

        <hr class="accessibility" />

{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Content (Navigation and Content columns) *}

        <div id="content" class="util-clearfix"> 

{* Start Bar *}

          <div  class="util-clearfix" >

<div class="core-float-left" >

{* Start Navigation, style sheet  "Layout: NCleanBlue", starting at Menu  ROOT *}

          <h2 class="accessibility util-clearb">Navigation</h2>

{* anything class="accessibility" is hidden for visual browsers by CSS *}

          <hr class="accessibility util-clearb" />

{* End Navigation *}

</div>

            <hr class="accessibility util-clearb" />

          </div>

{* End Bar *}

{* Start Content Area, right side *}

          <div id="main"  class="core-float-left">

{* main content *}

            <div class="main-main util-clearfix " >

             <h1 class="title">{title}</h1>

            {content}               

            </div>          

          </div>

{* End Content Area, right side *}

        </div>

{* End Content *}

      </div>

{* end pagewrapper *}

      <span class="util-clearb"></span>

    </div>

{* End Div *}

{global_content name='xiti'}

{else}

{*On crée le gabarit général*}  

{global_content name='suivre'}

    <div id="ncleanblue">

      <div id="pagewrapper" class="core-wrap-960 core-center">

{* start accessibility skip links *}

        <ul class="accessibility">

          <li> {*content block="titre_html" label="Titre formaté en html" online="true" size="1"  maxlength="50"*}</li>

          <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>

          <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>

        </ul>

{* end accessibility skip links *}

        <hr class="accessibility" />

{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Header, with logo image that links to the default start page *}

        <div id="header" class="util-clearfix">

{* logo image that links to the default start page. Logo image is changed in the style sheet  "Layout: NCleanBlue" *}

        <div id="logo" class="core-float-left ">

            {*cms_selflink  lang='fr' dir='start' *}

<div class="noprint">{cms_selflink  lang='fr' dir='start' text=' ' image={uploads_url}|cat : '/design/logo_site.jpg' width ='960'  height='120'}</div>                    

<div class="toprint">{cms_selflink  lang='fr' dir='start' text='Evolution biologique '  width ='960'  height='120'}</div>

        </div>          

{* Start Search, the input "Submit" is using an image, CSS: div#search input.search-button *}

         <div id="search" class="core-float-right ">

            <div class="noprint">{search lang='fr_FR' submit='OK' search_method="post" searchtext="Rechercher sur le site" passthru_News_detailpage='actualite' detailpage='353' }</div>

         </div>

{* End Search *}

         <span class="util-clearb"> </span>          

        </div>

{* End Header *}

{* Start Content (Navigation and Content columns) *}

        <div id="content" class="util-clearfix"> 

{* Start Bar *}

          <div id="bar" class="util-clearfix noprint" >

<div class="core-float-left" >

{* Start Navigation, style sheet  "Layout: NCleanBlue", starting at Menu  ROOT *}

          <h2 class="accessibility util-clearb">Navigation</h2>

{* anything class="accessibility" is hidden for visual browsers by CSS *}

<div class="util-clearfix"  >

{Navigator  template='menu_horizontal' number_of_levels="2"}

          </div>

          <hr class="accessibility util-clearb" />

{* End Navigation *}

</div>

          <hr class="accessibility util-clearb" />

          </div>

{* End Bar *}

{* Start left side *}

          <div id="left" class="core-float-left">

          <div class="sbar-top" >

{print showbutton=true text=" Imprimer cette page" popup="true" script="true" includetemplate="false"}

{cms_module module='PrintingPDF' pdf="true" showbutton="true" text="Cliquer pour générer le PDF"} 

            </div>

            <div class="sbar-main noprint" >

            <h2 class="accessibility">Navigation</h2>            

{Navigator template="menu_vertical"  start_level="2" number_of_levels="1"}

            <hr class="accessibility" />

            </div >

           <div class="sbar-bottom">

           </div >

          </div>

{* End left side *}

{* Start Content Area, right side *}

          <div id="main"  class="core-float-left page811" >

{* Start News *}

<div id="news" class="noprint"  >

    <div id="titre-news">

l'actualité

    </div>

{news number="40"   summarytemplate ='actualites_mini_select_detailpage_detailtemplate' number ="1"  lang='fr_FR' category="actualités,Mise à jour du site,Travaux en cours,Techniques 3D,Pédagogie,musées" }

    <div class="NewsSummary NewsSummaryLink">&nbsp;&nbsp;

        <a href="{cms_selflink href='archives' }">Archives des articles >></a>

    </div>              

    <div class="sbar-bottom" >

    &nbsp;&nbsp;

    </div>

</div>

{* End News *}

{* main top, holds top image and print image *}

            <div class="main-top noprint">

<div  id = "decoration" class="core-float-left">

{global_content name='menu_temps'}

{*global_content name='avez_vous_lu'*}

</div> 

{* Start Breadcrumbs, a bit of letting you know where your at *}

            <div class="breadcrumbs "  >

            <div class="core-float-left">

                {global_content name='page_precedante'}

            </div>

           {Navigator action='breadcrumbs'}

</div>

{* End Breadcrumbs *}

            </div>  

{* main content *}

            <div class="main-main util-clearfix">

{if $content_obj->GetPropertyValue('extra1')=='sans-menu-3'}

{else}

{root_page_hierarchy start_level='4' assign='hierarchy'}

{if $hierarchy==""}

{else}

<div class="core-float-right" id="menu_3">

<div class="noprint"> {Navigator  template="menu_3"  number_of_levels="4"   start_element=$hierarchy collapse="1"} </div>

</div>

{/if}

{/if}

{*content block="titre_html" assign=titre_html*}

<h1 class="title">

        {title} 

</h1>

           {$contenu}        

            </div>           

           <div  >                             

           </div >            

{* Start main bottom and relational links *}

            <div class="main-bottom noprint">

 {global_content name='info_page'}             

              <div class="right49 core-float-right">

              {global_content name='haut_page_icone'}              

              </div>                                                             

{* End relational links *}

              <hr class="accessibility" />

            </div>

{* End main bottom *}

          </div>

{* End Content Area, right side *}

        </div>

{* End Content *}

      </div>

{* end pagewrapper *}

      <span class="util-clearb"></span>

{* Start Footer *}

      <div id="footer-wrapper">

        <div id="footer" class="core-wrap-960">          

{* edit the footer in the Global Content Block called "footer" *}

          <div class="block cms core-float-left">

            {global_content name='footer'}

            {global_content name='xiti'}

          </div>         

          <span class="util-clearb"></span>

        </div>

      </div>

{* End Footer *}

{* End Div *}

</div>

{/if}

  </body>

RE: comment changer le gabarit d'un page à la volée? - archeo - 13/11/2019

On peut considérer le problème comme résolu, merci à airelibre pour l'idée du paramètre dans la l'adresse.