Обрізання мініатюр у WordPress: повний гайд

Привіт:) У цьому пості детально покажу різні способи обрізання мініатюр WordPress.

Мініатюри (ескізи) можуть стати в нагоді в різних місцях сайту. Наприклад, список усіх публікацій на домашній сторінці блогу. Залежно від теми, ви також можете використовувати їх у змісті посту, списках категорій, тегів, результатів пошуку або навіть віджетів.

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

Коли задаються розміри мініатюр, можна вибрати спосіб обрізання, щоб вони вписувалися у певну частину сторінки. Можливо вам потрібні квадратні або дуже широкі, але вузькі мініатюри. А можливо, хочете, щоб картинки завжди відображалося повністю. Детально розберу, як це зробити.

Оскільки горизонтальні (альбомні) та вертикальні (портретні) фото не завжди обробляються однаково за допомогою однієї і тієї ж функції, у прикладі використовую обидва варіанти:

до змісту ↑

М'яке обрізання

Тут відбувається пропорційна зміна розміру без обрізання, тобто вся область фото зберігається. Мініатюра буде створена за однією з відповідних сторін (зазначеною шириною/висотою). У результаті сторони картинки не точно співпадатимуть із зазначеними розмірами. Цей режим використовується у WordPress за замовчуванням під час завантаження фото через Медіабібліотеку.

Щоб задати розмір зображення у режимі м'якого обрізання, у файл functions.php додайте рядок

add_image_size( 'wordpress-thumbnail', 200, 200, false );

В результаті для горизонтального варіанту ви отримаєте:

Та вертикального:

до змісту ↑

Жорстке обрізання

У цьому випадку зображення строго обрізається згідно із заданими шириною і висотою. У результаті будуть вирізані всі інші частини картинки, які поміщаються у зазначені рамки. Якщо потрібно створити квадратні мініатюри із прямокутних зображень, зробіть ширину та висоту однаковими.

Є два способи задати жорстке обрізання.

1. Відкрийте адмін-розділ Налаштування > Медіафайли, у розділі Розмір мініатюр задайте свої значення та позначте галочкою опцію Обрізати мініатюри до вказаних розмірів (зазвичай мініатюри пропорційні).
2. У файлі functions.php вставте код

add_image_size( 'wordpress-thumbnail', 200, 200, true );

Це виглядатиме так:

Також обрізання можна виконати із зазначенням позицій (X та Y).

до змісту ↑

Використання масиву обрізання

Жорстке та м'яке обрізання — найпоширеніші типи обрізання, які використовуються для мініатюр WordPress. За замовчуванням жорстке фокусується на середині зображення і обрізається однаково з кожного боку зображення в альбомній (горизонтальній) орієнтації або однаково зверху та знизу для портретної (вертикальної).

Але що, якщо потрібно зосередитись на іншій частині зображення? Тут на допомогу приходять режими кадрування за допомогою масиву. З їх допомогою ви вказуєте вісь X (ліворуч, по центру, праворуч) та вісь Y (зверху, по центру, знизу).

Картинка має бути розділена на 9 частин (наприклад, верхній лівий кут, нижній правий кут тощо). Але на практиці це працює не так. Через те, як ВордПрес робить обрізання і намагається заповнити хоча б одну вісь, не всі ці інструкції по осях x і y відносяться до всіх зображень. Тобто відповідні інструкції для горизонтального та вертикального зображень відрізняються.

На практиці замість 9 частин зображення ділиться всього на 3. Актуальність інструкцій по осях x або y залежить від того, в альбомній або книжковій орієнтації зображення.

Обрізання за допомогою масиву недоступна через звичайну панель керування WordPress. Задіяти її можна через функцію add_image_size().

до змісту ↑

Зліва зверху

Фокусування жорсткого обрізання у лівому верхньому кутку:

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );

Для горизонтальної орієнтації:

Вертикальний варіант:

до змісту ↑

Вгорі по центру

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'top' ) );

В результаті для альбомного варіанту:

Портретний:

до змісту ↑

Праворуч вгорі

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'top' ) );

Альбомне зображення:

Портретне:

до змісту ↑

У центрі зліва

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'center' ) );

Для горизонтального:

Вертикального:

до змісту ↑

По центру

Правило працює для центру по вертикалі та горизонталі.

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'center' ) );

Для альбомної:

Портретна:

до змісту ↑

Праворуч у центрі

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'center' ) );

Для альбомного зображення це займає правий бік:

У портретному вибирається центр, що збігається з жорстким обрізанням за замовчуванням:

до змісту ↑

Зліва внизу

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'bottom' ) );

до змісту ↑

У центрі знизу

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'bottom' ) );

Для альбомного варіанту обрізання фокусується у центрі, що збігається з жорстким кадруванням за замовчуванням:

Для портретного:

до змісту ↑

Знизу праворуч

add_image_size( 'wordpress-thumbnail', 209, 209, array( 'right', 'bottom' ) );

По горизонталі:

По вертикалі:

до змісту ↑

Замітки

Якщо ви застосуєте декілька варіантів обрізання мініатюр з однаковими розмірами, то виникне проблема. Назви файлів для нових мініатюр використовують їх розміри, щоб відрізнити від інших розмірів того самого зображення. Але в назвах не вказується тип обрізання. Тому якщо спробуєте додати мініатюру 200x200 з жорстким обрізанням і ще одну з таким самим розміром 200x200 з обрізанням знизу праворуч, то в результаті у вас вийде тільки одна — та, яка буде останньою у списку. Це тому, що ім'я файлу для обох стане приблизно таким:

/files/2021/11/photo-200x200.jpg

Джерело