WP 4.4. navigateur d'images sensible choisissant le "mauvais"

10

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

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

add_image_size('post-thumbnails', 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('medium-large', 768, false); // just added today for devices support
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 (rognage défini sur false ) sont ajoutées au srcset . Une image est sortie dans le frontend comme (ajout de sauts de lignes pour une meilleure lisibilité):

<img width="2000" height="1335"
src="http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg"class="attachment-full-feature-image size-full-feature-image"
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" 
sizes="(max-width: 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 que la résolution de l'écran soit de 1600px. Ainsi, toutes les images sont floues.

Comment puis-je faire en sorte que WP et / ou mon navigateur utilise plutôt l'image 2kpx? 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 / au navigateur d’utiliser la plus grande image au lieu de montrer une version floue et beaucoup trop petite?

    
posée rob_st 10.12.2015 - 10:21

2 réponses

9

En ce qui concerne la documentation, cet article de blog est disponible sur le blog Make Blog:

Images réactives dans WordPress 4.4

Pour augmenter la limite de 1600 pixels 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 devez corriger vos appels vers add_image_size

  

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

doit être

add_image_size('news-large', 1024, 0, false);
    
réponse donnée kraftner 10.12.2015 - 16:04
1

J'ai résolu le même problème en ajoutant une taille supplémentaire au 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 );
    
réponse donnée user1895954 10.12.2015 - 21:49

Lire d'autres questions sur les étiquettes