Недавно я объединился с Мэтом маркиза Отзывчивый изображений общественная группа, чтобы помочь интегрировать ответные изображений в платформу WordPress.Мы решили реорганизовать плагин, который я построил несколько месяцев назад, надеясь, что это приведет к более полезной и производительной решения .
После нескольких месяцев запросов тянуть, разговоры о слабостью и помощью от основной группы WordPress, мы, наконец, готовы поделиться тем, что мы работаем на.Вы можете скачать и установить RICG Отзывчивый Images 1 из каталога плагинов WordPress “, сохраняя при нашем прогресса в области развития на GitHub 2 .
Что делает плагин
WordPress не изменилась так, как это выводит img тег в какое-то время.И хотя существует множество способов крюк в родных функций WordPress “и изменить img фрагмент, таким образом можно быть подавляющим для начинающих, так и разработчиков, не тематических, так.Соединение, что со сложностью Picturefill и в srcset спецификации, а пользователи WordPress имели несколько вариантов для реализации чистый и нормально отзывчивые изображений решение .
Чтобы решить эту проблему, мы отправились, чтобы построить плагин, который дает пользователям отзывчивые изображения, как только установлен плагин, без дополнительных усилий необходимо.Никакая установка админ, конфигурации СМИ загрузки или кодирование не требуется.Плагин поставляется с одним dependency 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>
Плагин предназначен для обратной совместимости, означает, что изображение добавляется перед установки плагина будет реагировать, когда добавляется к сообщению или разделе “Рекомендуемые изображения”.Это потому, что он использует размеры изображения, ранее определенные 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.Поскольку все изменения размеров изображения будет создана в процессе загрузки, единственное, что осталось сделать, это создать массив, содержащий URL-адреса из доступных изображений различных размеров, а также их размеры.Этот массив затем фильтруется, чтобы удалить размеры изображения с соотношением сторон, которые не соответствуют отношение полноразмерным изображением .
Массив создается вызовом wp_get_attachment_image_src() функцию и хранения результатов.В то же время, мы используем wp_get_attachment_metadata(), чтобы получить те же результаты, но для каждого возможного изменения изображения.Далее, коэффициент рассчитывается путем умножения ширины каждого изображения в результате высоты исходного изображения, разделенной по ширине исходного изображения в.Если результат совпадает с высоты исходного изображения, а затем изображение будет оттеснена на заключительном массива, который будет возвращен tevkori_get_srcset_array() функцию .
tevkori_get_srcset_string() вызывает функцию tevkori_get_srcset_array() и помещает результат внутри srcset атрибута.Фильтр применяется к image_send_to_editor функции, где регулярное выражение используется, чтобы поместить результат tevkori_get_srcset_string() функции непосредственно после src атрибута в изображении.Тот же самый процесс происходит по признакам образов, с фильтром применяется к post_thumbnail_html функция .
Если размер изображения изменяется в редакторе сообщение, а затем плагин будет обнаружить изменения и обновить srcset значение соответственно.Это гарантирует, что правильное соотношение изображения всегда поддерживается.Чтобы включить эту функцию, мы используем технологию Java подключить в wp.media object …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров