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

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

Mode Cognac, vidéo dans le carrousel : possibilité de mettre la vidéo comme document joint (si le plugin oEmbed est actif).
Dans ce cas, l'url de la vidéo sur Internet est suffisante.

+ jouer toutes les vidéos dans le carrousel, pas seulement la première.
File size: 14.5 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<main id="main" role="main"><div id="cognac_content">
7<a id="letexte"></a>
8
9<BOUCLE_Edito(ARTICLES) {titre_mot=EDITO}{!par date}{0,1}{lang}{doublons}>
10#SET{article_url,#ARTICLE_URL}
11<!-- SLIDER -->
12<div id="diaporama" class="zone-slider">
13        <header>
14                <h1 class="hide">#TITRE</h1>
15        </header>
16        <div class="slider-slick">
17                <BOUCLE_Slider(DOCUMENTS){id_article}{mode=document}{par num titre}{!par date}{media IN image,video}{vu=non}>
18                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
19                        <div class="slider-diapo-imgfull">
20                                [(#MEDIA|=={image}|oui)
21                                <a href="#GET{article_url}"[ title="(#_EDITO:DESCRIPTIF|attribut_html)"]>
22                                        <img src="[(#FICHIER|copie_locale|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="" />
23                                </a>]
24                                [(#MEDIA|=={video}|oui)
25                                <a href="#GET{article_url}"[ title="(#_EDITO:DESCRIPTIF|attribut_html)"]>
26                                        [(#MIME_TYPE|=={text/oembed}|non)
27                                        <div style="width: 1920px; height: #CONFIG{soyezcreateurs/hauteur_slider,580}px;">
28                                                <video autoplay loop muted preload="true" class="autoplay" style="min-width: 100%; height: auto; top: -50%; position: absolute;">
29                                                        <source src="#FICHIER" type="[(#EXTENSION|in_array{#LISTE{mp4,webm,ogv}}|?{[(#MIME_TYPE|replace{application/,video/})],#MIME_TYPE})]"/>
30                                                </video>
31                                        </div>]
32                                        [(#MIME_TYPE|=={text/oembed}|oui)
33                                        <div style="position: relative; padding-bottom: [(#CONFIG{soyezcreateurs/hauteur_slider,580}|div{1920}|mult{100})%]">
34                                                <div class="mbYTP_wrapper" id="wrapper_mbYTP_bgndVideo" style="position: absolute; z-index: -1; min-width: 100%; min-height: 100%; left: 0; top: 0; overflow: hidden; opacity: 1; -webkit-backface-visibility: hidden;">
35                                                        <iframe id="mbYTP_bgndVideo" class="playerBox" style="position: absolute; z-index: -1; width: 2380.8px; height: 1080px; top: 0px; left: 0px; overflow: hidden; opacity: 1; margin-top: -199.5px; margin-left: -230.4px;" frameborder="0" allowfullscreen="1" width="[(#INCLURE{#FICHIER}|extraire_attribut{width})]" height="[(#INCLURE{#FICHIER}|extraire_attribut{height})]" src="[(#INCLURE{#FICHIER}|extraire_attribut{src})]&amp;autoplay=1&amp;loop=1&amp;modestbranding=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;version=3&amp;playerapiid=mbYTP_bgndVideo&amp;allowfullscreen=true&amp;wmode=transparent&amp;iv_load_policy=3&amp;html5=1"></iframe>
36                                                </div>
37                                        </div>]
38                                </a>]
39                        </div>
40                </div>
41                </BOUCLE_Slider>
42                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
43                        <div class="slider-diapo-imgfull">
44                                <a href="#GET{article_url}"[ title="(#_EDITO:DESCRIPTIF|attribut_html)"]>
45                                        <img src="[(#CHEMIN{images/placeholder.jpg}|image_focus{1920,#CONFIG{soyezcreateurs/hauteur_slider,580}}|extraire_attribut{src})]" alt="" />
46                                </a>
47                        </div>
48                </div>
49                <//B_Slider>
50        </div>
51        <div id="liens-diaporama">
52                <ul>
53                        <li class="#EDIT{titre}">
54                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
55                                        <span class="#EDIT{titre}">#TITRE</span>
56                                        <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
57                                </a>
58                        </li>
59                </ul>
60        </div>
61</div>
62<!-- fin SLIDER -->
63</BOUCLE_Edito>
64
65<BOUCLE_ZoomSur(ARTICLES) {titre_mot=ZoomSur}{!par date}{0,(#CONFIG{soyezcreateurs/nombres_zoomsur,1})}{lang}{doublons}>
66
67<!-- ZoomSur -->
68<div id="zoomsur" class="zone-zoomsur">
69        <header class="titre-sommaire">
70                <h1 class="#EDIT{titre}">[(#TITRE)]</h1>
71        </header>
72        [<img class="zoomsurlogo" src="(#LOGO_ARTICLE|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},200}|extraire_attribut{src}|embarque_fichier)" width="[(#LOGO_ARTICLE|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},200}|largeur)]" height="[(#LOGO_ARTICLE|image_focus{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},200}|hauteur)]" alt="" />]
73        <div id="zoomsurtexte">
74                <div class="infos">[(#INCLURE{fond=noisettes/liste_auteurs,id_article,virgule=1,nodiv=1})][(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})]</div>
75                <div>
76                        [<div class="[(#CHAPO*|?{#EDIT{chapo},#EDIT{descriptif}}) ]chapo">(#CHAPO|image_reduire{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},0}|sinon{#DESCRIPTIF})</div>]
77                        [<div class="#EDIT{texte} entry-content">(#TEXTE|image_reduire{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},0})</div>]
78                        [<div class="#EDIT{ps} ps">(#PS|image_reduire{#CONFIG{soyezcreateurs_layout/largeurconteneur,960},0})</div>]
79                        [<div class="notes">(#NOTES)</div>]
80                        [<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
81                        [(#INCLURE{fond=noisettes/galerie,ajax,id_article,env})]
82                </div>
83        </div>
84</div>
85<!-- fin ZoomSur -->
86</BOUCLE_ZoomSur>
87
88<!-- ACTUS -->
89<div id="actualites" class="zone-actus">
90        <header class="titre-sommaire">
91                <h1><:soyezcreateurs:quoideneuf:></h1>
92        </header>
93        <div class="row" id="masonry" role="region" aria-label="Actualités">
94                <div class="grid">
95                        <div class="grid-sizer"></div>
96                        <div class="gutter-sizer"></div>
97                        <BOUCLE_articles_recentsAlaUne(ARTICLES){lang}{!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_alanune,4})}{doublons}{titre_mot=AlaUne}>
98                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,340})]})]})]
99                        [(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
100                        [(#SET{hauteur,[(#GET{logo}|hauteur|sinon{1})]})]
101                        [(#SET{ratio,[(#GET{largeur}|div{#GET{hauteur}})]})]
102                        #SET{facteur,''}#SET{largeur,308}
103                        [(#GET{ratio}|>{1.8764}|?{#SET{facteur,2}#SET{largeur,638}})]
104                        [(#GET{ratio}|>{2.8088}|?{#SET{facteur,3}#SET{largeur,969}})]
105                        <div class="grid-item[ grid-item-x(#GET{facteur})]">
106                                <div class="content-actus alaune #EDIT{titre}">
107                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
108                                                [<img src="(#GET{logo}|image_focus{#GET{largeur},340}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="340" />]
109                                                <div class="h2"><span class="titre-actus">#TITRE</span>
110                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
111                                        </a>
112                                </div>
113                        </div>
114                        </BOUCLE_articles_recentsAlaUne>
115                        <B_AgendaDerniersAjouts>
116                        <div class="grid-item">
117                        <BOUCLE_AgendaDerniersAjouts(EVENEMENTS)
118                        {branche}
119                        {par date_debut}
120                        {0,(#CONFIG{soyezcreateurs/nombres_agenda,5})}
121                        {date_fin>=(#ENV{date}|affdate{'Y-m-d'})}
122                        {statut=publie}
123                        >
124                        <BOUCLE_DernierEvenementArticle(ARTICLES){id_article}>
125                                <div class="content-actus #EDIT{titre}">
126                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
127                                                [<img src="(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{308,108}|extraire_attribut{src})" alt="" width="308" height="108" />]
128                                                <div class="agenda flexbox-flex">
129                                                        <div class="date[(#DATE_DEBUT|!={#DATE_FIN}|?{' debutfin'})]">
130                                                                <time class="debut ladate" itemprop="startDate" title="#DATE_DEBUT" datetime="#DATE_DEBUT">
131                                                                        <span class="dateNombre"><strong>[(#DATE_DEBUT|affdate{d})]</strong>/[(#DATE_DEBUT|affdate{m})]</span>
132                                                                        <span class="annee display-block">[(#DATE_DEBUT|affdate{Y})]</span>
133                                                                </time>[(#DATE_DEBUT|!={#DATE_FIN}|oui)
134                                                                <time class="fin ladate" itemprop="startDate" title="#DATE_FIN" datetime="#DATE_FIN">
135                                                                        <span class="dateNombre"><strong>[(#DATE_FIN|affdate{d})]</strong>/[(#DATE_FIN|affdate{m})]</span>
136                                                                        <span class="annee display-block">[(#DATE_FIN|affdate{Y})]</span>
137                                                                </time>]
138                                                        </div>
139                                                        <div class="h2"><span class="titre-actus">[ (#_DernierEvenementArticle:TITRE|!={#_AgendaDerniersAjouts:TITRE}|?{#TITRE[&nbsp;: (#_AgendaDerniersAjouts:TITRE)],#TITRE})]</span>
140                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
141                                                </div>
142                                        </a>
143                                </div>
144                        </BOUCLE_DernierEvenementArticle>
145                        [(#COMPTEUR_BOUCLE|!={#TOTAL_BOUCLE}|oui)
146                        [(#COMPTEUR_BOUCLE|alterner{'','</div><div class="grid-item">'})]
147                        ]
148                        </BOUCLE_AgendaDerniersAjouts>
149                        </div>
150                        </B_AgendaDerniersAjouts>
151                        <BOUCLE_Secteurs_Exclus(RUBRIQUES){titre_mot=SecteurPasDansQuoiDeNeuf}><BOUCLE_Articles_Secteurs_Exclus(ARTICLES){id_secteur}{doublons} /></BOUCLE_Secteurs_Exclus>
152                        <BOUCLE_Rubriques_Exclues(RUBRIQUES){titre_mot=PasDansQuoiDeNeuf}><BOUCLE_Articles_Exclus(ARTICLES){id_rubrique}{doublons}{lang} /></BOUCLE_Rubriques_Exclues>
153                        <BOUCLE_exclus(ARTICLES){titre_mot=PasDansQuoiDeNeuf}{doublons} />
154                        <BOUCLE_articles_QuoideNeuf(ARTICLES) {!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_quoideneuf,5})}{doublons}{lang}>
155                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,340})]})]})]
156                        [(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
157                        [(#SET{hauteur,[(#GET{logo}|hauteur|sinon{1})]})]
158                        [(#SET{ratio,[(#GET{largeur}|div{#GET{hauteur}})]})]
159                        #SET{facteur,''}#SET{largeur,308}
160                        [(#GET{ratio}|>{1.8764}|?{#SET{facteur,2}#SET{largeur,638}})]
161                        [(#GET{ratio}|>{2.8088}|?{#SET{facteur,3}#SET{largeur,969}})]
162                        <div class="grid-item[ grid-item-x(#GET{facteur})]">
163                                <div class="content-actus quoideneuf #EDIT{titre}">
164                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
165                                                [<img src="(#GET{logo}|image_focus{#GET{largeur},340}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="340" />]
166                                                <div class="h2"><span class="titre-actus">#TITRE</span>
167                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
168                                        </a>
169                                </div>
170                        </div>
171                        </BOUCLE_articles_QuoideNeuf>
172                </div>
173        </div>
174        <div class="text-center avec-margin-top avec-margin-bottom">
175                <a class="button texte-blanc triadeA" href="#URL_PAGE{antichrono}"><:soyezcreateurs:actualite_toutes:></a>
176        </div>
177</div>
178<!-- fin ACTUS -->
179
180<B_DessousBreves>
181<!-- PROJETS -->
182<div id="lesprojets" class="zone-projets">
183        <header class="titre-sommaire">
184                <h1>Les projets</h1>
185        </header>
186        <div id="projets" class="avec-margin-top">
187                <BOUCLE_DessousBreves(RUBRIQUES){titre_mot = DessousBreves }{par num titre}>
188                <div class="projet idprojet#COMPTEUR_BOUCLE #EDIT{titre}"<BOUCLE_RubriqueColoree(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubrique(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}>[ style="background-color: #(#TEXTE|textebrut);"]</BOUCLE_CouleurRubrique></BOUCLE_RubriqueColoree>>
189                        <div class="content-projets">
190                                <BOUCLE_articles_plusdun(ARTICLES) {id_rubrique} {1,1}{lang}><a href="#URL_RUBRIQUE"[ title="(#_DessousBreves:DESCRIPTIF|attribut_html)"]></BOUCLE_articles_plusdun><BOUCLE_articles_unseul(ARTICLES) {id_rubrique} {0,1}{lang}><a href="#ARTICLE_URL"[ title="(#_DessousBreves:DESCRIPTIF|attribut_html)"]></BOUCLE_articles_unseul><a href="#URL_RUBRIQUE"[ title="(#_DessousBreves:DESCRIPTIF|attribut_html)"]><//B_articles_unseul><//B_articles_plusdun>
191                                        <h2>#TITRE</h2>
192                                        <div class="suite">
193                                                <span class="icon icon-arrow-right2">&#10140;</span>
194                                        </div>
195                                </a>
196                        </div>
197                </div>
198                </BOUCLE_DessousBreves>
199        </div>
200        <div class="clearfix"></div>
201</div>
202<!-- fin PROJETS -->
203</B_DessousBreves>
204
205<!-- PRATIQUE -->
206<div id="pratique" class="zone-pratique">
207        <BOUCLE_GroupeBlocsDefilants(RUBRIQUES){titre_mot=Goodies}{par num titre}>
208        <B_BlocsDefilants>
209        <header class="titre-sommaire">
210                <h1[ title="(#DESCRIPTIF|attribut_html)"]>#TITRE</h1>
211        </header>
212        <div role="region" aria-label="[(#TITRE|attribut_html)]">
213                <div class="slider-pratique">
214                        <BOUCLE_BlocsDefilants(ARTICLES){id_rubrique}{par num titre}{lang}>
215                        <div class="content-pratique #EDIT{titre}">
216                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
217                                        <img src="[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{280,190}|extraire_attribut{src})]" alt="" />
218                                        <div class="h2"><span class="titre-pratique">#TITRE</span>
219                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
220                                </a>
221                        </div>
222                        </BOUCLE_BlocsDefilants>
223                </div>
224        </div>
225        </B_BlocsDefilants>
226        </BOUCLE_GroupeBlocsDefilants>
227</div>
228<!-- fin PRATIQUE -->
229
230[(#PLUGIN{SOCIALTAGS}|oui)<div id="socialtags"></div>]
231
232</div><!-- cognac_content --></main>
233
234[<script src="(#CHEMIN{javascript/packery.pkgd.min.js})" type="text/javascript"></script>]
235[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
236<script type="text/javascript">
237        // slider Slick
238        $(document).ready(function(){
239                $('.slider-slick').slick({
240                  autoplay: true,
241                  pauseOnHover: true,
242                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
243                  fade: true,
244                  cssEase: 'linear',
245                  arrows: false,
246                  dots: true,
247                  centerMode: true,
248                  focusOnSelect: true
249                });
250               
251                // Pour que les éventuelles vidéos soient jouées
252                // Ceci concerne la première vidéo (ou la seule)
253                var vid = $('.slider-slick').find('video');
254                if (vid.length > 0)
255                        $(vid).get(0).play();
256                //  Ceci concerne les autres vidéos
257                $('.slider-slick').on('afterChange', function(event, slick, currentSlide){
258                        var vid = $(slick.$slides[currentSlide]).find('video');
259                        if (vid.length > 0)
260                                $(vid).get(0).play();
261                });
262               
263                $('.slider-pratique').slick({
264                  dots: false,
265                  slidesToShow: [(#GET{LargeurContaineur}|div{304}|intval)],
266                  slidesToScroll: 3,
267                  infinite: true,
268                  variableWidth: true,
269                        responsive: [
270                                {
271                                  breakpoint: [(#GET{LargeurContaineur}|moins{304}|intval)],
272                                  settings: {
273                                        slidesToShow: 2,
274                                        slidesToScroll: 2,
275                                        infinite: true,
276                                        dots: true
277                                  }
278                                },
279                                {
280                                  breakpoint: 640,
281                                  settings: {
282                                        slidesToShow: 1,
283                                        slidesToScroll: 1
284                                  }
285                                }
286                          ]
287                });
288        });
289        // external js: packery.pkgd.js, imagesloaded.pkgd.js
290        // init packery after all images have loaded
291        var $grid = $('.grid').imagesLoaded( function() {
292          $grid.packery({
293                itemSelector: '.grid-item',
294                gutter: '.gutter-sizer',
295                columnWidth: '.grid-sizer',
296                percentPosition: false
297          });
298        });
299</script>
300
301#FILTRE{mini_html}
Note: See TracBrowser for help on using the repository browser.