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

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

От автора: Если перед вами, как и передо мной, стоит задача создать отзывчивый сайт, который относительно легко обновлять, WordPress чаще всего будет вашим выбором в плане CMS. Если вы, как и я, отказались от поддержки отзывчивых изображений в пользу легкости работы того, кто будет обновлять сайт. К счастью, с помощью всего нескольких строчек PHP кода и немногого кода на JavaScript, вы теперь можете добавить автоматическую поддержку отзывчивых изображений на вашем WordPress сайте.

автор

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

Сейчас я покажу вам, как добавить поддержку отзывчивых изображений на ваш WordPress сайт с помощью небольшого плагина.

Разметка, которую мы хотим получить в конце

Здесь мы будем использовать библиотеку Picturefill. Пока мы будем использовать ту разметку, которую предлагает библиотека, т.е. максимально приближенную к элементу picture, который вскоре появится.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

В дальнейшем мы можем обновить этот код, чтобы он использовал синтаксис picture, когда Pictrefill будет готова к подобному. Чего мы делать не собираемся, так это использовать данную разметку непосредственно в постах блога, мы собираемся настроить WordPress так, чтобы он помогал нам в этом.

Тема

Все изменения, которые вам нужно сделать в теме, это добавить в файл functions.php следующую строчку кода:

Таким образом, тема даст WordPress разрешение изменять размер загруженных картинок. Без этого кода плагин не будет работать.

Плагин

Имеет смысл вносить подобные изменения в качестве плагина, чтобы они были активны вне зависимости от активной темы. Мы можем создать папку с PHP файлом внутри, который и будет являться кодом плагина, и копией библиотеки Picturefill:

Добавление библиотеки

Добавьте его в очередь:

Это обеспечит загрузку этой JavaScript библиотеки на фронтэнде WordPress.

Определение размеров

Сообщите WordPress изображения каких размеров вы хотите создать при загрузке:

Вы можете задать любые размеры, какие хотите. Метод add_image_size имеет массу параметров, которые вы можете изменять. Когда я загрузил фото кролика в JPG размером 1024х768, создалось множество версий:

Изображение размером 936х702 было создано потому, что мы задали изображение с максимальной высотой в 702 пикселя. А изображение 150х150 было создано потому, что WordPress автоматически создает превью этого размера.

Создание ярлыка

Давайте расширим этот плагин, добавив немного настоящего функционала, создав ярлык для отзывчивых картинок. Следующий код вы можете поместить непосредственно в контент поста:

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

и он сгенерирует разметку, необходимую библиотеке Picturefill. Мы разделим этот код на две функции. Одна для определения ярлыка и HTML кода, который должен быть сгенерирован. Вторая для создания цикла и вывода исходников изображений.

В идеале, вам нужно определить брейкпойнты непосредственно в плагине и не передавать их в коде ярлыка, вот так:

Тогда вы будете использовать атрибуты в коде ярлыка в тех редких случаях, когда нужно заменить их значения.

Изменение интерфейса медиа загрузчика

Этот код будет весьма полезен (помните, что мы можем программно изменить разметку так, чтобы она походила в будущем на правильный синтаксис picture). Но как мы узнаем ID изображения? Интерфейс медиа загрузчика не показывает эту информацию. Но ему известен ID и, с помощью несложного фильтра, мы можем изменить то, что отображается в редакторе:

Теперь выделение и добавление изображения из редактора будет работать следующим образом:

Все готово! Здесь вы можете увидеть как это все работает:

Что можно сделать еще

Если вы хотите расширенную поддержку, попробуйте установить также Matchmedia.js. Эта библиотека обеспечит поддержку @media запросов в старых браузерах, что автоматически заставит работать Picturefill.

Вместо использования кода ярлыка или настройки вывода медиа загрузчика, вы можете этого добиться с помощью специального поля image посредством Advanced Custom Fields.

Вы можете изменить разметку, чтобы позволить выравнивание, как это делается в WordPress. Или с помощью элементов figure и figcaption. Также добавлять атрибут alt к тэгам.

Вы можете сделать настройки брэйкпойнтов доступными в интерфейсе, а не задаваемыми непосредственно в коде плагина.

Вот репозиторий на Github, если вы хотите поучаствовать.

Автор: Tim Evko

Источник: http://css-tricks.com/

Редакция: Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree