Налаштувати розміри картинок у Wordpress.

за Ніколаєнко Максим · Опубліковано Вересень 11, 2012 · Оновлено Серпень 27, 2020

Зміст приховати

2 Функція реєстрації додаткових розмірів зображення

3 Приклади використання функції add_image_size:

3.1 Як відновити додаткові розміри зображень

3.2 Використання додаткових розмірів зображень

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

Якщо у вашій темі використовується timthumb.php, то рекомендується його оновити. Останню версію скрипта можна завантажити тут.

Якщо ви вже користуєтеся цим скриптом, то для вас є плагін WordPress, який перевіряє на автоматі нові версії скрипту. Називається плагін “Timthumb Vulnerability Scanner«.

Вбудовані можливості WordPress

Звичайно найкраще використовувати вбудовані можливості WordPress Post Thumbnails (мініатюри записів), також відомою як Рекомендовані зображення. За допомогою вбудованої функції add_image_size() користувач може вказати розміри зображення та обрізати його у разі потреби. У більшості випадків використання базових функцій дозволяє уникнути підключення різних сторонніх скриптів., таких як TimThumb.

Функція реєстрації додаткових розмірів зображення

Реєстрація додаткових розмірів виконується по черзі. Спочатку потрібно додати підтримку мініатюр записів. Робиться це просто - додаємо у файл functions.php теми наступний фрагмент коду:

add_theme_support( 'post-thumbnails' );

1	add_theme_support( 'post-thumbnails' );

Після підключення підтримки мініатюр у файлі функцій, ми зможемо використовувати у своїй темі функцію add_image_size( ‘My-Thumbnail’, width, height, crop mode );. Зазначена функція зможе зареєструвати в Wordpress нові додаткові розміри картинок.

Приклади використання функції add_image_size:

add_image_size( 'sidebar-thumb', 220, 300, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

add_image_size( 'sidebar-thumb', 220, 300, true ); // Hard Crop Mode

add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode

add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

У прикладі ми зареєстрували три різні розміри зображень. Кожен із них визначається своїм режимом:

hard crop (жорстка обрізка);
soft crop (м'яка обрізка);
unlimited height (необмежена висота).

Давайте розглянемо кожен із зареєстрованих нами розмірів зображення окремо.

Режим жорсткого обрізання.

Тут ми поставили значення ‘true', додане після висоти. Це значення повідомляє WordPress про те, що нам необхідно обрізати зображення до жорстко заданих розмірів (у нашому випадку 220х300px).

Зазначений метод нерідко використовується у дизайні, при верстці шаблонів, щоб задати необхідні пропорції. Функція автоматично обріже зображення або fна сторони, або зверху та знизу залежно від його розмірів.

Нестача жорсткої обрізки в тому, що ви не можете керувати тим, яка частина зображення буде виведена на екран. Наприклад, мініатюри можуть бути такими:

Режим м'якої обрізки зображення. Режим м'якого обрізання це режим за замовчуванням. Цей метод змінює розміри зображення пропорційно, не спотворюючи його. Ви швидше за все не зможете отримати заданих розмірів, але зазвичай за основу беруть ширину зображення., а висота для картинки підбирається пропорційно. Мініатюри в даному випадку набудуть наступного вигляду:

Режим необмеженої висоти. Часто необхідно в дизайні використовувати дуже довгі зображення. При виведенні таких картинок треба обов'язково зафіксувати ширину. Як у такому випадку бути з висотою? Жорстка обрізка зображення на сторінці з не дуже підійде. Найпростіший хід – це визначення необхідної ширини, при цьому висота залишається необмеженою, що дозволяє виключити будь-які спотворення при його виведенні. На малюнку нижче можна переглянути приклад:

Виведення додаткових розмірів картинок у темі WordPress

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

<!--?php the_post_thumbnail( 'your-specified-image-size' ); ?-->

1	<!--?php the_post_thumbnail( 'your-specified-image-size' ); ?-->

Код необхідно вставляти у цикл виведення статей!

Цього достатньо, щоб вивести на сторінках сайту додаткові розміри картинок у темі WordPress.

Як відновити додаткові розміри зображень

Якщо ви працюєте з сайтом існуючим давно, швидше за все вам знадобиться відновити розмір додаткових зображень. функція add_image_size() починає генерувати розміри з моменту її підключення до теми і лише так. Таким чином, будь-які зображення, додані до включення цієї функції, матимуть старі розміри. Необхідно відновити розміри картинок, доданих раніше. Це можна зробити за допомогою плагіна Regenerate Thumbnails (альтернатива: Simple Image Sizes).

Використання додаткових розмірів зображень

Просте підключення розмірів зображень до теми не має ніякого сенсу. Автори не можуть використовувати їх при додаванні зображень до запису. Щоб виправити це непорозуміння, достатньо скористатися плагіном Simple Image Sizes.

Після встановлення та активації плагіна з'явиться сторінка з налаштуваннями, на якій знаходиться список усіх доступних розмірів, визначених у темі. Все, що вам знадобиться, це клацнути на прапорець “Show in post insertion” під необхідним розміром.