web-dev-qa-db-fra.com

Images réactives

Existe-t-il une fonction native permettant d'afficher la taille d'image réactive correcte pour les vignettes de publication ou les images de galerie en fonction de la résolution de l'écran?

Normalement j'utilise:

1.Tailles d'image personnalisées:

function customImageSetup () {
  add_theme_support( 'post-thumbnails' );
  add_image_size('grid_1 mini square', 60, 60, TRUE);
  add_image_size('grid_2', 160);
  add_image_size('grid_2 square', 160, 160, TRUE);
  add_image_size('grid_4', 360);
  add_image_size('grid_4 square', 360, 360, TRUE);
  add_image_size('grid_6', 560);
  add_image_size('grid_6 square', 560, 560, TRUE);
  add_image_size('grid_8', 760);
  add_image_size('grid_8 square', 760, 760, TRUE);
  add_image_size('grid_10', 960);
  add_image_size('grid_12', 1160, FALSE);   
}

2. Affichez par exemple la vignette avec .img-max classe assignée:

<?php the_post_thumbnail('grid_4', array( 'class' => "img-max"));?>

3. Et cette simple ligne CSS pour correspondre à l'image:

.img-max { width:100%; height:auto; }

Cela fonctionne dans la plupart des cas, mais surtout en termes de conception Web réactive, il serait très utile d’utiliser des tailles d’image personnalisées à différentes résolutions d’écran.

Existe-t-il une fonction wordpress pour remplacer les images côté serveur et sans javascript?

imagesgalleryimage-sizeresponsive
4
p2or

Pour ajouter à la réponse de @ cristian.raiber, il n’existe aucune fonction dans Wordpress ou php permettant de détecter les tailles d’écran, et il n’y aura probablement aucune fonctionnalité de ce type. PHP exécute côté serveur, qui s'exécute avant les clients, côté navigateur. En ce qui concerne php, et d'ailleurs Wordpress, je ne vois aucune implémentation future d'aucune sorte de fonction permettant de gérer une telle détection de manière prévisible et fiable.

Il n’existe aucun moyen insensé de prouver que cela fonctionne, peu importe comment vous le regardez. Les opérations côté serveur sont prévisibles et nous pouvons avoir confiance en cela, car elles ne dépendent pas de l'entrée de l'utilisateur final et ne peuvent surtout pas être manipulées par l'utilisateur final. Les opérations côté client peuvent être manipulées.

Examinez les variables et manipulations côté client suivantes:

  • Cookies -> Les cookies peuvent être supprimés ou bloqués par l'utilisateur. Les cookies peuvent également être bloqués par les lois des États ou des pays.

  • jQuery -> Les utilisateurs finaux peuvent désactiver jquery à tout moment

  • Navigateurs -> Les sites se comportent différemment selon les navigateurs. Les utilisateurs finaux peuvent désactiver la détection du navigateur

Les solutions côté client fonctionneront dans certains cas, dans d’autres cas non fondées sur ce qui précède (il existe également d’autres points non mentionnés).

Vous pouvez utiliser wp_is_mobile() pour détecter les mobiles (cela ne fonctionne que sur les mobiles, pas sur les tablettes), puis définir la taille d'image correcte en conséquence, MAIS, ce qui suit devrait être noté

  • Comme indiqué ci-dessus pour les opérations côté client, cette fonction est également peu fiable, car elle dépend également des opérations côté client. À mon avis, une fonction mickey mouse

  • Il ne détecte pas les tailles d'écran et détecte uniquement les appareils de téléphonie mobile. Ca ne marche pas sur les tablettes

CONCLUSION

La seule solution appropriée consiste à optimiser au mieux vos images (pour cela, une planification appropriée et des tailles d'image correctes sont présentées en fonction de la taille du contenu. Ne chargez pas une image de 700 pixels lorsque la largeur maximale de votre contenu est de 500 pixels). le navigateur redimensionne les images en conséquence. Je sais que cela ralentit les temps de chargement car les navigateurs utilisent beaucoup de ressources pour redimensionner les images, mais au moins, vous pouvez être en mesure de fournir un contenu fiable à l'utilisateur final.

4
Pieter Goosen

Il n'y a pas de fonction native, mais le plug-in de RICG Responsive Images ajoutera un attribut srcset avec les tailles d'image disponibles. Srcset (avec l'élément <picture>), est constamment pris en charge par le navigateur - il n'a pas besoin de javascript et il appartient au navigateur de décider lequel est correct la bonne image à charger.

L'attribut est ajouté pour les publications où vous avez utilisé le bouton "Ajouter un média" et il existe des méthodes pour l'appeler à la main dans un modèle de thème - vous pourrait modifier votre fonction customImageSetup pour appeler tevkori_get_srcset_string () () , par exemple.

Il est non invasif, en ce sens qu'il n'apportera aucune modification à votre bibliothèque multimédia ou à votre base de données. Si vous la désinstallez, votre site redevient normal.

2
William Turrell

Non, il n'y a pas une telle chose pour le moment. Cependant, il existe une solution que vous pouvez essayer si vous êtes vraiment intéressé.

C’est quelque chose que j’avais utilisé par le passé et tout s’est bien passé, même si cela a ses limites.

La solution:

Vous pouvez écrire une petite fonction JS qui récupère la résolution d'écran actuelle de l'utilisateur et l'écrit dans un cookie. Vous aurez également besoin d'une fonction qui met à jour la valeur stockée dans le cookie si l'utilisateur redimensionne la fenêtre de son navigateur.

Vous pouvez lire ce cookie en utilisant PHP et avoir quelque chose comme:

if($screen_resolution > 640 && $screen_resolution < 860) {

 the_post_thumbnail('your-custom-image-size-for-this-viewport-here');
}

P.S: Veuillez prendre en compte le fait que cette solution ne fonctionne pas trop bien avec les systèmes de mise en cache.

1
cristian.raiber