WP 4.4. responsywna przeglądarka zdjęć wybierając „złą”

9

Cieszę się, że WP 4.4. jest dostarczany z wbudowaną funkcją responsywnego obrazu. Ale nie jestem z tego zadowolony.

W moim ustawiłem kilka niestandardowych rozmiarów obrazu functions.php:

add_image_size („miniatury postu”, 600, 600, prawda);
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 („średni-duży”, 768, fałsz); // właśnie dodano dzisiaj do obsługi urządzeń
add_image_size ('full-feature-image', 2000, false);
add_image_size ('gallery-image', 800, 600, true);

Jak się domyśliłem, obrazy, które nie są przycięte (przycinanie ustawione na false) są dodawane do srcset. Obraz jest wyprowadzany w interfejsie jak (dodano podział wierszy dla lepszej czytelności):

<img szerokość = „2000” wysokość = „1335”
src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class = "załącznik-pełna-funkcja-obraz rozmiar-pełna-funkcja-obraz"
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 ” 
rozmiary = "(maksymalna szerokość: 2000px) 100vw, 2000px">

Ale teraz mój problem: na ekranie wyświetlane są tylko obrazy o szerokości 1024px, chociaż mają rozdzielczość ekranu 1600px. Wszystkie obrazy wyglądają na rozmyte.

Jak mogę zmusić WP i / lub moją przeglądarkę do używania zamiast tego obrazu 2kpx? Czy musiałbym dodać nowe rozmiary obrazów, powiedzmy 1280px, 1440px, 1600px, 1968px? Czy może jest prostszy sposób, aby powiedzieć WP / przeglądarce, aby używała większego obrazu zamiast wyświetlać rozmytą i zdecydowanie zbyt małą wersję?

images responsive features rob_st
źródło
Czy możesz wypróbować to we właściwy sposób add_image_size? Zawsze ustawiasz widthargument na false - powinna to być liczba całkowita (trzeci argument).
fischi,
Ok, zrobiłem to i dodałem wartość-wartość 9999. Miniaturki o zmienionym rozmiarze. Bezskutecznie
rob_st
Domyślny max_srcset_image_widthfiltr to 1600.
birgire,
Dobrze wiedzieć @irgire - ale to niewiele pomaga. Jak to zmienić (wydaje się, że nie ma jeszcze dokumentacji) - i czy zmiana rozwiąże mój problem?
rob_st

Odpowiedzi:

9

Dokumentacja dotyczy tego postu na blogu Make Blog:

Responsywne obrazy w WordPress 4.4

Aby zwiększyć limit 1600 pikseli wymieniony w komentarzach, spróbuj tego:

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

Wreszcie, jak już wspomniano, należy naprawić swoje połączenia z add_image_size

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

musi być

add_image_size('news-large', 1024, 0, false);
Kraftner
źródło
Dziękuję Ci. Ustawiłem wysokość na 9999 - czy to ma znaczenie? Wypróbuję to.
rob_st
Dziękuję, że to zadziałało. Mimo że jest w zasadzie taka sama odpowiedź jak ta, a właściwie wolę nazwane funkcje - Przyjąłem je, bo byłeś pierwszy :-)
rob_st
Myślę, że to może być odpowiedź, której potrzebuję, ale nie wiem, jaką wartość $size_arraypowinna mieć.
Telarian
1

Rozwiązałem ten sam problem, dodając dodatkowy rozmiar do srcsetz funkcją filtrowania, którą możesz dodać w swoim 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 );
użytkownik1895954
źródło