Changeset 114705 in spip-zone


Ignore:
Timestamp:
Apr 2, 2019, 9:56:59 AM (3 months ago)
Author:
arnaud.berard@…
Message:

maj des demo et test

Location:
_plugins_/lazysizes/trunk/demo
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/lazysizes/trunk/demo/lazy_base.html

    r104325 r114705  
    2121<body>
    2222        <h1>Demo LazySize : base</h1>
    23 [(#REM)<!-- 
     23[(#REM)<!--
    2424
    25 Markup standard : avec loader.gif et transition sur l'opactité 
     25Markup standard : avec loader.gif et transition sur l'opactité
    2626<img data-src="#FICHIER" width="#LARGEUR" height="#HAUTEUR" class="lazyload" alt="#TITRE">
    27        
     27
    2828-->]
    2929<BOUCLE_listDocs(DOCUMENTS){tout}{0,100}{extension==jpg|png|gif}>
    3030<div class="media">
    31         <img    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     31        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    3232                        data-src="#FICHIER"
    3333                        width="#LARGEUR"
     
    3535                        class="lazyload" alt="[(#TITRE|attribut_html)]"
    3636                        itemprop="image" >
    37 </div> 
     37</div>
    3838</BOUCLE_listDocs>
    3939</body>
  • _plugins_/lazysizes/trunk/demo/lazy_bgset.html

    r112239 r114705  
    2828[(#REM)<!--
    2929
     30Utilisation de lazysizes, pour des backgrounds responsives
     31
     32Addons:
     33- bgset
     34- bgset + custom-medias
     35
    3036Documentation
    3137https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset
     
    3440-->]
    3541<BOUCLE_listDocs(DOCUMENTS){tout}{0,1}{extension==jpg}{id_document ?}>
     42[(#SET{cover_small,#FICHIER|image_reduire{350,0}|extraire_attribut{src}|url_absolue})]
     43[(#SET{cover_medium,#FICHIER|image_reduire{800,0}|extraire_attribut{src}|url_absolue})]
     44[(#SET{cover_large,#FICHIER|image_reduire{1200,0}|extraire_attribut{src}|url_absolue})]
    3645<div class="media">
    37         [(#SET{cover_small,#FICHIER|image_reduire{350,0}|extraire_attribut{src}|url_absolue})]
    38         [(#SET{cover_medium,#FICHIER|image_reduire{800,0}|extraire_attribut{src}|url_absolue})]
    39         [(#SET{cover_large,#FICHIER|image_reduire{1200,0}|extraire_attribut{src}|url_absolue})]
     46        [(#REM)<!-- bgset  -->]
     47        <div class="box cover ratio-container lazyload"
     48                                data-bgset="[(#GET{cover_small})] 320w,[(#GET{cover_medium})] 700w,[(#GET{cover_large})]"></div>
     49</div>
     50<div class="media">
     51        [(#REM)<!-- bgset + custom media -->]
    4052        <div class="box cover ratio-container lazyload"
    4153                                data-sizes="auto"
    4254                                data-bgset="[(#GET{cover_small})]  [--small] | [(#GET{cover_medium})] [--medium] | [(#GET{cover_large})]"></div>
    4355</div>
    44 <div class="media">
    45         [(#SET{cover_small,#FICHIER|image_reduire{350,0}|extraire_attribut{src}|url_absolue})]
    46         [(#SET{cover_medium,#FICHIER|image_reduire{800,0}|extraire_attribut{src}|url_absolue})]
    47         [(#SET{cover_large,#FICHIER|image_reduire{1200,0}|extraire_attribut{src}|url_absolue})]
    48         <div class="box cover ratio-container lazyload"
    49                                 data-bgset="[(#GET{cover_small})] 320w,[(#GET{cover_medium})] 700w,[(#GET{cover_large})]"></div>
    50 </div>
    5156</BOUCLE_listDocs>
    5257</body>
  • _plugins_/lazysizes/trunk/demo/lazy_modeles.html

    r105441 r114705  
    2828
    2929
    30 [(#REM)<!-- 
     30[(#REM)<!--
    3131
    3232HTML5 Picture
     
    4040
    4141
    42 Markup picture : avec loader.gif et transition sur l'opactité   
     42Markup picture : avec loader.gif et transition sur l'opactité
    4343Necessite l'activation du plugin lazysizes/respimg dans la config
    4444
     
    4949
    5050
    51 On renseigne la hauteur / largeur de l'image  ainsi que le ratio pour 
     51On renseigne la hauteur / largeur de l'image  ainsi que le ratio pour
    5252préserver le layout le temps du chargement
    5353
     
    5757
    5858-->]
    59 <h2>le modèle <code>picture</code></h2>
    60 <BOUCLE_listDocs(DOCUMENTS){tout}{0,10}{extension==jpg|png|gif}>
    61 [(#INCLURE{fond=modeles/picture}{id_document}{class=media}{env})]
    62 </BOUCLE_listDocs>
     59
     60[(#CONFIG{lazysizes/custom_media}|array2table)]
     61<main role="main" itemscope itemtype="http://schema.org/Article">
     62<article class="article" itemprop="mainEntityOfPage">
     63        <h2 itemprop="headline">le modèle <code>picture</code></h2>
     64        <BOUCLE_listDocs(DOCUMENTS){id_document ?}{tout}{0,10}{extension==jpg|png|gif}>
     65        [(#INCLURE{fond=modeles/picture}{id_document}{class=media}{env})]
     66        </BOUCLE_listDocs>
     67</article>
     68
     69
     70</main>
    6371</body>
    6472</html>
Note: See TracChangeset for help on using the changeset viewer.