premier import (96a92d7d) · Validations · spip-contrib-extensions / lazysizes

.gitattributes

+1 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		* text=auto !eol
		images/loader.gif -text

README.md

0 → 100644

+15 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		# LazySizes pour spip

		https://github.com/aFarkas/lazysizes

		Intégration pour spip du script lazysize pour spip.

		Permet de déférer le téléchargement de ressources de manière a ce que l'utilisateur
		ne charge que ce qui est visible dans la fenetre de navigation.



		- [X] Inclure les plugins lazysize depuis un panneau de config ou un define
		puis les charger dans insert_head
		- [] Ajouter via define ou config les options de configuration et si formulaire de config export ie_config()
		- [] surcharger les modèles media, interressant a "lazyloader"
		No newline at end of file

css/lazysizes.css

0 → 100644

+38 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		.lazyload {
		opacity: 0;
		transition: opacity 0.2s 0.2s;
		}

		.lazyloading {
		opacity: 1;
		background: #f7f7f7 url(../images/loader.gif) no-repeat center;
		/min-height: 60px;/
		}


		.lazyloaded {
		opacity: 1;
		/transition: 300ms opacity;/
		}



		.ratio-container {
		position: relative;
		}
		.ratio-container:after {
		content:'';
		display: block;
		height: 0;
		width: 100%;
		/* 16:9 = 56.25% = calc(9 / 16 * 100%) */
		padding-bottom: 50%;
		content:"";
		}
		.ratio-container > * {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
		No newline at end of file

demo/gallerie.html

0 → 100644

+97 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		<!DOCTYPE html>
		<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
		<title>Démo LazySize</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		#INSERT_HEAD_CSS
		#INSERT_HEAD
		<style>
		.media {
		width: 100%;
		clear: both;
		}

		.blur-up {
		-webkit-filter: blur(5px);
		filter: blur(5px);
		transition: filter 400ms, -webkit-filter 400ms;
		}

		.blur-up.lazyloaded {
		-webkit-filter: blur(0);
		filter: blur(0);
		}

		.fade-box .lazyload,
		.fade-box .lazyloading {
		opacity: 0.5;
		transition: opacity 400ms;
		}

		.fade-box img.lazyloaded {
		opacity: 1;
		}
		</style>
		</head>
		<body>
		<h1>Demo LazySize</h1>


		[(#REM)<!--

		Markup standard : avec loader.gif et transition sur l'opactité
		<img data-src="#FICHIER" width="#LARGEUR" height="#HAUTEUR" class="lazyload" alt="#TITRE">



		Markup utilisant la technique lqip Low Quality Image Placeholder
		A noter que le chargement des images présentes dans le viewport ne commence que quand toutes celles de la page sont chargées
		https://github.com/aFarkas/lazysizes#lqipblurry-image-placeholderblur-up-image-technique

		<img src="[(#FICHIER\|image_reduire{48,0}\|extraire_attribut{src})]"
		data-src="#FICHIER" width="#LARGEUR" height="#HAUTEUR"
		class="lazyload blur-up" alt="#TITRE">


		<div class="ratio-box fade-box">
		<img src="lqip-src.jpg" />
		<img data-src="image.jpg" class="lazyload" />
		</div>

		Modern transparent src-set pattern
		https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern

		Combine l'attribut normal `src` avec en `srcset` une image de remplacement transparente ou basse résolution
		accompagné d'un attribut `data-srcset`.
		Ainsi un navigateur moderne utilisera le lazyloading sans utiliser l'attribut src
		tandis que les autres navigateur utiliserons l'attribut src d'origine sans lazyload

		A noter qu'il est préférable que la première image du `data-srcset` soit celle du `src


		```html
		<img
		src="image3.jpg"
		srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
		data-srcset="image3.jpg 600w,
		image1.jpg 220w,
		image2.jpg 300w,
		image4.jpg 900w"
		data-sizes="auto"
		class="lazyload" />
		```



		-->]

		<BOUCLE_listDocs(DOCUMENTS){tout}{extension==jpg\|png\|gif}>
		<div class="media fade-box">
		<img src="[(#FICHIER\|image_reduire{48,0}\|extraire_attribut{src})]"
		data-src="#FICHIER" width="#LARGEUR" height="#HAUTEUR"
		class="lazyload" alt="#TITRE"
		itemprop="image" >
		</div>
		</BOUCLE_listDocs>
		</body>
		</html>

formulaires/configurer_lazysizes_addons.html

0 → 100644

+27 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		<div class="formulaire_spip formulaire_configurer formulaire_configurer_lazysizes_addons">
		[<p class='reponse_formulaire reponse_formulaire_erreur'>(#ENV*{message_erreur})</p>]
		[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
		<form method="post" action="#ENV{action}"><div>
		#ACTION_FORMULAIRE{#ENV{action}}
		<fieldset>
		<legend>LazySize Addons</legend>
		<p class="explication">Addons/plugins LazySize</p>
		<div class="editer-groupe">
		<div class="editer editer_lazysizes_addons">
		[(#SET{list_addons, #VAL\|lazysizes_addons })]
		<BOUCLE_listLazyAddons(DATA){source table, #GET{list_addons}}>
		<div class="choix">
		<input type='checkbox' class="checkbox" name='#CLE' value='on' id='#CLE'[ (#ENV{#CLE}\|oui)checked="checked")] />
		<label for='#CLE'>#CLE</label>
		</div>
		</BOUCLE_listLazyAddons>
		</div>
		</div>
		</fieldset>

		<input type="hidden" name="_meta_casier" value="lazysizes/addons" />
		<p class="boutons">
		<input type="submit" name="_cfg_ok" class="submit" value="<:bouton_enregistrer:>" />
		</p>
		</div></form>
		</div>