WP 4.4. browser di immagini reattive scegliendo quello "sbagliato"

Sono contento che WP 4.4. viene fornito con una funzione di immagine reattiva integrata. Ma non ne sono così felice.

Ho impostato alcune dimensioni di immagine personalizzate nel mio 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); // appena aggiunto oggi per il supporto dei dispositivi
add_image_size ('full-feature-image', 2000, false);
add_image_size ('gallery-image', 800, 600, true);

Come ho immaginato, le immagini che non sono ritagliate (ritaglio impostato su false) vengono aggiunte a srcset. Un'immagine viene emessa nel frontend come (interruzioni di riga aggiunte per una migliore leggibilità):

<img width = "2000" height = "1335"
src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class = "immagine-allegato-full-feature-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 " 
dimensioni = "(larghezza massima: 2000 px) 100 Vw, 2000 px">

Ma ora il mio problema: sul mio schermo sono mostrate solo le immagini specificate con una larghezza di 1024 px, sebbene abbia una risoluzione dello schermo di 1600 px. Quindi tutte le immagini sembrano sfocate.

Come posso invece fare in modo che WP e / o il mio browser utilizzino l'immagine 2kpx? Dovrei aggiungere nuove dimensioni dell'immagine per, diciamo 1280px, 1440px, 1600px, 1968px? Oppure c'è un modo più semplice per dire a WP / browser di utilizzare l'immagine più grande invece di mostrare una versione sfocata e troppo piccola?

images responsive features

— rob_st
fonte

Puoi per favore provare questo con il modo corretto di usare add_image_size? Devi sempre impostare l' widthargomento su false - questo dovrebbe essere un numero intero (terzo argomento).

— fischi,

Ok, fatto e aggiunto un valore di altezza di 9999. Miniature ridimensionate. Inutile.

— rob_st,

L'impostazione predefinita del max_srcset_image_widthfiltro è 1600.

— birgire

Buono a sapersi @birgire - ma questo non aiuta molto. Come posso cambiarlo (sembra che non ci sia ancora documentazione) e una modifica risolverà il mio problema?

— rob_st,

Risposte:

Per quanto riguarda la documentazione c'è questo post sul blog sul Make Blog:

Immagini reattive in WordPress 4.4

Per aumentare il limite di 1600 px menzionato nei commenti, prova questo:

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

Infine, come già detto, è necessario correggere le chiamate add_image_size

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

deve essere

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

— kraftner
fonte

Grazie. Ho impostato l'altezza su 9999 - fa qualche differenza? Lo proverò.

— rob_st,

Grazie, che l'ha fatto funzionare. Sebbene sia sostanzialmente la stessa risposta di questa e in realtà preferisco le funzioni con nome - ho accettato le tue perché eri il primo :-)

— rob_st

Penso che questa potrebbe essere la risposta di cui ho bisogno, ma non so quale valore $size_arraydovrebbe avere.

— Telarian,

Ho risolto lo stesso problema aggiungendo una dimensione extra al srcsetcon una funzione di filtro che puoi aggiungere nel tuo 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
fonte