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

Додаткові розміри мініатюр завантажуються картинок в WordPress

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

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

Реєстрація додаткових розмірів зображень для теми

Перш ніж почати розміщувати зменшені зображення, у файл functions.php необхідно додати наступний код:

add_theme_support (‘post-thumbnails’);

Цей рядок включить підтримку мініатюр постів (на сторінці редагування поста з’явиться новий мета блок «мініатюра поста»). Після включення підтримки мініатюр з’являється можливість реєструвати додаткові розміри зображень за допомогою функції add_image_size (). Її синтаксис наступний: add_image_size ($ name, $ width, $ height, $ crop); Повний опис функції дивіться за посиланням вище.

Приклади коду:

// Hard Crop — жорстка обрізка add_image_size (‘sidebar-thumb’, 120, 120, true);

// Soft Crop — м’яка обрізка add_image_size (‘homepage-thumb’, 220, 180);

// Unlimited Height — без обмеження по висоті add_image_size (‘singlepost-thumb’, 590, 9999);

Тут видно, що ми вказали три різних типи обрізки — hard crop, soft crop, unlimited height (жорстка, м’яка і без обмежень по висоті). Давайте тепер розглянемо їх докладніше, з’ясуємо, як їх використовувати і які у кожному випадку є переваги.

Hard Crop (жорстка обрізка)

У списку параметрів після Розмір має значення ‘true’. Таким чином WordPress дається команда створювати копію оригіналу точно по зазначених розмірах, в даному випадку 120 на 120. Цей метод ми часто використовуємо при створенні тим, щоб бути впевненими, що все буде пропорційно і дизайн не розвалиться. Ця функція автоматично обрізає зображення або по горизонталі, або по вертикалі — залежно від пропорцій вихідної картинки, так щоб підсумкова картинка була точно зазначених розмірів.

Недолік даного методу в тому, що немає можливості контролювати, яка саме частина зображення виявиться відрізаною. Втім, коли ви завантажили зображення, але ще не розмістили його у пості, ви можете натиснути на ‘Редагувати картинку (edit image)’ і там змінювати копії або все зображення — масштабувати, обертати, відображати і точно вибирати для іконок показані на них частину всієї картинки.

Soft Crop (м’яка обрізка)

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

Unlimited Height (без обмежень по висоті)

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

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

Тепер, коли у вас є функціонал для створення картинок бажаного розміру, давайте подивимося, як можна їх виводити в темі WordPress. Якщо створюваний розмір картинки мається на увазі використовувати, щоб виводити його як мініатюру поста, то для поста повинна бути встановлена ​​мініатюра, а у файлі теми (всередині циклу) вставимо таку строчку:

?php the_post_thumbnail (‘singlepost-thumb’); ?

Тут, ‘singlepost-thumb’ ця назва доданого нами розміру.

Якщо потрібно отримати мініатюру не всередині циклу і не картинку зазначену як «Мініатюра поста» при публікації поста. А потрібно отримати потрібну мініатюру будь картинки завантаженої в медіатеку WordPress, то можна використовувати функцію wp_get_attachment_image (), для якої потрібно буде вказати ID картинки, мініатюру якої нам потрібно отримати:

echo wp_get_attachment_image (42, ‘category-thumb’);

Тут, ‘category-thumb’ — це назва розміру мініатюри, а 42 ID картинки в медіатеці WordPress.

Перегенерація зображень додаткових розмірів

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

Натисніть на кнопку Regenerate Thumbnail (http://wordpress.org/extend/plugins/regenerate-thumbnails/), і нехай плагін робить свою справу.

Інший плагін, який може виконувати те ж саме, називається Simple Image Sizes (http://wordpress.org/extend/plugins/simple-image-sizes/).

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

Тепер коли ми навчилися використовувати зображення додаткових розмірів в темі, зовсім не завадило б розширити можливості. Адже у нас тепер є додаткові розміри зображення, крім стандартних: «мініатюра», «середній розмір», «великий розмір», один з яких ми можемо вибрати при написанні поста. Чому не дозволити авторові використовувати всі додаткові розміри? Цього можна домогтися за допомогою плагіна Simple Image Sizes.

Після його установки і активації, на сторінці Налаштування »Медіафайли з’являться нові опції — список розмірів, визначених у вашій темі. Все, що потрібно зробити, — відзначити «Показувати при вставці в пост» (Show in post insertion).

Тепер для автора доступні додаткові розміри картинок, які можна зручно вставляти в пости. Зверніть увагу: автори можуть використовувати всі розміри, які визначені в темі.

Плагін Simple Image Sizes дозволяє також створювати кастомних розміри картинок безпосередньо через панель управління WordPress (Медіафайли).

Без плагіна

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

add_filter (‘image_size_names_choose’, ‘my_custom_sizes’);

function my_custom_sizes ($ sizes) {return array_merge ($ sizes, array (‘category-thumb’ = ‘Назва розміру’,)); }

Тут, ‘category-thumb’ розмір який ми додаємо і назва для нього.

Сподіваюся, що описані методи знайдуть застосування в практиці розробників WordPress. А ви як думаєте?

Автор: Тимур Камаєв.