Працюємо з завантажуваними зображеннями в WordPress

Якщо ви завантажуєте зображення за допомогою Add Media (кнопка «Додати Медіафайл») в редакторі публікацій, або безпосередньо в бібліотеці мультимедіа через Медіафайли > Додати (Media > Add New), WordPress автоматично створює кілька копій зображення під час процесу завантаження, і поміщає ці копії на вашому сервері в папку wp-content/uploads/ (якщо в налаштуваннях вказане сортування медіа, то тоді система поміщає їх окремо в папки по роках і/або місяцях). Ці копії відрізняються один від одного, і від початкового зображення назвою і роздільною здатністю. Наприклад, ви завантажуєте зображення, яке називається fotka01.jpg, тоді на виході ви отримаєте додаткові, нові файли: fotka01-100х100.jpg, fotka01-300х300.jpg, fotka01-250х250.jpg, fotka01-1024х1024.jpg і т.д.

Звідки вони беруться і для чого потрібні?

Вони беруться з налаштувань, про які нижче, а потрібні для візуального супроводу публікації. Ці копії картинок називаються Featured Images (Популярні або Вибрані зображення).

Ось деякі приклади використання Featured Images:

  • Популярні зображення можуть з’являтися у вигляді мініатюрок з посиланням на пост на головній сторінці блогу;
  • Популярні зображення можуть з’являтися над/під заголовком запису на сторінці конкретної публікації;
  • Популярні зображення можуть відображатися у вигляді мініатюрок з посиланням на пост в різного роду слайдерах і віджетах.

Види Featured Images

Це можуть бути зображення з наступними налаштуваннями:

  • Розмір Мініатюри (Thumbnail)
  • Середній розмір
  • Великий розмір
  • Вихідне зображення, якщо воно більше, ніж Великий розмір

Налаштування цих розмірів зображення встановлюються в Консолі: Налаштування > Медіафайли і, за замовчуванням, встановлюються таким чином:

  • Розмір Мініатюри становить: 150х150px (з функцією обрізки, яку розглянемо нижче)
  • Середній Розмір: Максимальна ширина 300px, Максимальна висота 300px
  • Великий розмір: Максимальна ширина 1024px, Максимальна висота 1024px

Налаштування розмірів зображення

Розуміння опції розміру медіафайлів

WordPress використовує два способи зміни розміру зображень – метод “груба обрізка“, і метод “м’яка обрізка” (або метод «зміна розміру блоку»). Для отримання Середнього і Великого розміру зображень використовується метод “м’якої обрізки”, який передбачає, що зображення «розтягується» до найбільшої сторони (горизонтальної або вертикальної), а потім поміщається всередину “коробки”, визначеної налаштуваннями “Максимальна ширина” і “Максимальна висота”.

М’яка обрізка. Припустимо, що ви завантажуєте зображення розмірами 600х600px, і буде створено зображення Середнього розміру (300х300px). В даному випадку зображення не втратить своїх характеристик через дотримання співвідношення сторін 1:1. Однак, якщо вихідне зображення буде 300px в ширину і висотою в 600px, а найбільшим розміром в даному випадку є висота, зображення спочатку «розтягнеться» по ширині до 600px, а потім буде обрізане до розмірів 300х300px. Іншими словами, вихідне зображення спотворюється, поки не впишеться в «коробку» 300х300px.

Метод «грубої обрізки» (або «жорсткої обрізки») полягає в тому, що WordPress обрізає зображення до жорстко заданих розмірів, і без додаткових маніпуляцій.

Технічна сторона питання

Популярні зображення – це вбудована можливість в Вордпресі. Для користувацького налаштування такої можливості, ця функція повинна бути підключена у вашій темі, через додавання коду у файлі functions.php:

add_theme_support ('post-thumbnails');

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

add_image_size ($name, $width, $height, $crop);

Після того, як ви додали цю функцію, нові розміри зображення будуть створюватися додатково із зображеннями за замовчуванням в процесі завантаження медіа.

Налаштування функції

  • $name: унікальне ім’я для розміру зображення, наприклад, “small-thumb”, або “single-post-thumb” або щось подібне
  • $width: ширина зображення в пікселях
  • $height: висота зображення в пікселях
  • $crop: метод обробки – true, щоб задіяти “жорстку обрізку”, або false – для “м’якої обрізки”.

Наприклад, щоб задати новий розмір зображення під назвою “small-thumb”, розміром в 160х160px, і для обробки застосувати “грубу обрізку”, використовуйте наступний код у файлі functions.php вашої теми:

add_image_size ('small-thumb', 160, 160, true);

І, звичайно, ніщо не заважає вам додавати кілька розмірів зображення, кожен з яких буде використовуватися в різних частинах сайту, наприклад:

add_image_size ('slider-thumb', 180, 180, true);
add_image_size ('single-post-thumb', 275, 75, false);
add_image_size ('archive-thumb', 300, 150, true);
add_image_size ('special-thumb', 279, 133, true);

Як видно з наведених вище прикладів, є додаткова можливість більш тонко налаштовувати картинки на вашому блозі (або іншому типі сайту на Вордпресі), щоб домогтися бажаного результату.

Як наказати WordPress не створювати копії Featured Images за замовчуванням?

Якщо ви хочете використовувати в темі свої налаштування розмірів зображень, а налаштування за замовчуванням вас не влаштовують, – ви можете їх відключити. Щоб зображення з розмірами за умовчанням не створювалися в процесі завантаження, додайте наступний код у файл functions.php вашої теми:

function sgr_filter_image_sizes( $sizes) {
  
 unset( $sizes['thumbnail']);
 unset( $sizes['medium']);
 unset( $sizes['large']);
 
 return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'sgr_filter_image_sizes');

Також можна домогтися того, щоб кількість зображень не росла як гриби, зайшовши через Консоль в: Налаштування – Медіафайли і встановити значення розмірів зображень як 0х0.

Tags: WordPress

Recent Posts

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020

Футбольний Інстаграм – що нового у топових футболістів

Деякі відомі футболісти ретельно приховують свої особисте життя, а інші – активно постять фотографії з… Read More

24/08/2020

Види та типи компресійних панчіх

Вироби називають компресійними, коли їх застосовують для лікування, а також профілактики порушень кровотоку в нижніх… Read More

22/08/2020

Як правильно замінити оливу у двотактному гідроциклі?

Гідроцикли – це класний плавзасіб, який може подарувати вам незліченні години приємного проведення часу на… Read More

19/08/2020