Pods tips : Lazy load avec WP Rocket

On ne présente plus le plugin de cache WP Rocket (enfin si ne le connaissait pas, c’est par ici)…

Il y a quelques temps, j’ai eu des soucis avec Pods et le lazy load de WP Rocket, mais, avec le concours des support des 2 plugins, l’explication et la résolution du problème a vite été trouvé 🙂

Comme je l’ai déjà dit, avec Pods, quelques fois « on sort des clous » de WordPress, ce n’est pas propre à ce plugin, cela peut être le cas dès qu’on code en PHP dans un thème

WP Rocket, comme tout bon plugin, utilise des « hook » (des fonctions qui se greffent à des fonctions de WordPress), en l’occurrence the_post_thumbnail(), mais en dehors d’un post, cette fonction ne donne aucun résultat.

La solution est alors, de faire le lazy load « à la main »:

<?php $img = wp_get_attachment_image_src( $pods->field( 'photo.ID' ), 'full' ); ?>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
data-lazy-original="<?php echo $img[0];?>" 
alt="<?php echo $pods->field( 'name' );?>" 
width=<?php echo $img[1];?> height=<?php echo $img[2];?>>

« photo » est le nom de votre champs image, « full » est la taille originale, pour plus de détails sur la fonction wp_get_attachment_image_src.

A noter que si vous utiliser des templates ou un champs WYSIWYG, Pods utilise alors la fameuse fonction the_post_thumbnail() , du coup, plus aucun problème de lazy load 🙂

Laisser un commentaire