РГ 4.4. браузер адаптивных изображений выбирает «неправильный»

Я рад, что WP 4.4. поставляется со встроенной функцией адаптивного изображения. Но я не настолько доволен этим.

Я установил несколько пользовательских размеров изображения в моем 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); // только что добавлено сегодня для поддержки устройств
add_image_size ('full-feature-image', 2000, false);
add_image_size ('gallery-image', 800, 600, true);

Как я понял, изображения, которые не обрезаны (обрезано false), добавляются в srcset. Изображение выводится в виде внешнего интерфейса (разрывы строк добавлены для лучшей читаемости):

<img width = "2000" height = "1335"
SRC = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
class = "attachment-full-feature-image size-full-feature-image"
альт = "ASDF"
srcset =»
http://mywebsite.com/cms/wp-content/uploads/2015/03/image-300x200.jpg 300 Вт, 
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 " 
размеры = "(максимальная ширина: 2000px) 100vw, 2000px">

Но теперь моя проблема: на моем экране отображаются только изображения с шириной 1024 пикселя, хотя разрешение экрана 1600 пикселей. Таким образом, все изображения выглядят размытыми.

Как я могу заставить WP и / или мой браузер использовать вместо этого изображение размером 2kpx? Должен ли я добавить новые размеры изображений, скажем, 1280px, 1440px, 1600px, 1968px? Или есть более простой способ указать WP / браузеру использовать увеличенное изображение вместо размытой и слишком маленькой версии?

images responsive features

— rob_st
источник

Можете ли вы попробовать это с правильным способом использования add_image_size? Вы всегда устанавливаете widthаргумент в false - это должно быть целое число (третий аргумент).

— fischi

Хорошо, сделали это и добавили значение высоты 9999. Изменены уменьшенные изображения. Безрезультатно

— rob_st

max_srcset_image_widthФильтр по умолчанию - 1600.

— Birgire

Полезно знать @birgire - но это мало помогает. Как я могу изменить его (кажется, еще нет документации) - и решит ли изменение мою проблему?

— rob_st

Ответы:

Что касается документации, то в блоге Make Blog есть эта запись:

Адаптивные изображения в WordPress 4.4

Чтобы увеличить ограничение 1600px, указанное в комментариях, попробуйте это:

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

Наконец, как уже упоминалось, вы должны исправить ваши звонки add_image_size

~~add_image_size («news-large», 1024, false);~~

должно быть

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

— kraftner
источник

Спасибо. Я установил высоту 9999 - это имеет значение? Я попробую это.

— rob_st

Спасибо, что заставил это работать. Хотя это в основном тот же ответ, что и этот, и на самом деле я предпочитаю именованные функции - я принял вашу, потому что вы были первыми :-)

— rob_st

Я думаю, что это может быть ответ, который мне нужен, но я не знаю, какое значение $size_arrayдолжно иметь.

— Телариан

Я решил ту же проблему, добавив дополнительный размер к srcsetфункции фильтра, которую вы можете добавить в 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
источник