web-dev-qa-db-fra.com

WP 4.4. navigateur d'images sensibles choisir le "mauvais"

Je suis content que WP 4.4. est livré avec une fonction d’image sensible intégrée. Mais je ne suis pas heureux avec ça.

J'ai configuré des tailles d'image personnalisées dans mon functions.php:

add_image_size ('post-vignettes', 600, 600, true); 
 add_image_size ('news-large', 1024, false); 
 add_image_size ('news-small', 500, false) ; 
 add_image_size ('3-col', 500, 375, true); 
 add_image_size ('presscutting', 600, 850, true); 
 add_image_size ('moyen-grand ', 768, faux); // vient d'être ajouté aujourd'hui pour la prise en charge des périphériques 
 add_image_size ('full-feature-image', 2000, false); 
 add_image_size ('gallery-image', 800, 600, true);

Comme je le pensais, les images qui ne sont pas rognées (ensemble rogné sur false) sont ajoutées à srcset. Une image est sortie dans le frontend comme (des sauts de lignes ajoutés pour une meilleure lisibilité):

<img width = "2000" height = "1335" 
 src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
 class = "image-pièce-jointe-complète-taille-image-complète" 
 alt = "asdf" 
 srcset = "
 http://mywebsite.com/ cms/wp-content/uploads/2015/03/image-300x200.jpg 300w, 
 http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w , 
 http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w, 
 http://mywebsite.com/cms/wp- content/uploads/2015/03/image-500x334.jpg 500w "
 tailles =" (largeur maximale: 2000px) 100vw, 2000px ">

Mais maintenant mon problème: sur mon écran, seules les images spécifiées avec une largeur de 1024px sont affichées, bien qu’elles aient une résolution d’écran de 1600px. Donc, toutes les images sont floues.

Comment puis-je faire en sorte que WP et/ou mon navigateur utilise l'image 2kpx à la place? Aurais-je besoin d'ajouter de nouvelles tailles d'image pour, disons, 1280px, 1440px, 1600px, 1968px? Ou existe-t-il un moyen plus simple de dire à WP/le navigateur d'utiliser l'image plus grande au lieu d'afficher une version trop floue et trop floue?

imagesimage-sizeresponsivefeatures
9
rob_st

En ce qui concerne la documentation, il y a ce billet de blog sur le Make Blog:

Images réactives dans WordPress 4.4

Pour augmenter la limite de 1600px mentionnée dans les commentaires, essayez ceci:

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

Enfin, comme déjà mentionné, vous devriez corriger vos appels vers add_image_size

add_image_size ('news-large', 1024, false);

doit être

add_image_size('news-large', 1024, 0, false);
9
kraftner

J'ai résolu le même problème en ajoutant une taille supplémentaire à srcset avec une fonction de filtrage que vous pouvez ajouter dans votre functions.php:

function filter_max_srcset( $max_width, $size_array ) {
    if ( $size_array[0] === 1800 ) {
        $max_width = 1800;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );
1
user1895954