WP 4.4. navigateur d'images réactif choisissant le «mauvais»

9

Je suis content que WP 4.4. livré avec une fonction d'image réactive intégrée. Mais je n'en suis pas si content.

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

add_image_size ('post-miniatures', 600, 600, vrai);
add_image_size ('news-large', 1024, false);
add_image_size ('news-small', 500, false);
add_image_size ('3-col', 500, 375, vrai);
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 appareils
add_image_size («image complète», 2000, false);
add_image_size ('galerie-image', 800, 600, vrai);

Comme je l'ai pensé, les images qui ne sont pas recadrées (recadrage défini sur false) sont ajoutées au srcset. Une image est sortie dans l'interface comme (des sauts de ligne ont été 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 = "pièce jointe-full-feature-image taille-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 " 
tailles = "(largeur max: 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'il ait 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 à la place l'image 2kpx? Dois-je 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 l'image plus grande au lieu d'afficher une version floue et beaucoup trop petite?

images responsive features rob_st
la source
Pouvez-vous essayer ceci avec la bonne façon de l'utiliser add_image_size? Vous définissez toujours l' widthargument sur false - il doit s'agir d'un entier (troisième argument).
fischi
Ok, fait cela et ajout d'une valeur de hauteur de 9999. Vignettes redimensionnées. En vain.
rob_st
La valeur par défaut du max_srcset_image_widthfiltre est 1600.
birgire
Bon à savoir @birgire - mais cela n'aide pas beaucoup. Comment puis-je le changer (il semble qu'il n'y ait pas encore de documentation) - et un changement résoudra-t-il mon problème?
rob_st

Réponses:

9

Concernant 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 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 add_image_size

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

doit être

add_image_size('news-large', 1024, 0, false);
kraftner
la source
Je vous remercie. J'ai réglé la hauteur sur 9999 - cela fait-il une différence? Je vais l'essayer.
rob_st
Merci, ça a fait marcher. Bien que ce soit fondamentalement la même réponse que celle-ci et en fait je préfère les fonctions nommées - j'ai accepté la vôtre parce que vous étiez le premier :-)
rob_st
Je pense que cela pourrait être la réponse dont j'ai besoin, mais je ne sais pas quelle valeur $size_arraydevrait avoir.
Telarian
1

J'ai résolu le même problème en ajoutant une taille supplémentaire à srcsetavec une fonction de filtre 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 );
user1895954
la source