Адаптивные изображения WordPress без проблем
Опубликовано: 27.05.2017
WordPress имеет встроенную систему загрузки медиафайлов. Когда вы загружаете изображение, система автоматически создает и сохраняет его различные версии. Эта статья покажет нам, как мы можем настроить и использовать эту функцию, чтобы помочь нам с адаптивными изображениями.
Если вы похожи на меня, и хотите настроить адаптивный сайт, который относительно легко обновлять, WordPress является наиболее подходящей для этого CMS .
Если вы думаете совсем так же, как я, вы, возможно, не обращаете внимания на промежуточные адаптивные решения для изображений, отдавая предпочтение возможности сразу загружать адаптивные изображения. К счастью, с помощью нескольких строк PHP и JavaScript , теперь вы можете добавить на свой WordPress сайт функционал автоматических адаптивных изображений.
Изображения в модальном окне WordPress.
Я покажу вам, как добавить поддержку адаптивных изображений на свой сайт в виде небольшого плагина WordPress .
Мы будем использовать библиотеку Picturefill . На текущий момент мы используем разметку, предполагаемую библиотекой, которая точно имитирует готовящийся к релизу элемент <picture>.
<picture> <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/large.jpg" media="(min-width: 800px)"> <source srcset="examples/images/medium.jpg"> <!-- резервный вариант --> <img srcset="examples/images/medium.jpg" alt="alt text"> </picture>Это общий шаблон разметки, хотя она может стать немного сложнее , чтобы учитывать некоторые ошибки браузеров.
Чего мы точно не будем делать, это использовать эту разметку непосредственно в блоге, мы хотим заставить сам WordPress делать это за нас.