source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/sommaire/sommaire_modeportailcognac.html @ 103624

Last change on this file since 103624 was 103624, checked in by real3t@…, 3 years ago

Le slider du mode Cognac est basé sur les documents joints au portfolio du dernier article ayant le mot-clé EDITO

File size: 11.7 KB
Line 
1#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
2#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
3#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
4#SET{Largeurcontent_central,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}})}
5#SET{Largeurcontent_extra,(#GET{LargeurContaineur}|moins{#GET{Largeurcontent_central}})}
6<script type="text/javascript">
7        CanceladjustLayout = true;
8</script>
9<main id="main" role="main"><div id="communiquant_content">
10<a id="letexte"></a>
11
12<BOUCLE_Edito(ARTICLES) {titre_mot=EDITO}{!par date}{0,1}{lang}{doublons}>
13#SET{article_url,#ARTICLE_URL}
14<!-- SLIDER -->
15<div id="diaporama" class="zone-slider">
16        <header>
17                <h1 class="hide">#TITRE</h1>
18        </header>
19        <div class="slider-slick">
20                <BOUCLE_Slider(DOCUMENTS){id_article}{mode=document}{par num titre}{!par date}{extension IN png,jpg,gif}{vu=non}>
21                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
22                        <div class="slider-diapo-imgfull">
23                                <a href="#GET{article_url}" title="Voir [(#_Edito:TITRE|attribut_html)]">
24                                        <img src="[(#FICHIER|copie_locale|focusimage{1920,580}|extraire_attribut{src})]" alt="" />
25                                </a>
26                        </div>
27                </div>
28                </BOUCLE_Slider>
29        </div>
30        <div id="liens-diaporama">
31                <ul>
32                        <li class="#EDIT{titre}">
33                                <a href="#ARTICLE_URL" title="Voir [(#TITRE|attribut_html)]">
34                                        <span>#TITRE</span>
35                                        <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
36                                </a>
37                        </li>
38                </ul>
39        </div>
40</div>
41<!-- fin SLIDER -->
42</BOUCLE_Edito>
43
44<!-- ACTUS -->
45<div id="actualites" class="zone-actus">
46        <header class="titre-sommaire">
47                <h1>En ce moment à Cognac</h1>
48        </header>
49        <div class="row" id="masonry" role="region" aria-label="Actualités">
50                <div class="grid">
51                        <BOUCLE_articles_recentsAlaUne(ARTICLES){lang}{!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_alanune,4})}{doublons}{titre_mot=AlaUne}>
52                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL})]})]
53                        [(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
54                        [(#SET{hauteur,[(#GET{logo}|hauteur|sinon{1})]})]
55                        [(#SET{ratio,[(#GET{largeur}|div{#GET{hauteur}})]})]
56                        #SET{facteur,''}#SET{largeur,308}
57                        [(#GET{ratio}|>{1.8764}|?{#SET{facteur,2}#SET{largeur,638}})]
58                        [(#GET{ratio}|>{2.8088}|?{#SET{facteur,3}#SET{largeur,955}})]
59                        <div class="grid-item[ grid-item-x(#GET{facteur})]">
60                                <div class="content-actus #EDIT{titre}">
61                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
62                                                [<img src="(#GET{logo}|focusimage{#GET{largeur},340}|extraire_attribut{src}|sinon{http://placehold.it/#GET{largeur}x340})" alt="" width="#GET{largeur}" height="340" />]
63                                                <div class="h2"><span class="titre-actus">#TITRE</span>
64                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
65                                        </a>
66                                </div>
67                        </div>
68                        </BOUCLE_articles_recentsAlaUne>
69                        <B_AgendaDerniersAjouts>
70                        <div class="grid-item">
71                        <BOUCLE_AgendaDerniersAjouts(EVENEMENTS)
72                        {branche}
73                        {par date_debut}
74                        {0,(#CONFIG{soyezcreateurs/nombres_agenda,5})}
75                        {date_fin>=(#ENV{date}|affdate{'Y-m-d'})}
76                        {statut=publie}
77                        >
78                        <BOUCLE_DernierEvenementArticle(ARTICLES){id_article}>
79                                <div class="content-actus #EDIT{titre}">
80                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
81                                                <header class="flexbox-center-space-between triadeA texte-blanc">
82                                                        <time itemprop="startDate" title="#DATE_DEBUT" datetime="#DATE_DEBUT">
83                                                                <span class="dateNombre"><strong>[(#DATE_DEBUT|affdate{d})]</strong>&nbsp;/[(#DATE_DEBUT|affdate{m})]</span>
84                                                                <span class="dateMois display-block">[(#DATE_DEBUT|affdate{Y})]</span>
85                                                        </time>
86                                                        [<img src="(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|focusimage{180,95}|extraire_attribut{src}|sinon{http://placehold.it/180x95})" alt="" width="180" height="95" />]
87                                                </header>
88                                                <div class="h2"><span class="titre-actus">[ (#_DernierEvenementArticle:TITRE|!={#_AgendaDerniersAjouts:TITRE}|?{#TITRE[&nbsp;: (#_AgendaDerniersAjouts:TITRE)],#TITRE})]</span>
89                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
90                                        </a>
91                                </div>
92                        </BOUCLE_DernierEvenementArticle>
93                        [(#COMPTEUR_BOUCLE|alterner{'','</div><div class="grid-item">'})]
94                        </BOUCLE_AgendaDerniersAjouts>
95                        </div>
96                        </B_AgendaDerniersAjouts>
97                        <BOUCLE_Secteurs_Exclus(RUBRIQUES){titre_mot=SecteurPasDansQuoiDeNeuf}><BOUCLE_Articles_Secteurs_Exclus(ARTICLES){id_secteur}{doublons} /></BOUCLE_Secteurs_Exclus>
98                        <BOUCLE_Rubriques_Exclues(RUBRIQUES){titre_mot=PasDansQuoiDeNeuf}><BOUCLE_Articles_Exclus(ARTICLES){id_rubrique}{doublons}{lang} /></BOUCLE_Rubriques_Exclues>
99                        <BOUCLE_exclus(ARTICLES){titre_mot=PasDansQuoiDeNeuf}{doublons} />
100                        <BOUCLE_articles_QuoideNeuf(ARTICLES) {!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_quoideneuf,5})}{doublons}{lang}>
101                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL})]})]
102                        [(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
103                        [(#SET{hauteur,[(#GET{logo}|hauteur|sinon{1})]})]
104                        [(#SET{ratio,[(#GET{largeur}|div{#GET{hauteur}})]})]
105                        #SET{facteur,''}#SET{largeur,308}
106                        [(#GET{ratio}|>{1.8764}|?{#SET{facteur,2}#SET{largeur,638}})]
107                        [(#GET{ratio}|>{2.8088}|?{#SET{facteur,3}#SET{largeur,955}})]
108                        <div class="grid-item[ grid-item-x(#GET{facteur})]">
109                                <div class="content-actus #EDIT{titre}">
110                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
111                                                [<img src="(#GET{logo}|focusimage{#GET{largeur},340}|extraire_attribut{src}|sinon{http://placehold.it/#GET{largeur}x340})" alt="" width="#GET{largeur}" height="340" />]
112                                                <div class="h2"><span class="titre-actus">#TITRE</span>
113                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
114                                        </a>
115                                </div>
116                        </div>
117                        </BOUCLE_articles_QuoideNeuf>
118                </div>
119        </div>
120        <div class="text-center avec-margin-top avec-margin-bottom">
121                <a class="button texte-blanc triadeA" href="#" title="Consulter les atualités">Consulter toutes les actualités</a>
122        </div>
123</div>
124<!-- fin ACTUS -->
125
126<B_DessousBreves>
127<!-- PROJETS -->
128<div id="lesprojets" class="zone-projets">
129        <header class="titre-sommaire">
130                <h1>Les projets</h1>
131        </header>
132        <div id="projets" class="avec-margin-top">
133                <BOUCLE_DessousBreves(RUBRIQUES){titre_mot = DessousBreves }{par num titre}>
134                <div class="projet idprojet#COMPTEUR_BOUCLE #EDIT{titre}">
135                        <div class="content-projets">
136                                <a href="#URL_RUBRIQUE"[ title="(#DESCRIPTIF|attribut_html)"]>
137                                        <h2>#TITRE</h2>
138                                        <div class="suite">
139                                                <span class="icon icon-arrow-right2">&#10140;</span>
140                                        </div>
141                                </a>
142                        </div>
143                </div>
144                </BOUCLE_DessousBreves>
145        </div>
146        <div class="clearfix"></div>
147</div>
148<!-- fin PROJETS -->
149</B_DessousBreves>
150
151<!-- PRATIQUE -->
152<div id="pratique" class="zone-pratique">
153        <header class="titre-sommaire">
154                <h1>Cognac pratique</h1>
155        </header>
156        <div role="region" aria-label="Pratique">
157                <div class="slider-pratique">
158                        <div class="content-pratique">
159                                <a href="#" title="Lire l'article">
160                                        <img src="https://unsplash.it/280/190?image=118" alt="" />
161                                        <div class="h2"><span class="titre-pratique">Agenda</span>
162                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
163                                </a>
164                        </div>
165                        <div class="content-pratique">
166                                <a href="#" title="Lire l'article">
167                                        <img src="https://unsplash.it/280/190?image=182" alt="" />
168                                        <div class="h2"><span class="titre-pratique">Cantine</span>
169                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
170                                </a>
171                        </div>
172                        <div class="content-pratique">
173                                <a href="#" title="Lire l'article">
174                                        <img src="https://unsplash.it/280/190?image=18" alt="" />
175                                        <div class="h2"><span class="titre-pratique">Piscine</span>
176                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
177                                </a>
178                        </div>
179                        <div class="content-pratique">
180                                <a href="#" title="Lire l'article">
181                                        <img src="https://unsplash.it/280/190?image=182" alt="" />
182                                        <div class="h2"><span class="titre-pratique">Le mag</span>
183                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
184                                </a>
185                        </div>
186                        <div class="content-pratique">
187                                <a href="#" title="Lire l'article">
188                                        <img src="https://unsplash.it/280/190?image=118" alt="" />
189                                        <div class="h2"><span class="titre-pratique">Compte citoyen</span>
190                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
191                                </a>
192                        </div>
193                        <div class="content-pratique">
194                                <a href="#" title="Lire l'article">
195                                        <img src="https://unsplash.it/280/190?image=82" alt="" />
196                                        <div class="h2"><span class="titre-pratique">Démarches en ligne</span>
197                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
198                                </a>
199                        </div>
200                        <div class="content-pratique">
201                                <a href="#" title="Lire l'article">
202                                        <img src="https://unsplash.it/280/190?image=28" alt="" />
203                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
204                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
205                                </a>
206                        </div>
207                        <div class="content-pratique">
208                                <a href="#" title="Lire l'article">
209                                        <img src="https://unsplash.it/280/190?image=132" alt="" />
210                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
211                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
212                                </a>
213                        </div>
214                        <div class="content-pratique">
215                                <a href="#" title="Lire l'article">
216                                        <img src="https://unsplash.it/280/190?image=148" alt="" />
217                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
218                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
219                                </a>
220                        </div>
221                        <div class="content-pratique">
222                                <a href="#" title="Lire l'article">
223                                        <img src="https://unsplash.it/280/190?image=184" alt="" />
224                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
225                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
226                                </a>
227                        </div>
228                        <div class="content-pratique">
229                                <a href="#" title="Lire l'article">
230                                        <img src="https://unsplash.it/280/190?image=238" alt="" />
231                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
232                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
233                                </a>
234                        </div>
235                        <div class="content-pratique">
236                                <a href="#" title="Lire l'article">
237                                        <img src="https://unsplash.it/280/190?image=282" alt="" />
238                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
239                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
240                                </a>
241                        </div>
242                </div>
243        </div>
244</div>
245<!-- fin PRATIQUE -->
246
247</div><!-- communiquant_content --></main>
248
249[<script src="(#CHEMIN{javascript/masonry.pkgd.min.js})" type="text/javascript"></script>]
250[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
251<script type="text/javascript">
252        // slider Slick
253        $(document).ready(function(){
254                $('.slider-slick').slick({
255                  autoplay: true,
256                  pauseOnHover: true,
257                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
258                  fade: true,
259                  cssEase: 'linear',
260                  arrows: false,
261                  dots: true,
262                  centerMode: true,
263                  focusOnSelect: true
264                });
265                $('.slider-pratique').slick({
266                  dots: false,
267                  slidesToShow: 7,
268                  infinite: true,
269                  variableWidth: true
270                });
271        });
272        // external js: masonry.pkgd.js, imagesloaded.pkgd.js
273        // init Masonry after all images have loaded
274        var $grid = $('.grid').imagesLoaded( function() {
275          $grid.masonry({
276                itemSelector: '.grid-item',
277                gutter: 20
278          });
279        });
280</script>
281
282#FILTRE{mini_html}
Note: See TracBrowser for help on using the repository browser.