[jcpapa]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.13
#~ Url du site : http://www.les-arts-du-coin.fr/
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.13
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.9
#~ ModuleManager: 1.5.8
#~ News: 2.15
#~ Search: 1.7.12
#~ ThemeManager: 1.1.8
#~ CGExtensions: 1.45
#~ CGSmartImage: 1.17.2
#~ Gallery: 2.0.2
#~ Captcha: 0.4.6
#~ FormBuilder: 0.8.1.1
#~ CGJobMgr: 1.3.4
#~ NMS: 2.9.5
#~ CGSimpleSmarty: 1.7.4
#~ CGContentUtils: 1.5
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale: fr_FR.utf8
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.5.22
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 512M
#~ max_execution_time: 300
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: fpm-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.73
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjourà tous,

Je viens de créer cette page avec des "Carte/images" cliquables.
La première carte est celle sur laquelle je travaille, les deux autre cartes sont encore en html... :
http://www.les-arts-du-coin.fr/index.php?page=carte

J'ai réussi en suivant les tutos de Jean Le Chauve à modifier mon gabarit pour appeler mes éléments via l'administration de la page concernée. Tout fonctionne !
Bon, ce n'est sûrement pas très rationnel, mais ça marche !

Maintenant, mon problème est le suivant :

Bien sûr, je pourrais reproduire le code de cette "carte/image" autant de fois que je le désire et j'obtiendrais ainsi la page que je veux...

Mais je pense qu'il doit être possible de faire de cet agencement pour une carte, un autre code, que l'on appellerait dans le genre : "Ajouter une nouvelle carte/image" et où il n'y aurait plus qu'à remplir les champs... Ainsi, la page viendrait s'enrichir... un peu comme pour les news.
L'idéal serait :
1 - ajouter une carte/image
2 - créer la page correspondante à la carte/image (selon un gabarit prévu)...

Bon, je me doute que ça ne doit pas être simple. mais là où j'en suis, je me dis que ce serait dommage d'arrêter en si bon chemin.

