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

19

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

Адаптивні зображення під 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:

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

Додавання бібліотеки

Додайте його в чергу:

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, склалося безліч версій:

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

Зображення розміром 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);

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

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

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

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

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

Якщо ви хочете розширену підтримку, спробуйте встановити також Matchmedia.js. Ця бібліотека забезпечить підтримку @media запитів в старих браузерах, що автоматично змусить працювати Picturefill.

Замість використання коду ярлика або налаштування виводу медіа завантажувача, ви можете цього добитися за допомогою спеціального поля image допомогою Advanced Custom Fields.

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

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

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