От автора: в то время, как распространенность адаптивных изображений только растет, с учетом ограничений в крупных CMS типа WordPress бывает очень трудно встроить новый функционал. С другой стороны всегда можно прописать необходимые свойства в теме вручную. Однако данный подход сложнее и кроет в себе большие затраты по времени.
К нашей радости с выходом новой версии WordPress 4.4 разработчики и поддержка тем смогут намного легче применять функционал адаптивных изображений в своих темах. В новой версии системы плагин RICG Responsive Images встроили в ядро WordPress – для нас это значит, что поддержка адаптивных изображений теперь идет по умолчанию прямо из коробки. Рассмотрим, как данная функция работает, и как ее можно использовать для лучшей поддержки на своем WordPress сайте.
Как работает новая функция
Как только вы обновитесь до WordPress 4.4, ко всему контенту и встроенным изображениям добавятся атрибуты srcset и sizes. Данные атрибуты производят фильтрацию, они запрашивают изображение с исходным разрешением и проверяют доступность всех остальных его размеров. Важное нововведение – если соотношение сторон изменяемого изображения отличается от оригинального, то теперь в атрибуте srcset отсутствует возможность ручного кадрирования. Кроме того, при вызове изображения при помощи функции wp-get-attachment-image, теперь также вернется адаптивное изображение.
Адаптивные изображения являются фоновой функцией: когда бы пользователь ни загружал изображение в WordPress через медиа загрузчик, все будет происходить автоматически. При отображении изображения на странице, к нему сразу же будут добавляться атрибуты srcset и sizes.
Все это значит, что функция адаптивных изображений работает невидимо. Нет никаких переключателей, форм или боксов с галочками. То есть разработчикам тем, чтобы полностью быть уверенными в том, что к изображениям был добавлен верный атрибут sizes, придется отредактировать файл темы functions.php. Все это потому что, когда мы говорим об адаптивных изображениях в WordPress, по существу, мы говорим только об атрибутах srcset и sizes в тегах изображений.
Пока WordPress делает за нас исключительную работу по вставке доступных размеров изображения в атрибут srcset, а атрибутом sizes все немного сложнее предсказать. Атрибут sizes отвечает за то, как правильно сказать браузеру, насколько большим изображение может быть по ширине на всех доступных размерах окна браузера. Так как информация может разниться по стилям пользовательской темы, самое лучшее, что мы можем сделать, это добавить по умолчанию код ниже:
|
1 |
sizes="(max-width: {{image-width}}) 100vw, {{image-width}}" |
Атрибут sizes по умолчанию решает две задачи. Первое это проверяет, что для изображения существует правильный атрибут sizes, в соответствии со спецификацией данный атрибут стал обязательным. Второе это то, что браузер не загрузит изображение по ширине большее, чем исходное запрошенное. Если же в CSS присутствуют какие-либо манипуляции с размерами изображений для различных размеров окна браузера, то sizes уже не так полезен.
Так как атрибут sizes по умолчанию работает только с изображениями, изменения которых не прописаны в CSS, были разработаны специальные хуки, позволяющие разработчикам тем настраивать атрибут под каждое изображение, тем самым обеспечивая полную уверенность в том, что для каждой ширины окна браузера будет подобрано идеальное значение атрибута sizes.
Важно отметить, если есть какая-либо возможность, для точной подборки адаптивных изображений не стоит полагаться на значение атрибута sizes по умолчанию. По умолчанию атрибут sizes не разрешает браузеру изменять исходное изображение, если размер окна браузера меньше запрошенного изображения. При изменениях размера изображения через CSS под определенный размер экрана, когда изображение должно быть больше запрошенного, данный атрибут также не сможет изменить исходное изображение.
Одно из самых важных нововведений, которые теперь с релизом новой версии вы можете делать, если вы разработчик темы или у вас есть доступ к исходному коду WordPress, это фильтрация изображений темы под точное значение атрибута sizes. Пример ниже встраивается в функцию wp_calculate_image_sizes, которую можно расширить под свою тему.
|
1 2 3 4 5 |
function adjust_image_sizes_attr( $sizes, $size ) { $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px'; return $sizes; } add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 ); |
В этом примере хук применяется ко всему контенту и встроенным/превью изображениям. Можно добавить дополнительный код на проверку, что под разные типы изображений подстраиваются разные значения sizes.
Были также добавлены новые функции, позволяющие добавлять атрибуты srcset и sizes не только к контенту поста, но и к любым изображениям, загруженным в WordPress через медиа загрузчик. Функция wp_get_attachment_image_sizes вернет атрибут sizes по умолчанию, который можно изменить при помощи фильтра в файле темы functions.php. Функция wp_get_attachment_image_srcset вернет атрибут srcset, в котором хранятся все доступные размеры запрошенного изображения.
Настройка адаптивных изображений для вашей темы
С новыми функциями появилось несколько новых хуков, с помощью которых можно обеспечить наилучшую поддержку адаптивных изображений именно в вашей теме. Хук max_srcset_image_width позволяет разработчикам фильтровать максимальную ширину изображений, которую можно добавить в атрибут srcset. Встраивание в функцию wp_calculate_image_srcset отфильтрует атрибуты srcset изображений, в то время как фильтрация wp_calculate_image_sizes поможет разработчикам тем настраивать атрибут sizes так, чтобы наилучшим образом подбирать изображения под ширину окна браузера в вашей теме.
Если вам нужен пример фильтрации атрибута sizes, то вам поможет новая тема twentysixteen . В файле темы functions.php две последние функции фильтруют атрибут sizes таким образом, чтобы он включал различные размеры окна браузера под эту тему.
Для фильтрации изображений в контенте мы используем функцию wp_calculate_image_sizes, а для превьюшек и встроенных изображений — wp_get_attachment_image_attributes. Две разные функции используются потому, что тема по-разному отображает встроенные изображения и изображения в контенте. Хотя такой уровень разделения не всегда пригодится во всех темах, все же у разработчиков есть возможность фильтровать изображения разными способами, тем самым разработчики могут показать специфичность их темы или наоборот обобщенность.
Пользователи от обновления до WordPress 4.4 выигрывают моментально, новая версия обеспечит им четкие изображения с любыми размерами окна браузера и плотностью пикселей. Также обновление сказывается на росте производительности, так как теперь страницам не надо тратить дополнительное время на загрузку больших изображений, чем сейчас необходимы. Для пользователей этот процесс автоматический, но разработчики тем все же захотят вручную настраивать атрибут sizes через файл темы functions.php.
Большое спасибо
Создание плагина и встраивание его в ядро WordPress потребовало больших командных усилий. Исходя из этого, хочется поблагодарить людей как со стороны WordPress, так и RICG. Matt Marqis собрал все вместе, облегчив весь процесс разработки, а также постоянно следил, чтобы темп разработки не снижался. Joe McGill и Jasper de Groot из команды RICG и при помощи Andrew Ozz помогли вписать плагин в ядро WordPress. Helen Hou-Sandi и Mike Schroder постоянно поддерживали проект и давали множество советов на протяжении всей разработки. Scott Taylor возглавлял процесс разработки и релиза WordPress 4.4, было множество обсуждений на тему адаптивных изображений. Chris Coyier потратил большое количество своего личного времени на ранней стадии проекта и помог мне из нескольких PHP строк своять целый плагин, который в конце стал неотъемлемой частью CMS.
Также хочу поблагодарить всех тех, кто проявил интерес к слиянию плагина и ядра WordPress. То, что вы пользуетесь результатом нашей работы, ваша отдача, вопросы на GitHub, сделало это возможным.
Автор: Tim Evko
Источник: //www.smashingmagazine.com/
Редакция: Команда webformyself.
