Недавно я объединился с Мат маркиза отзывчивый изображений общественная группа, чтобы помочь интегрировать ответные изображения в платформе WordPress.Мы решили реорганизовать плагин, который я построил несколько месяцев назад, надеясь, что это приведет к более полезной и производительной решения .
После нескольких месяцев запросов тянуть, разговоры о Слэк и помощь от основной команды WordPress, мы, наконец, готовы поделиться тем, что мы работаем на.Вы можете скачать и установить RICG Отзывчивый Images 1 из каталога плагинов WordPress ‘, в то время как отслеживание нашей прогресса в области развития на GitHub __11 | 2 .
Что делает плагин
WordPress не изменилась, как он выводит img тег в какое-то время.И хотя существует множество способов крюк в родных функций WordPress “и изменяют img фрагмент, это может быть подавляющим для начинающих и разработчиков без тематических так.Соединение, что со сложностью Picturefill и в srcset спецификации, и пользователей WordPress имели несколько вариантов для реализации чистый и нормально отзывчивые изображений решение .
Чтобы решить эту проблему, мы отправились, чтобы построить модуль, который дает пользователям отзывчивые изображения, как только установлен плагин, без дополнительных усилий, необходимых.Нет настройки администратора, настройка медиа загрузки или кодирование не требуется.Плагин поставляется с одним dependency __26 | 3 , polyfill для браузеров, которые еще не поддерживают родные отзывчивые изображения.Удаление этого файла не является обязательным и не влияет на функциональность плагина, пока пользователь имеет современный браузер .
Как только изображение загружено через интерфейс медиа, WordPress автоматически создает три варианта изображения на различных размеров.Когда плагин активирован, добавив, “Рекомендуемые” и контент изображения на должность вернется изображения стандартной разметки WordPress ‘, с добавил srcset attribute 4 .Мы используем srcset атрибут, потому что это самый простой атрибут для разработчиков, так и пользователей, чтобы добавить.В то время как picture элемент обеспечивает пользователю богатый набор options 5 , мы чувствовали, что srcset атрибут имеет наибольший смысл в качестве из-из-коробки решения.Это также лучше, чтобы использовать, когда вы упором на разрешение переключения более художественной direction 6 (об этом чуть позже в этой статье) .
<a href="http://ricg.dev/wp-content/uploads/2015/01/image.jpg"><img class="alignnone size-full wp-image-6" src="http://ricg.dev/wp-content/uploads/2015/01/image.jpg" srcset="http://ricg.dev/wp-content/uploads/2015/01/image-150x150.jpg 150w, http://ricg.dev/wp-content/uploads/2015/01/image-300x300.jpg 300w, http://ricg.dev/wp-content/uploads/2015/01/image-1024x1024.jpg 1024w, http://ricg.dev/wp-content/uploads/2015/01/image.jpg 1800w" alt="a cool responsive image" width="1800" height="1800"></a>
Плагин предназначен для обратной совместимости, что означает, что изображения добавляется перед плагин был установлен будет реагировать при добавлении к сообщению или разделе “Рекомендуемые Image”.Это потому, что он использует размеры изображения, ранее определенные WordPress и активной темой в functions.php файл.Соотношение изображение будет поддерживаться на протяжении всего srcset массиве, это означает, что изображения, отличающиеся от соотношения сторон исходного загруженного изображения останется из .
Разработчики тем можно использовать плагин, чтобы поместить отзывчивые изображения, где бы они хотели с помощью tevkori_get_srcset_string() функцию, которая принимает идентификатор и размер изображения в качестве параметров .
<img src="myimg.png" <?php echo tevkori_get_srcset_string( 11, 'medium' ); ?> />
Там также tevkori_get_srcset_array() функция, которая принимает те же параметры и возвращает массив srcset значений для указанного изображения .
Каким плагином Работа
Большинство функций происходит, когда изображение упал в редакторе WordPress “WYSIWYG.Поскольку все изменения размеров изображения будет создана в процессе загрузки, единственное, что осталось сделать, это создать массив, содержащий адреса из доступных изображений различных размеров, а также их размеры.Этот массив затем фильтруется, чтобы удалить размеры изображений с соотношением сторон, которые не соответствуют отношение полноразмерным изображением .
Массив создается с помощью вызова wp_get_attachment_image_src() функцию и хранения результатов.В то же время, мы используем wp_get_attachment_metadata(), чтобы получить те же результаты, но и для каждого возможного изменения изображения.Далее, соотношение вычисляется путем умножения ширины каждого изображения путем в результате высоты исходного изображения, разделенной на ширину исходного изображения в.Если результат совпадает высоту исходного изображения, а затем изображение будет толкнул в конечном массиве, должны быть возвращены в tevkori_get_srcset_array() функцию .
Вызывает функцию tevkori_get_srcset_array() | ~ 14 и помещает результат внутри srcset атрибута.Фильтр применяется к image_send_to_editor функции, где регулярное выражение используется, чтобы поместить результат tevkori_get_srcset_string() функции непосредственно после src атрибута в изображении.Тот же самый процесс происходит по признакам образов, с фильтром применяется к post_thumbnail_html функция .
Если размер изображения изменяется в редакторе сообщение, а затем плагин будет обнаруживать изменения и обновить srcset значение соответственно.Это гарантирует, что правильное соотношение изображения всегда поддерживается.Чтобы включить эту функцию, мы используем технологию, чтобы крюк в wp.media object 7 и перерасчета
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров