source: spip-zone/_plugins_/lazysizes/trunk

fix sur la css .lazyloading

version + carnet

modèle image avec src transparent qui chope le rien.gif de spip et l'url encode
passage si on veut du alt en param sinon titre
forcer une url avec le param lien

+ modif sur le width/height calacul depuis #LOGO_DOCUMENT plutot que #LARGEUR

trim plutot par acquis de conscience

doc et explications des extensions déjà testées
styles du formulaire sur la page de config

on ne laisse que ce qui a été testé et utilisé

séparer les css fonctionelles des utilitaires

maj de la lib en dernière version 4.1.7

correction d'un warning a l'install quand la configuration n'était pas encore initialisé.

Ajout d'un fichier d'administration

installation des metas :
par defaut les css sont inssérés et deux rêgles custom-media sont déclarées --small,--medium

suppression des metas a la désinstallation

Un peut de doc dans le readme

+z

et comme y'a paquet ben y'a +z

Ajout d'une configuration permettant de gérer des rêgles media-queries pour lazysizes

Chaque rêgle est définie comme habituellement dans les saisies de array

--small|(max-width: 480px)
--medium|(max-width: 800px)

utilisable ensuite comme des raccourcis dans le markup

ex avec l'addon bgset

`
<div class="box cover ratio-container lazyload"

data-sizes="auto"
data-bgset="[(#GET{cover_small})] [--small] | [(#GET{cover_medium})] [--medium] | [(#GET{cover_large})]"></div>

`

extrait de la doc :
L'option 'customMedia' est une carte d'alias pour différentes requêtes media-queries.

Cette option peut être utilisée pour séparer / centraliser l'implémentation de plusieurs media-queires spécifiques (présentation) de l'attribut source [media] (contenu / structure) en créant des requêtes multimédia étiquetées.

ces rêgles sont aussi utilisables avec d'autres addons, et notamment comme le souligne la doc avec picture>source[media]

ou le addon customMedia permettant d'utiliser les mêmes raccourcis depuis css/scss (mais c'est pour après…)

up de version en suivant celle de la lib donc 4.1.4.0

trad de la doc, expliquer ce que que font les addons dans le formulaire de config (à défaut de doc, parce que mm moi je m'en rapelle plus sinon)

ajout de blur-up a la liste des addons et produire_fond plutot que generer_url …

Correctif pour l"utilisation dans des newsletters

• ajout de la balise noscript au modèle doc
• ajout d'un filtre unlazy permettant de rétablir le src, width, height, alt des <img> ayant un attribut data-src

borne spip 3.2 , ajout du target:_blank a safehtml ;-) pour le pied de page de la partie privé

• mise a jour de la lib et des addons en 4.0.0rc3 - nouveau addon artdirect
• correction sur la fonction d'insertion des js (qui petait l'espace prive en doublan le $flux )

v4.0.0.11
correctif pour la prévisualisation dans l'espace privé

• necessite htmlpurifier
• surcharge de la fonction safehtml_dist
• prise en charge des elements html5 dans la config de htmlpurifier figure,figcaption,…

cf: ​https://github.com/lukusw/php-htmlpurfier-html5/blob/master/htmlpurifier_html5.php

• le modele picture tiens compte des definitions d'attributs configurable

les prennent en compte la configuration des attributs et classes necessaires au fonctionnement

• on charge les js en public et privé pour que les modeles fonctionne des deux cotés

on supprime les test espace_prive inutiles

Pas de lazyloading dans l'espace privé

• pas la peine d'inssérer le js dans le privé, les sécurité de la previsu empèche le script de bosser en supprimant les attributs data-src
• donc dans les modèle on test si on est dans le privé et on affiche le src du fichier

on peut passer au modele un chemin vers un fichier OU une id_document

[(#INCLURE{fond=modeles/picture}{id_document}{class=media}{env})]

[(#INCLURE{fond=modeles/picture}{fichier=#CHEMIN{mon_fichier_local.jpg}}{class=media}{env})]

• ajout d'une page pour documenter les modèles
• ajout du modele picture

• css utilitaires pour préserver le ratio des medias en lazyload
• doc et exemple sur la page demo/lazy_respimg
• mise en application de la technique du ratio intrinseque calculé dans le markup

renomage

• ajout du modele image que l'on reprends a Figure tant qu'a faire et on adapte le markup
• img aussi passe en figure

Ajout des css pour le cas de l'utilisation du no-js pattern

pas de surcharges de modèles media pour le moment, vu qu'on issère pas les script coté privé

styles inutiles sur cette démo/test

icones et démo markup basique

ajout de la config attribut src

• mise en place de la config des options de personalisation

png transparent !important
^{+ img optim}

ajout de la pipeline insert_head_css prenant en compte la config options/css

• psr

Un warning PHP en moins

Pour expliquer un peut :

# LazySizes? pour spip

Intégration pour spip du script lazysize.

Outil / lib de lazyloading extensible via un système de plugin/addons.

Permet notamment de déférer le téléchargement de ressources (images, iframes, vidéos, ..) de manière a ce que l'utilisateur
ne charge que ce qui est visible dans la fenetre de navigation, ou quand on souhaite sur un autre évenement via un sytème de hooks.

et bien plus encore via les addons proposés ​https://github.com/aFarkas/lazysizes
notamment polyfill pour picture/src-set

background responsives, …

​https://github.com/aFarkas/lazysizes#available-plugins-in-this-repo

voir le README.md, le Paquet.xml et la page demo/gallerie pour tester

premier import