Afficher une image

Une class « Media » existe afin de facilité l’affichage des medias.
Il est important de passer par cette classe afin que celui-ci soit affiché de façon optimal.
Cette classe permet la gestion automatique de l’attribut alt, la gestion du crédit photo, l’affichage dans une bonne sémantique, la prise en compte des formats responsive (srcset), ainsi que l’optimisation, le redimensionnement, le lazyload, voir l’import du media au sein du serveur.

La gestion d’une image « interne » via le champ ACF ImageOptim et externe diffère.

La gestion d’une image provenant d’ImageOptim :

Toute les photos issues du back office provienne d’ImageOptim. Il permet la création de miniature, de cadrage, adapté au besoin.

Les méthodes :

  • setLazy : Chargement en lazyload
  • setResize : Redimensionne la photo, et permet également de la rendre flou
  • setFigureAttr : Permet d’ajouter des attributs html à la balise <figure>
  • setImgAttr : Permet d’ajouter des attributes html à la balise <img>
  • display : Affiche la photo

Toute les méthodes présentes dans l’exemple ci-dessous dépende de l’image recouper dans la page et non de l’image initiale.

 

PHP
<?php

// Le get_field ne se retrouve jamais dans une vue, il est ici pour illustré uniquement. Dans une vue, la variable $monimage serait déjà là.
$monimage = get_field('image');

// Création d'un objet media à partir de la donnée
$media = new Media($monimage);

// Définir que l'image ne doit pas être affiché par défaut, elle sera chargé uniquement quand elle sera visible à l'écran
$media->setLazy();

// Définir une nouvelle taille à la photo, à partir de la taille présente dans mon image, si le crop de base est inférieurs, la qualité sera dégradé.
$media->setResize(300,200);

// Définir une nouvelle taille à la photo sans perdre de donnée, la hauteur sera automatique, fonctionne également avec la largeur.
$media->setResize(300,0);

// Créer une version flou de image, 50 étant le nombre de passe de flou, plus ce chiffre est élevé, plus l'image sera flou
$media->setResize(300,200,50);

// Ajout d'attribut
$media->setFigureAttr(array('class'=>'fit-cover'));
$media->setImgAttr(array('class'=>'test'));

// Affichage de l'image final
$media->display();

// On peut également faire tout cela en une ligne
?>
<div><?php (new Media($monimage))->setResize(300,500)->setLazy()->setFigureAttr(array('class'=>'fit-cover'))->display(); ?></div>

La gestion d’une image externe :

Une photo externe, Instagram, SIT, ou d’autres sources peut être affiché dans le site. Afin d’optimiser au maximum l’expérience utilisateur, la photo sera télécharger au premier affichage par le serveur, recoupé à la taille souhaité, et également passera dans un logiciel d’optimisation photo afin de réduire au maximum son poids (une dégradation très légère peut être ressenti, mais cela reste vraiment léger).

L’utilisation se fait comme pour une image classique, sauf qu’on va directement donner une url à la classe, et utilise isExternal() pour définir la taille de la photo souhaité.

Les méthodes :

  • isExternal : Indique qu’il s’agit d’une image externe, et indique la taille souhaité
  • setLazy : Chargement en lazyload
  • setFigureAttr : Permet d’ajouter des attributs html à la balise <figure>
  • setImgAttr : Permet d’ajouter des attributes html à la balise <img>
  • display : Affiche la photo

Toute les méthodes présentes dans l’exemple ci-dessous dépende de l’image initiale.

PHP
<?php
// Création d'un objet media à partir de la donnée
$media = new Media('https://url.de.ma.photo.jpeg');

// Indique qu'il s'agit d'une image externe à importé, au format 500px de large, en conservant ses proportions
$media->isExternal(500,0);

// Indique qu'il s'agit d'une image externe à importé, au format 500x500 px, la photo sera recoupé de façon centré
$media->isExternal(500,500);

// Définir que l'image ne doit pas être affiché par défaut, elle sera chargé uniquement quand elle sera visible à l'écran
$media->setLazy();

// Ajout d'attribut
$media->setFigureAttr(array('class'=>'fit-cover'));
$media->setImgAttr(array('class'=>'test'));

// Affichage de l'image final
$media->display();

// On peut également faire tout cela en une ligne
?>
<div><?php (new Media($monimage))->isExternal(300,500)->setLazy()->setFigureAttr(array('class'=>'fit-cover'))->display(); ?></div>