-
Notifications
You must be signed in to change notification settings - Fork 2
Picture Element Lazyload
//TODO Description du picture element lazyload
<noscript>
<!-- data-location="entry-article" -->
<img src="https://ndd.com/wp-content/uploads/sites/2/cache/uploads/2018/03/image.jpg" class="lazyload article__img" alt="" />
</noscript>
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source data-srcset="https://ndd.com/wp-content/uploads/sites/2/cache/uploads/2018/03/image.jpg, https://ndd.com/wp-content/uploads/sites/2/cache/uploads/2018/03/imagex2.jpg 2x" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
<!--[if IE 9]></video><![endif]-->
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload article__img" alt=""/>
</picture>
https://github.com/asadowski10/advanced-responsive-images/wiki/Principe-g%C3%A9n%C3%A9ral
Au même niveau que le dossier conf-img, il faudra créer un dossier /tpl/ dans lequel vous allez y insérer vos différents templates ci-dessous. Le premier est le template générique default-picture.tpl qui va définir la structure générale de vos images. Il est important au bon fonctionnement de ce mode.
<noscript>
%%data-location%%
<img src="%%default_img%%" %%attributes%% />
</noscript>
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
%%sources%%
<!--[if IE 9]></video><![endif]-->
<img %%srcgif%% %%attributes%%/>
</picture>
Variables :
- %%data-location%% : applique un commentaire html pour donner l'information sur la location donnée pour l'image
- %%default_img%% : WordPress génère une image dont la taille est définie par l'attribut "img_base" pour la location donnée en mode NO JS
- %%attributes%% : génère les balises alt et class de l'image
- %%srcgif%% : applique le markup src suivant 'src="' . ARI_PIXEL . '"' // ARI_PIXEL est une constante correspondant à un pixel transparent 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
- %%sources%% : remplace le contenu de la location définie ci-dessous
Le fichier default-picture-caption.tpl permet de charger un markup différent lorsque vous souhaitez afficher une image avec une légende.
<figure>
<div class="placeholder-media">
<noscript>
%%data-location%%
<img src="%%default_img%%" %%attributes%% />
</noscript>
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
%%sources%%
<!--[if IE 9]></video><![endif]-->
<img %%srcgif%% %%attributes%%/>
</picture>
</div>
<figcaption class="is-style-p-legend">%%caption%%</figcaption>
</figure>
Variables :
- %%data-location%% : applique un commentaire html pour donner l'information sur la location donnée pour l'image
- %%default_img%% : WordPress génère une image dont la taille est définie par l'attribut "img_base" pour la location donnée en mode NO JS
- %%attributes%% : génère les balises alt et class de l'image
- %%srcgif%% : applique le markup src suivant 'src="' . ARI_PIXEL . '"' // ARI_PIXEL est une constante correspondant à un pixel transparent 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
- %%sources%% : remplace le contenu de la location définie ci-dessous
- %%caption%% : récupère et affiche la légende contribuée sur l'image
Dans l'exemple tout en haut, nous avons nommé notre location "entry-article", de ce fait, il faudra créer un fichier entry-article.tpl au même niveau que le fichier default-picture.tpl afin d'y renseigner vos sources en fonction de vos breakpoints.
<source data-srcset="%%img-965-545%%, %%img-1930-1090%% 2x" %%srcset%% />
La variable %%img-965-545%% correspond à celle replie dans votre fichier locations.json mais également va vérifier que la taille a été déclarée dans image-sizes.json. Si tout est bon alors WordPress viendra générer l'image à la taille demandée et nous pourrons remplacer la variable par l'URL voulue. Il en va de même avec la variable %%img-1930-1090%%
La variable %%srcset%% sera remplacée par le markup HTML suivant :
'srcset="' . ARI_PIXEL . '"' // ARI_PIXEL est une constante correspondant à un pixel transparent 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='