wake-up-neo.com

WP 4.4. responsive images browser wählt den "falschen" aus

Ich bin froh, dass WP 4.4. Wird mit einer integrierten Funktion für reaktionsschnelle Bilder geliefert. Aber ich bin nicht so glücklich damit.

Ich habe einige benutzerdefinierte Bildgrößen in meinem functions.php eingerichtet:

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); // wurde gerade für Geräte hinzugefügt, die 
 add_image_size ('full-feature-image', 2000, false) unterstützen; 
 add_image_size ('gallery-image', 800, 600, true);

Wie ich vermutet habe, werden Bilder, die nicht zugeschnitten sind (auf false gesetzt), der srcset hinzugefügt. Ein Bild wird im Frontend wie folgt ausgegeben (Zeilenumbrüche zur besseren Lesbarkeit hinzugefügt):

<img width = "2000" height = "1335" 
 src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
 class = "Anhang-Vollbild-Größe-Vollbild" 
 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 =" (maximale Breite: 2000px) 100vw, 2000px ">

Aber jetzt mein Problem: Auf meinem Bildschirm werden nur die mit 1024px angegebenen Bilder angezeigt, obwohl es eine Bildschirmauflösung von 1600px hat. So sehen alle Bilder verschwommen aus.

Wie kann ich dafür sorgen, dass WP und/oder mein Browser stattdessen das 2kpx-Image verwendet? Müsste ich neue Bildgrößen für 1280px, 1440px, 1600px, 1968px hinzufügen? Oder gibt es eine einfachere Möglichkeit, WP/den Browser anzuweisen, das größere Bild zu verwenden, anstatt eine verschwommene und viel zu kleine Version anzuzeigen?

imagesimage-sizeresponsivefeatures
9
rob_st

Bezüglich der Dokumentation gibt es diesen Blogeintrag im Make Blog:

Responsive Bilder in WordPress 4.4

Versuchen Sie Folgendes, um das in den Kommentaren angegebene 1600px-Limit zu erhöhen:

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

Schließlich sollten Sie, wie bereits erwähnt, Ihre Anrufe an add_image_size korrigieren.

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

muss sein

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

Ich habe das gleiche Problem gelöst, indem ich der srcset eine zusätzliche Größe mit einer Filterfunktion hinzugefügt habe, die Sie in Ihren functions.php einfügen können:

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