J’ai récemment travaillé sur un thème de photographie et l’une des choses que j’ai mises en œuvre 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 se charge uniquement sur les tablettes et les appareils portables. Eh bien, sur les versions de bureau/ordinateur portable, je souhaite conserver 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 vous pouvez utiliser ce script génial avec la fonction de redimensionnement aqua 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 que vous voulez 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é à l’aide de la fonction require().
Aqua redimensionneur
La fonction Aqua Resizer est très simple d’utilisation. Ci-dessous, vous pouvez voir un exemple de la façon dont on l’ajouterait à un thème pour afficher l’image 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 est 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 beaucoup de fenêtres de possibilités. Vous pouvez l’utiliser pour fournir des images plus grandes pour les écrans de rétine (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 comme je l’utilise , pour afficher différentes proportions pour les images sur les appareils mobiles.
Remarque: Évidemment, vous pouvez également utiliser Publier des miniatures pour cela en définissant la taille d’image à utiliser. J’ai opté pour le resizer aqua 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 de la modification des tailles actuelles.