Адаптивные изображения WordPress без проблем

Опубликовано: 27.05.2017

видео Адаптивные изображения WordPress без проблем

Основы и эволюция адаптивной вёрстки

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 делать это за нас.

rss