Utiliser wp_is_mobile pour afficher une miniature plus large sur mobile

Sur WP Channel, nous utilisons 2 tailles d’images à la une pour un affichage optimal : l’une de 768 pixels de large sans limite de hauteur pour le mobile, l’autre de 270 par 190 pour l’affichage dans la grille. Vous noterez que ces deux tailles ne sont pas proportionnelles, je ne peux donc utiliser l’attribut srcset pour gérer une mise à l’échelle. Dès lors, l’astuce consister à utiliser la fonction wp_is_mobile de WordPress qui permet de détecter si l’utilisateur navigue à partir d’un périphérique tactile.

Pour être plus précis, la fonction wp_is_mobile teste l’agent utilisateur pour le mobile, Android, Silk, Kindle, BlackBerry, Opera Mini et OperaMobi. Elle ne prend pas en compte la résolution, la largeur de la fenêtre ou ce genre de paramètre.

Si vous ouvrez ce site depuis votre mobile, vous noterez que l’image s’affiche correctement dans la grille.

wpchannel-iphone-mobile

Si vous faites de même depuis un ordinateur et que vous redimensionnez la fenêtre, une zone grise finira par apparaître comme illustré ci-dessous :

wpchannel-ordinateur

Côté code, cela donne la chose suivante :

/* Post Thumbnail */
function wpc_post_thumbnail() {
	if (post_password_required() || is_attachment() || ! has_post_thumbnail()) {
		return;
	} ?>
		<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
			<div class="overlay"></div>
			
			<?php if (wp_is_mobile()) : ?>
				<?php the_post_thumbnail('medium_large', array('alt' => the_title_attribute('echo=0'), 'class' => 'img-responsive')); ?>
			<?php else : ?>
				<?php the_post_thumbnail('grid-img', array('alt' => the_title_attribute('echo=0'), 'class' => 'img-responsive')); ?>
			<?php endif; ?>
		</a>
<?php }

La fonction wpc_post_thumbnail() repose sur celle proposée dans le thème par défaut Twenty Sixteen.

La gestion des images en responsive design n’est vraiment pas une mince affaire. Quelles sont vos techniques pour gérer les différentes tailles d’images ?

2 commentaires

  1. julio

    Hello, très bonne technique. et attention au cache, il vous faut pouvoir gérer du cache différent selon le mobile ou non. Dans le cas contraire vous aurez des utilisateurs mobiles avec les images du desktop et inversement. Se passer du cache juste pour cette fonctionnalité serait dommage là aussi. WP Rocket gère ce cas de double cache.
    Bonne journée merci

Laisser un commentaire