Как сделать изображения в WordPress отзывчивыми.

Перевод статьиHow To Make WordPress Images Responsive.
Автор статьи: Sebastian Green.

WordPress на самом деле является очень мощной платформой. Процесс создания отзывчивой темы и ее интеграции не так уж сложен, если вы знакомы с основополагающими принципами работы шаблонов. Однако, если говорить об отзывчивых изображениях, то их внедрение в данную систему несколько выходит за рамки базовых навыков работы с ее основными компонентами. Нет, ну вы, конечно же, можете исправить положение, вручную создавая изображение каждого размера, далее вставлять его, также вручную, в исходный код, используя тег элемента изображения и атрибуты srcset. Но такой способ не только заберет у вас массу времени, но и может стать проблемой для некоторых пользователей-администраторов вашего ресурса, которые не очень-то дружат с HTML синтаксисом.

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

Шаг 1. Вносим изменения в functions.php для генерации изображения с другими размерами.

Всегда, когда вы загружаете в систему изображение, оно сохраняется с его родными (исходными) размерами. Кроме того, WordPress автоматически генерирует 3 копии этого изображения с измененными стандартными размерами (высота или ширина могут варьироваться в зависимости от формата картинки):

  1. Thumbnail / Иконка (150 х 150).
  2. Medium / Средний размер (300 x 300).
  3. Large / Крупный размер (1024 x 1024).

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

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

add_image_size( 'sml_size', 300 );
add_image_size( 'mid_size', 600 );
add_image_size( 'lrg_size', 1200 );
add_image_size( 'sup_size', 2400 );

Каждый вызов функции содержит имя создаваемой копии изображения (которое необходимо для идентификации системой) и его ширину. То есть у нас теперь имеются изображения 300, 600, 1200 и 2400 пикселей в ширину. Используемая здесь функция add_image_size способна и на большее. А именно, с ее помощью можно изменять высоту картинки или кадрировать ее, но в нашем примере мы используем эту функцию таким образом, что формат изображения остается неизменным. Мы лишь создаем его копии с разными размерами. Больше информации по функции add_image_size можно найти в WordPress кодексе.

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

Шаг 2. Установка плагина RICG Responsive Images.

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

При добавлении изображения на страницу в WordPress, генерируемый HTML выглядит, как правило, вот так:

<img class="aligncenter wp-image–176 size-full" src="http://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg" alt="App Screenshot">

Сейчас атрибут src ссылается только на одно изображение.

Сразу же после запуска плагина, разметка примет такой вид:

<img class="aligncenter wp-image–137 size-full" src="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg" srcset="http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–169×300.jpg 169w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576×1024.jpg 576w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300×534.jpg 300w, http://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600×1067.jpg 600w, http://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w" alt="onavo" width="600" height="1067" sizes="(max-width: 600px) 100vw, 600px">

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

Используемый здесь плагин включает также реализующий функционал отзывчивых изображений полифил Picturefill.js, который поддерживает как элемент picture, так и новые атрибуты для элемента img, отвечающие за его отзывчивый формат. Все это, включая атрибуты srcset, теперь внедряется в тег элемента-изображения, что и делает картинку отзывчивой.

Ваши изображения превратились в отзывчивые.

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

То есть все изображения теперь реализуются согласно принципам отзывчивых изображений. Пользователи устройств с малыми экранами будут получать уменьшенные изображения, что способствует более быстрой загрузке и экономии сетевых ресурсов. А те из пользователей, чей дивайс позволяет отображать более крупные изображения, получат их полномасштабный вариант, который не будет выглядеть пикселезированным или искаженным по каким-либо другим причинам.

Однако здесь существует одна потенциальная проблема, которая заключается в том, что данная схема работает только с теми изображениями, которые были загружены в систему уже после установки плагина RICG Responsive Images. Если ваш сайт абсолютно новый, то проблемы как бы вообще нет. Но в другом случае, когда вы пытаетесь изменить таким образом способ представления изображений на уже работающем сайте с достаточно большим объемом контента, все размещенные ранее изображения будут фиксированного размера. То есть добавленные в functions.php дополнительные вызовы функции add_image_size не будут применены к уже существующим изображениям, и соответственно их вариаций других размеров просто не существует. Хочу вас успокоить — нет, вам совсем не потребуется заново размещать уже существующие на сайте картинки. Есть другой плагин, который решит и эту проблему.

Шаг 3. Установка регенерирующего новые размеры изображений плагина (опционально).

Плагин Regenerate Thumbnails путем регенерации всех ранее загруженных на сайт изображений добавит их новые копии, размеры которых будут основаны на параметрах, указанных вами при редактировании файла functions.php. Неплохо, да? Этот плагин сэкономит вам кучу времени и сделает всю «грязную» работу всего в один клик.

Плагин достаточно прост в обращении. После его установки перейдите в меню "Tools" — "Regen. Thumbnails" и потом просто нажмите кнопку "Regenerate All Thumbnails". Появится индикатор хода выполнения процесса регенерации и программа сообщит вам, сколько изображений было обработано.

Все! Дело сделано. Теперь изображения вашего сайта будут выводиться корректно с помощью элемента-изображения в соответствии с данными, указанными в атрибуте srcset.

Один комментарий на Как сделать изображения в WordPress отзывчивыми.

  1. Большинство шаблонов для WP по умолчанию придают изображениям адаптивность. Но недавно попалась тема, в которой пришлось применить знания, полученные из этой статьи. Спасибо.

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

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