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

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

Passage de la fonction focusimage en image_focus dans la matrice des traitements d'images de SPIP

File size: 9.4 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="cognac_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="(#DESCRIPTIF|attribut_html)"]>
24                                        <img src="[(#FICHIER|copie_locale|image_focus{1920,580}|extraire_attribut{src})]" alt="" />
25                                </a>
26                        </div>
27                </div>
28                </BOUCLE_Slider>
29                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
30                        <div class="slider-diapo-imgfull">
31                                <a href="#GET{article_url}"[ title="(#DESCRIPTIF|attribut_html)"]>
32                                        <img src="[(#CHEMIN{images/placeholder.jpg}|image_focus{1920,580}|extraire_attribut{src})]" alt="" />
33                                </a>
34                        </div>
35                </div>
36                <//B_Slider>
37        </div>
38        <div id="liens-diaporama">
39                <ul>
40                        <li class="#EDIT{titre}">
41                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]">
42                                        <span>#TITRE</span>
43                                        <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
44                                </a>
45                        </li>
46                </ul>
47        </div>
48</div>
49<!-- fin SLIDER -->
50</BOUCLE_Edito>
51
52<!-- ACTUS -->
53<div id="actualites" class="zone-actus">
54        <header class="titre-sommaire">
55                <h1><:soyezcreateurs:quoideneuf:></h1>
56        </header>
57        <div class="row" id="masonry" role="region" aria-label="Actualités">
58                <div class="grid">
59                        <BOUCLE_articles_recentsAlaUne(ARTICLES){lang}{!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_alanune,4})}{doublons}{titre_mot=AlaUne}>
60                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,340})]})]})]
61                        [(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
62                        [(#SET{hauteur,[(#GET{logo}|hauteur|sinon{1})]})]
63                        [(#SET{ratio,[(#GET{largeur}|div{#GET{hauteur}})]})]
64                        #SET{facteur,''}#SET{largeur,308}
65                        [(#GET{ratio}|>{1.8764}|?{#SET{facteur,2}#SET{largeur,638}})]
66                        [(#GET{ratio}|>{2.8088}|?{#SET{facteur,3}#SET{largeur,955}})]
67                        <div class="grid-item[ grid-item-x(#GET{facteur})]">
68                                <div class="content-actus alaune #EDIT{titre}">
69                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
70                                                [<img src="(#GET{logo}|image_focus{#GET{largeur},340}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="340" />]
71                                                <div class="h2"><span class="titre-actus">#TITRE</span>
72                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
73                                        </a>
74                                </div>
75                        </div>
76                        </BOUCLE_articles_recentsAlaUne>
77                        <B_AgendaDerniersAjouts>
78                        <div class="grid-item">
79                        <BOUCLE_AgendaDerniersAjouts(EVENEMENTS)
80                        {branche}
81                        {par date_debut}
82                        {0,(#CONFIG{soyezcreateurs/nombres_agenda,5})}
83                        {date_fin>=(#ENV{date}|affdate{'Y-m-d'})}
84                        {statut=publie}
85                        >
86                        <BOUCLE_DernierEvenementArticle(ARTICLES){id_article}>
87                                <div class="content-actus agenda #EDIT{titre}">
88                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
89                                                <header class="flexbox-center-space-between triadeA texte-blanc">
90                                                        <time itemprop="startDate" title="#DATE_DEBUT" datetime="#DATE_DEBUT">
91                                                                <span class="dateNombre"><strong>[(#DATE_DEBUT|affdate{d})]</strong>&nbsp;/[(#DATE_DEBUT|affdate{m})]</span>
92                                                                <span class="dateMois display-block">[(#DATE_DEBUT|affdate{Y})]</span>
93                                                        </time>
94                                                        [<img src="(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{180,95}|extraire_attribut{src})" alt="" width="180" height="95" />]
95                                                </header>
96                                                <div class="h2"><span class="titre-actus">[ (#_DernierEvenementArticle:TITRE|!={#_AgendaDerniersAjouts:TITRE}|?{#TITRE[&nbsp;: (#_AgendaDerniersAjouts:TITRE)],#TITRE})]</span>
97                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
98                                        </a>
99                                </div>
100                        </BOUCLE_DernierEvenementArticle>
101                        [(#COMPTEUR_BOUCLE|alterner{'','</div><div class="grid-item">'})]
102                        </BOUCLE_AgendaDerniersAjouts>
103                        </div>
104                        </B_AgendaDerniersAjouts>
105                        <BOUCLE_Secteurs_Exclus(RUBRIQUES){titre_mot=SecteurPasDansQuoiDeNeuf}><BOUCLE_Articles_Secteurs_Exclus(ARTICLES){id_secteur}{doublons} /></BOUCLE_Secteurs_Exclus>
106                        <BOUCLE_Rubriques_Exclues(RUBRIQUES){titre_mot=PasDansQuoiDeNeuf}><BOUCLE_Articles_Exclus(ARTICLES){id_rubrique}{doublons}{lang} /></BOUCLE_Rubriques_Exclues>
107                        <BOUCLE_exclus(ARTICLES){titre_mot=PasDansQuoiDeNeuf}{doublons} />
108                        <BOUCLE_articles_QuoideNeuf(ARTICLES) {!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_quoideneuf,5})}{doublons}{lang}>
109                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,340})]})]})]
110                        [(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
111                        [(#SET{hauteur,[(#GET{logo}|hauteur|sinon{1})]})]
112                        [(#SET{ratio,[(#GET{largeur}|div{#GET{hauteur}})]})]
113                        #SET{facteur,''}#SET{largeur,308}
114                        [(#GET{ratio}|>{1.8764}|?{#SET{facteur,2}#SET{largeur,638}})]
115                        [(#GET{ratio}|>{2.8088}|?{#SET{facteur,3}#SET{largeur,955}})]
116                        <div class="grid-item[ grid-item-x(#GET{facteur})]">
117                                <div class="content-actus quoideneuf #EDIT{titre}">
118                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
119                                                [<img src="(#GET{logo}|image_focus{#GET{largeur},340}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="340" />]
120                                                <div class="h2"><span class="titre-actus">#TITRE</span>
121                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
122                                        </a>
123                                </div>
124                        </div>
125                        </BOUCLE_articles_QuoideNeuf>
126                </div>
127        </div>
128        <div class="text-center avec-margin-top avec-margin-bottom">
129                <a class="button texte-blanc triadeA" href="#URL_PAGE{antichrono}" title="Consulter les atualités">Consulter toutes les actualités</a>
130        </div>
131</div>
132<!-- fin ACTUS -->
133
134<B_DessousBreves>
135<!-- PROJETS -->
136<div id="lesprojets" class="zone-projets">
137        <header class="titre-sommaire">
138                <h1>Les projets</h1>
139        </header>
140        <div id="projets" class="avec-margin-top">
141                <BOUCLE_DessousBreves(RUBRIQUES){titre_mot = DessousBreves }{par num titre}>
142                <div class="projet idprojet#COMPTEUR_BOUCLE #EDIT{titre}">
143                        <div class="content-projets">
144                                <a href="#URL_RUBRIQUE"[ title="(#DESCRIPTIF|attribut_html)"]>
145                                        <h2>#TITRE</h2>
146                                        <div class="suite">
147                                                <span class="icon icon-arrow-right2">&#10140;</span>
148                                        </div>
149                                </a>
150                        </div>
151                </div>
152                </BOUCLE_DessousBreves>
153        </div>
154        <div class="clearfix"></div>
155</div>
156<!-- fin PROJETS -->
157</B_DessousBreves>
158
159<!-- PRATIQUE -->
160<div id="pratique" class="zone-pratique">
161        <BOUCLE_GroupeBlocsDefilants(RUBRIQUES){titre_mot=Goodies}{par num titre}>
162        <B_BlocsDefilants>
163        <header class="titre-sommaire">
164                <h1>#TITRE</h1>
165        </header>
166        <div role="region" aria-label="[(#TITRE|attribut_html)]">
167                <div class="slider-pratique">
168                        <BOUCLE_BlocsDefilants(ARTICLES){id_rubrique}{par num titre}{lang}>
169                        <div class="content-pratique #EDIT{titre}">
170                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
171                                        <img src="[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{280,190}|extraire_attribut{src})]" alt="" />
172                                        <div class="h2"><span class="titre-pratique">#TITRE</span>
173                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
174                                </a>
175                        </div>
176                        </BOUCLE_BlocsDefilants>
177                </div>
178        </div>
179        </B_BlocsDefilants>
180        </BOUCLE_GroupeBlocsDefilants>
181</div>
182<!-- fin PRATIQUE -->
183
184</div><!-- communiquant_content --></main>
185
186[<script src="(#CHEMIN{javascript/masonry.pkgd.min.js})" type="text/javascript"></script>]
187[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
188<script type="text/javascript">
189        // slider Slick
190        $(document).ready(function(){
191                $('.slider-slick').slick({
192                  autoplay: true,
193                  pauseOnHover: true,
194                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
195                  fade: true,
196                  cssEase: 'linear',
197                  arrows: false,
198                  dots: true,
199                  centerMode: true,
200                  focusOnSelect: true
201                });
202                $('.slider-pratique').slick({
203                  dots: false,
204                  slidesToShow: 7,
205                  slidesToScroll: 3,
206                  infinite: true,
207                  variableWidth: true
208                });
209        });
210        // external js: masonry.pkgd.js, imagesloaded.pkgd.js
211        // init Masonry after all images have loaded
212        var $grid = $('.grid').imagesLoaded( function() {
213          $grid.masonry({
214                itemSelector: '.grid-item',
215                gutter: 20,
216                [(#REM) cf http://masonry.desandro.com/options.html
217                                Largeur calculée à partir de la largeur de la page, moins 5×20 (les marges), 
218                                le tout divisé par  4 (le nombre de petits blocs maximum)
219                ]
220                columnWidth: [(#GET{LargeurContaineur}|moins{100}|div{4})]
221          });
222        });
223</script>
224
225#FILTRE{mini_html}
Note: See TracBrowser for help on using the repository browser.