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

Дата публикации: 2014-05-30

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

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

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

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

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

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

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

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
  <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
  <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
  <!—Поддержка браузеров с отключенным JavaScript. Тот же img src как в изначальном изображении -->
  <noscript>
    
  </noscript>
</span>

<!—Поддержка браузеров с отключенным JavaScript. Тот же img src как в изначальном изображении -->

</noscript>

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

Тема

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

add_theme_support('post-thumbnails');

1	add_theme_support('post-thumbnails');

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

Плагин

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

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

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

function get_picturefill() {
  wp_enqueue_script('picturefill', plugins_url( '/js/picturefill.js', __FILE__ ));
}
add_action('init', 'get_picturefill');

function get_picturefill() {

wp_enqueue_script('picturefill', plugins_url( '/js/picturefill.js', __FILE__ ));

}

add_action('init', 'get_picturefill');

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

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

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

add_image_size('large-img', 1000, 702);
add_image_size('medium-img', 700, 372);
add_image_size('small-img', 300, 200);

add_image_size('large-img', 1000, 702);

add_image_size('medium-img', 700, 372);

add_image_size('small-img', 300, 200);

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

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

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

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

[responsive imageid="12" size1="0" size2="500" size3="1000"]

1	[responsive imageid="12" size1="0" size2="500" size3="1000"]

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

function getPictureSrcs($image, $mappings) {
  $arr = array();
  
  // Цикл обрабатывает все изображения и сохраняет их в переменную php, в которой каждый размер соответствует заданному типу. Распределение происходит позднее.
  foreach ($mappings as $size => $type)
  {
    //  мы используем'wp_get_attachment_image_src();' чтобы получить загруженное изображение
    $imageSrc = wp_get_attachment_image_src($image, $type);
    $arr[] ='<span data-src="'. $imageSrc[0] . ' "data-media="(min-width:'. $size .'px)"></span>';
  }
  return implode($arr);
}
  
// Включаем [responsive] ярлык
function responsiveShortcode($atts) {

  extract(shortcode_atts(array(
  // В этом массиве, мы создаем параметр, который будет передан коду тэга ярлыка 
    'imageid'    => 1,
    // Здесь вы можете добавить больше размеров для брэйкпойнтов ваших ярлыков. Текущие значения будут использованы по умолчанию, но в коде ярлыка их можно переназначить
    'size1' => 0,
    'size2' => 600,
    'size3' => 1000,
  ), $atts));

  // Здесь мы назначим распределение для переменных, чтобы можно было задавать любые размеры в ярлыке 
  $mappings = array(
    $size1 => 'small-img',
    $size2 => 'medium-img',
    $size3 => 'large-img'
  );

  // Затем мы передаем функцию и выводим тэг разметки отзывчивых изображений, с включением переменных из ярлыка
  return 
    '<span data-picture>'
      . getPictureSrcs($imageid, $mappings) .
      // тэг noscript содержит изначальное изображение для старых браузеров и тех, что не поддерживают JavaScript и мы используем 2 как размер по умолчанию
     '<noscript>' . wp_get_attachment_image($imageid, $size2) . '</noscript>
    </span>';
}
add_shortcode('responsive', 'responsiveShortcode');

function getPictureSrcs($image, $mappings) {

$arr = array();

// Цикл обрабатывает все изображения и сохраняет их в переменную php, в которой каждый размер соответствует заданному типу. Распределение происходит позднее.

foreach ($mappings as $size => $type)

{

// мы используем'wp_get_attachment_image_src();' чтобы получить загруженное изображение

$imageSrc = wp_get_attachment_image_src($image, $type);

$arr[] ='';

}

return implode($arr);

}

// Включаем [responsive] ярлык

function responsiveShortcode($atts) {

extract(shortcode_atts(array(

// В этом массиве, мы создаем параметр, который будет передан коду тэга ярлыка

'imageid' => 1,

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

'size1' => 0,

'size2' => 600,

'size3' => 1000,

), $atts));

// Здесь мы назначим распределение для переменных, чтобы можно было задавать любые размеры в ярлыке

$mappings = array(

$size1 => 'small-img',

$size2 => 'medium-img',

$size3 => 'large-img'

);

// Затем мы передаем функцию и выводим тэг разметки отзывчивых изображений, с включением переменных из ярлыка

return

''

. getPictureSrcs($imageid, $mappings) .

// тэг noscript содержит изначальное изображение для старых браузеров и тех, что не поддерживают JavaScript и мы используем 2 как размер по умолчанию

'<noscript>' . wp_get_attachment_image($imageid, $size2) . '</noscript>

';

}

add_shortcode('responsive', 'responsiveShortcode');

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

[responsive imageid="12"]

1	[responsive imageid="12"]

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

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

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

function responsive_insert_image($html, $id, $caption, $title, $align, $url) {
  return "[responsive imageid='$id' size1='0' size2='600' size3='1000']";
}
add_filter('image_send_to_editor', 'responsive_insert_image', 10, 9);

function responsive_insert_image($html, $id, $caption, $title, $align, $url) {

return "[responsive imageid='$id' size1='0' size2='600' size3='1000']";

}

add_filter('image_send_to_editor', 'responsive_insert_image', 10, 9);

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

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

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

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

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

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

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

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

Автор: Tim Evko

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

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

Метки: wordpress, Адаптивные изображения, плагин