Skip to content

Picture Element Lazyload

Jump to bottom
Alexandre Sadowski edited this page Sep 1, 2021 · 11 revisions

Description

//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>

1 - Fichiers de base

Mise en place des principes généraux

https://github.com/asadowski10/advanced-responsive-images/wiki/Principe-g%C3%A9n%C3%A9ral

Fichier default-picture.tpl

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

Fichier default-picture-caption.tpl

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

2 - Fichier pour une location

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=='
Clone this wiki locally