Mon gabarit (j'ai récupéré le html des "cartes" sur une page qui me convenait) Je m'occuperai des CSS ensuite... :

Code :

[== XML ==]
{process_pagedata}{strip}
{cms_lang_info assign='nls'}
{content assign='maincontent' label='Normal Content'}
{content block="TitreCarte" assign=TitreCarte label="Titre de la carte :" wysiwyg=false tab="Carte image" oneline=true}
{content block="TexteCarte" assign=TexteCarte label="Court résumé de la carte (50 caractères maxi) :" wysiwyg=false tab="Carte image" oneline=true}
{content_module module='CGContentUtils' block='image_carte_1' name='image_carte_1' label="Choisir l'image de la carte" assign=imgCarte tab="Carte image"}
{content_module module='CGContentUtils' block='link_bouton_lire_plus' name='link_bouton_lire_plus' label="Choisissez la page liée au bouton :" assign=linkBouton tab="Carte image"}
{content block='mobileonly' assign='mobileonly' label='Mobile only Content'}
{mobile}{capture assign='mobiletemp'}{$mobile_detect}{/capture}
{/strip}<!DOCTYPE html >
<!--[if IE 9]><html class="lt-ie10" lang="{if isset($nls)}{$nls->htmlarea()}{/if}" > <![endif]-->
<html class="no-js" lang="{if isset($nls)}{$nls->htmlarea()}{/if}">
    <head>
        <title>{if $page_name !='home'}{title} - {/if}{sitename}</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name='HandheldFriendly' content='true' />
        {metadata}
        {if isset($canonical)}
        <link rel="canonical" href="{$canonical}" />
        {elseif isset($content_obj)}
        <link rel="canonical" href="{$content_obj->GetURL()}" />
        {/if}
{* Link to foundation static stylesheets*}
<link rel="stylesheet" href="{root_url}/foundation-5.0.2/css/normalize.css">
        <link rel="stylesheet" href="{root_url}/foundation-5.0.2/css/foundation.min.css" />
{* Link to stylesheets on the database*}
{cms_stylesheet}
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
        <script src="{root_url}/foundation-5.0.2/js/modernizr.js"></script>
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
    </head>
    <body>
{* image-page-spécifique Facebook *}
{content block="Vignette facebook" wysiwyg="false" oneline="true" size="70" label="(Option) Vignette image pour partage facebook. Indiquez le nom de l'image (+extension) que vous avez uploadée dans le dossier thumbsFacebook (pas de caractères spéciaux, ni espaces, min width 200px)"  assign="thumbFacebook"}

{* Facebook bouton J'aime *}
<div id="fb-root"></div>
{literal}
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{/literal}

        <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <!-- Emplacement du Titre -->
            <li class="name">
              <h1 id="logo"><a href="http://www.les-arts-du-coin.fr/">{sitename} {global_content name='tete_lezard_left'}</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
          </ul>
          {menu template="theme // responsive-main-menu" excludeprefix="sitemap"}
        </nav>
        {* Page name and Breadcrumbs hidden if it's the home page*}
        <header id="{$page_name}">
            <div class="row">
                {if $page_name =='home'}

              

                <div id="carousel">{news summarytemplate="responsive-news-carousel" number="4"}</div>
                

                {else}
                <div class="large-7 columns">
                <h3>{title}</h3>
                </div>
                <div class="large-5 columns">
                {*menu template="theme // responsive-sub-nav" start_level="2"*}
                </div>
                {/if}
            </div>
        </header>
        <div class="row">
            <div class="large-8 columns">
            {if $page_name !='home'}
                <div class="hide-for-small" id="breadcrumbs">
                    {menu action="breadcrumbs" template="breadcrumbs"}
                </div>
                {/if}

                {*If the Mobile content is empty we show the normal content*}
                {if $mobiletemp && $mobileonly != ''}
                {$mobileonly}
                {else}
                {$maincontent}
                {/if}
{*Début carte-image*}
{*première carte*}
<p class="show-for-small"></p>
<div class="large-4 columns" style="background: url('{$imgCarte}') no-repeat left top; background-size:cover; background-position: center center; min-height:350px;border:4px solid white">
<div style="background:rgba(0,0,0,.7); color:#fff; padding:7px 7px 15px 15px; position:absolute; bottom: 0; left:0; width:100%;">
<h4 style="color:#fff;">{$TitreCarte}</h4>
<p>{$TexteCarte}</p>
<a class="small radius button" target="_self" href="{cms_selflink href=$linkBouton}">Lire plus</a>
</div>
</div>
{*deuxieme carte*}
<p class="show-for-small"></p>
<div class="large-4 columns" style="background: url('uploads/images/Gallery/ceramique_jardin/mouton09.jpg') no-repeat left top; background-size:cover; background-position: center center; min-height:350px;border:4px solid white">
<div style="background:rgba(0,0,0,.7); color:#fff; padding:7px 7px 15px 15px; position:absolute; bottom: 0; left:0; width:100%;">
<h4 style="color:#fff;">Fabrication</h4>
<p>En grès cuit à 1300°, toute l'année dehors...</p>
<a class="small radius button" target="_self" href="{cms_selflink href='volume'}">Lire plus</a>
</div>
</div>
{*troisieme carte*}
<p class="show-for-small"></p>
<div class="large-4 columns" style="background: url('uploads/images/Gallery/ceramique_jardin/25_poisson06l.jpg') no-repeat left top; background-size:cover; min-height:350px;border:4px solid white">
<div style="background:rgba(0,0,0,.7); color:#fff; padding:7px 7px 15px 15px; position:absolute; bottom: 0; left:0; width:100%;">
<h4 style="color:#fff;">Poissons</h4>
<p>Comme un poisson dans l'air...</p>
<a class="small radius button" target="_self" href="{cms_selflink href='volume'}">Plus...</a>
</div>
</div>
<p></p>
{*Fin carte-image*}            
            </div>
                        
            <div class="large-4 columns">
                <div id="search">{search search_method="post"}</div>
                <h4>Actualités {global_content name='lezard_vert_droit'}{global_content name='FBjaime'}</h4>
                <div class="panel news" id="news">
                    <p>Dernières NEWS en date...</p>
                    {news detailtemplate="responsive-news-detail" detailpage="responsive-news-template" number="2"}
                <div class="small-8 small-offset-4 row"><a class="noMarginBottom right tiny button secondary right" href="/index.php?page=actualite" title="More News">Toutes les News...</a></div>
                </div>
            </div>
        </div>

        {*REMARQUE: vous pouvez utiliser un bloc de contenu global spécifique pour afficher un pied de page différent sur la version mobile*}
        <footer class="hide-for-small">
            <div class="row">
                <div class="large-12 columns">
                </div>
            </div>
        </footer>
        <div id="copyright">
            <div class="row full-width">
                <div class="small-12 columns">
                {global_content name='footer'}
                </div>
            </div>
        </div>

        <script src="{root_url}/foundation-5.0.2/js/jquery.js"></script>
        <script src="{root_url}/foundation-5.0.2/js/foundation.min.js"></script>

        {literal}
        <script>
          $(document).foundation();
        </script>
        {/literal}
    </body>
</html>

Voilà...
Je suis curieux de lire vos avis.

Merci, Bonne journée