WP 4.4. Browser für reaktionsschnelle Bilder, der den „falschen“ auswählt


9

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 eingerichtet 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 ('mittelgroß', 768, false); // wurde gerade für die Geräteunterstützung hinzugefügt
add_image_size ('full-feature-image', 2000, false);
add_image_size ('gallery-image', 800, 600, true);

Wie ich mir vorgestellt habe, werden Bilder, die nicht zugeschnitten sind (Zuschneiden auf eingestellt false), zum hinzugefügt srcset. 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-Vollfeature-Bildgröße-Vollfeature-Bild"
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 " 
Größen = "(maximale Breite: 2000px) 100vw, 2000px">

Aber jetzt mein Problem: Auf meinem Bildschirm werden nur die mit 1024px Breite angegebenen Bilder angezeigt, obwohl die Bildschirmauflösung 1600px beträgt. So sehen alle Bilder verschwommen aus.

Wie kann ich WP und / oder meinen Browser dazu bringen, stattdessen das 2kpx-Bild zu verwenden? Müsste ich neue Bildgrößen für beispielsweise 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?


Können Sie dies bitte mit der richtigen Verwendung ausprobieren add_image_size? Sie setzen das widthArgument immer auf false - dies sollte eine Ganzzahl sein (drittes Argument).
Fischi

Ok, habe das getan und einen Höhenwert von 9999 hinzugefügt. Die Größe der Miniaturansichten wurde geändert. Kein Erfolg.
Rob_st

Der Standardwert des max_srcset_image_widthFilters ist 1600.
Birgire

Gut zu wissen, @birgire - aber das hilft nicht viel. Wie ändere ich es (es scheint noch keine Dokumentation zu geben) - und wird eine Änderung mein Problem lösen?
Rob_st

Antworten:


9

In Bezug auf die Dokumentation gibt es diesen Blog-Beitrag im Make Blog:

Responsive Images in WordPress 4.4

Versuchen Sie Folgendes, um das in den Kommentaren erwähnte 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 korrigieren add_image_size

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

muss sein

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

Danke. Ich habe die Höhe auf 9999 eingestellt - macht es einen Unterschied? Ich werde es ausprobieren.
rob_st

Danke, das hat funktioniert. Obwohl es im Grunde die gleiche Antwort wie diese ist und ich eigentlich benannte Funktionen bevorzuge - ich habe deine akzeptiert, weil du der Erste warst :-)
rob_st

Ich denke, das könnte die Antwort sein, die ich brauche, aber ich weiß nicht, welchen Wert ich haben $size_arraysoll.
Telarian

1

Ich habe das gleiche Problem gelöst, indem ich dem eine zusätzliche Größe srcsetmit einer Filterfunktion hinzugefügt habe , die Sie in Ihre hinzufügen können 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 );
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.