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

Від автора: Якщо перед вами, як і переді мною стоїть завдання створити чуйний сайт, який відносно легко оновлювати, WordPress найчастіше буде вашим вибором в плані CMS. Якщо ви, як і я, відмовилися від підтримки чуйних зображень на користь легкості роботи того, хто буде оновлювати сайт. На щастя, з допомогою всього декількох рядків PHP коду і небагато коду на JavaScript, ви тепер можете додати автоматичну підтримку чуйних зображень на вашому сайті WordPress.

Переклад виконала: Валерія Заруцька Мене звуть Валерія, я живу в Києві. Перекладач в минулому, зараз я фронт-енд розробник. Непогано володію HTML5 і CSS3, Twitter bootstrap, адаптивної версткою, працюю з jQuery, активно вивчаю чистий JavaScript, маю уявлення про MVC фреймворках, зокрема Ruby on Rails.

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

Розмітка, яку ми хочемо отримати в кінці

Тут ми будемо використовувати бібліотеку Picturefill. Поки ми будемо використовувати ту розмітку, яку пропонує бібліотека, тобто максимально наближену до елемента picture, який незабаром з’явиться.

Надалі ми можемо оновити цей код, щоб він використовував синтаксис picture, коли Pictrefill буде готова до подібного. Чого ми робити не збираємося, так це використовувати дану розмітку безпосередньо в постах блогу, ми збираємося налаштування WordPress так, щоб він допомагав нам у цьому.

Тема

Всі зміни, що вам потрібно зробити в темі, це додати в файл functions.php наступний рядок коду:

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’);

Це забезпечить завантаження цієї 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 має масу параметрів, які ви можете змінювати. Коли я завантажив фото кролика в JPG розміром 1024х768, склалося безліч версій:

Зображення розміром 936х702 було створено тому, що ми поставили зображення з максимальною висотою в 702 пікселя. А зображення 150х150 було створено тому, що WordPress автоматично створює прев’ю цього розміру.

Створення ярлика

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

[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[] =’‘;
}
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 розмір за замовчуванням
“. wp_get_attachment_image($imageid, $size2) . ‘
‘;
}
add_shortcode(‘responsive’, ‘responsiveShortcode’);

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

[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);

Тепер виділення і додавання зображення з редактора буде працювати наступним чином:

Все готово! Тут ви можете побачити, як це все працює:

Що можна зробити ще

Ось репозиторій на Github, якщо ви хочете взяти участь.