Utilisation de Mobile-Detect pour afficher des images en vedette personnalisées – WPExplorer

J’ai récemment travaillé sur un thème de photographie et l’une des choses que j’ai implémentées est un «style» mobile. Contrairement aux thèmes réactifs courants qui s’adapteront à la taille de votre navigateur, quel que soit l’appareil, je l’ai configuré pour que le css / js mobile ne se charge que sur les tablettes et les appareils portables. Eh bien, sur les versions de bureau / ordinateur portable, je veux garder un certain design qui nécessite que certaines images aient une hauteur fixe mais n’importe quelle largeur, cependant, sur la version mobile, je veux que ces mêmes images aient une hauteur illimitée mais une largeur fixe.

Solution?

J’ai récemment trouvé un script assez sympa appelé “Mobile Detect” que j’utilise pour charger mes css / js uniquement sur les appareils mobiles, alors pourquoi ne pas utiliser le même script pour afficher différentes tailles d’image pour les appareils mobiles? Ci-dessous, je vais vous montrer comment utiliser ce script génial avec la fonction aqua resizer pour redimensionner les images afin de créer deux tailles d’image différentes – une pour les ordinateurs ordinaires et une pour les appareils mobiles.

Comment faire?

La première chose à faire est d’ajouter la fonction Aqua Resizer et le Détection mobile php dans votre thème / plugin. Soit via functions.php, soit dans un fichier séparé en utilisant la fonction require ().

Aqua Resizer

La fonction Aqua Resizer est très simple à utiliser. Ci-dessous, vous pouvez voir un exemple de la façon dont on l’ajouterait à un thème pour afficher l’image en vedette d’un article:

<?php
//get and crop featured image to 600px (width) and 150px (height)
$featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true ); ?>
<img src="<?php echo $featured_image; ?>" />

Détection mobile

La classe Mobile est vraiment simple à utiliser, voici un exemple de comment tester si un visiteur se trouve sur n’importe quel appareil mobile:

<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
   // Any mobile device.
} ?>

Combinez Aqua Resizer et Mobile Detect

Disons maintenant que je voulais montrer une image beaucoup plus petite (la moitié de la taille) pour tous les utilisateurs mobiles, je peux le faire comme ceci:

<?php
$detect = new Mobile_Detect();
if ( $detect->isMobile() ) {
    // Featured image for mobile users
   $featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 300, 150, true ); 
} else {
   // Featured image for all other users
   $featured_image = aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ,'full' ), 600, 300, true ); 
} ?>
<img src="<?php echo $featured_image; ?>" />

Comme vous pouvez le voir, c’est vraiment assez simple et cela ouvre de nombreuses fenêtres de possibilités. Vous pouvez l’utiliser pour fournir des images plus grandes pour les écrans Retina (Mobile Detect est très complet, vous pouvez même tester des appareils individuels, des systèmes d’exploitation, des lots d’appareils et plus), pour afficher des images plus petites pour une navigation mobile plus rapide ou au fur et à mesure que je l’utilise , pour afficher des proportions différentes pour les images sur les appareils mobiles.

Remarque: Évidemment, vous pouvez également utiliser Vignettes de publication pour cela en définissant la taille d’image à utiliser. J’ai opté pour l’aqua resizer car c’est la fonction que j’ai utilisée récemment dans mon thème car elle ne vous oblige pas à régénérer les vignettes lors de l’ajout de nouvelles tailles d’image ou lors du changement de celles actuelles.