WP 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); // just added today for devices support
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" 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="(max-width: 2000px) 100vw, 2000px">
Но теперь моя проблема: На моем экране отображаются только изображения, указанные с шириной 1024 пикселей, хотя он имеет разрешение экрана 1600 пикселей. Поэтому все изображения выглядят размытыми.
Как я могу заставить WP и/или мой браузер использовать вместо этого изображение 2kpx? Должен ли я добавлять новые размеры изображений, скажем, 1280 пикселей, 1440 пикселей, 1600 пикселей, 1968 пикселей? Или есть более простой способ указать WP/браузеру использовать увеличенное изображение вместо того, чтобы показывать размытую и слишком маленькую версию?
2 answers
Что касается документации, в блоге Make есть следующее сообщение в блоге:
Адаптивные изображения в WordPress 4.4
Чтобы увеличить ограничение в 1600 пикселей, упомянутое в комментариях, попробуйте сделать следующее:
add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
return 2000;
}, 10, 2);
Наконец, как уже упоминалось, вы должны исправить свои звонки на add_image_size
add_image_size("новости-большие", 1024, ложь);
Должно быть
add_image_size('news-large', 1024, 0, false);
Я решил ту же проблему, добавив дополнительный размер к 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 );