Забудьте про TimThumb. Використовуйте BFIThumb!

Довгий час TimThumb серед розробників тем оформлення вважався найкращим скриптом зміни розмірів зображень. Але з появою нових вимог до тем WordPress на ThemeForest нам доведеться попрощатися з TimThumb. BFIThumb – новий проект з відкритим кодом, який доступний на GitHub, і про який йтиметься далі.

Чому ми використали TimThumb

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

Вам не потрібно було особливо намагатися, щоб привести в його дію - потрібно було просто використовувати скрипт TimThumb як атрибут SRC у вашому тегу img і передати йому зображення:

<img alt="" src="http://mysite.com/mytheme/timthumb.php?src=cool_image.jpg" />

Зробивши цю просту зміну, ви могли:

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

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

Чому ми більше не можемо використовувати TimThumb

Основна причина - велика дірка в безпеці TimThumb, яка була виявлена ​​у версії 1.10. Двома словами, була дірка, яка дозволяла запустити шкідливий код на серверах зі скриптом TimThumb.

З цієї причини було зламано багато веб-сайтів. І хоча в наступних версіях TimThumb це було виправлено, багато людей навіть не знали про цю дірку до моменту, коли було вже запізно. А оновити теми чи скрипти TimThumb до виправленої версії мали саме автори тем та власники сайтів.

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

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

Загалом, швидше за все, краще використовувати функцію WordPress для зміни розмірів зображень.

Так що нам потрібно прибрати TimThumb з наших WordPress тем. Як мінімум з однієї очевидної причини TimThumb не дозволено новими вимогами до додавання тем.

WP Image Editor – наш порятунок! Начебто як...

На щастя, у релізі WordPress 3.5 було представлено клас WP Image Editor. Цей клас має деякі основні функції по повороту, відрізанню та зміні розмірів зображень. Тепер у нас є все це, вбудоване у WordPress!

Напевно, найкраща можливість класу WP Image Editor – підтримка бібліотек GD та ImageMagick (на відміну від TimThumb, що підтримує лише GD).

Ось як ви можете використовувати клас WP_Image_Editor :

// Return an implementation that extends WP_Image_Editor
$image = wp_get_image_editor( 'cool_image.jpg' );
 
if ( ! is_wp_error( $image ) ) {
    $image->resize( 400, 300, true );
    $image->save( 'new_image.jpg' );
}

Розширений редактор WP Image Editor

WP Image Editor - простий, але його обмаль. Вам потрібно буде створити власну функцію, щоб не використовувати купу коду кожного разу, коли ви хочете вивести змінене зображення.

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

Крім необхідності створення власної функції, є деякі недоліки у простій заміні TimThumb на клас WP_Image_Editor:

• Він може робити лише зміну розміру, обрізання та збереження файлів зображень
• Немає фільтрів
• Немає кешування зображень
• Тільки зменшення зображень (немає збільшення)
• Для зміни розміру потрібні значення і ширини, і висоти
• Спосіб використання відрізняється від TimThumb

Найкраще з двох світів: BFIThumb

Хочу представити вам новий скрипт під назвою BFIThumb, Він був створений з урахуванням наступного:

• Використання WP_Image_Editor для маніпуляцій із зображеннями - використання класу WordPress означає менше багів, оскільки задіяно менше роботи нашого власного коду. А це означає, що ми можемо робити зміни і для бібліотеки GD, і для ImageMagic.
• Управління аналогічне TimThumb — використання TimThumb ідеальне, оскільки вимагає зміни лише атрибута src вашого тегу img. Шлях до зміненого зображення буде повернуто функцією. Таким чином, код буде більш читаним, а перехід швидше.
• Можливості подібні до TimThumb — одна з головних переваг TimThumb — застосування фільтрів. Оскільки нам потрібен простий перехід, було б добре, щоб деякі фільтри були доступні.

Як він працює

• Скрипт розширює WP_Image_Editor та додає більше можливостей.
• Використовується більш гнучка зміна зображень лише за шириною або висотою. Це особливо зручно для розмітки на кшталт Pinterest (Masonry), ви можете зменшувати зображення зі збереженням пропорцій.
• Розширені класи включають деякі фільтри з TimThumb.
• Кешування зображень у папці завантажень WordPress для швидшого завантаження сторінки в майбутньому.

Як його використовувати

BFIThumb використовується як TimThumb. Головна функція, яку вам потрібно буде викликати bfi_thumb. Подібно до TimThumb, ви будете використовувати цю функцію як атрибут SRC ваших тегів img. Ця функція отримує URL зображення разом із масивом параметрів, а потім повертає URL обробленого зображення.

Ось базове використання функції:

// Include the library
require_once( 'BFI_Thumb.php' );
 
// Our parameters, do a resize
$params = array( 'width' => 400, 'height' => 300 );
 
// Get the URL of our processed image
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Print out our img tag
echo "<img alt="" src="$image" />";

Зміна розмірів та обрізка

Щоб змінити розмір зображення або обрізати його, потрібно лише внести необхідні параметри:

// Resize by width only, the height will adjust to the correct ratio
$params = array( 'width' => 400 );
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Resize by height only, the width will adjust to the correct ratio
$params = array( 'height' => 300 );
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Resize by width and height and crop
$params = array(
    'width' => 400,
    'height' => 300,
    'crop' => true
);
$image = bfi_thumb( 'URL-to-image.jpg', $params );

Фільтри

Фільтри дуже корисні, при правильному використанні можуть додати ефект ваших тем. Наприклад, фільтр відтінках сірого використовується для створення чорно-білих зображень, які стають кольоровими під час наведення.

Я також використав фільтр помутніння, коли мені потрібно створити непрозоре зображення фону нечітким, щоб показати фоновий колір.

// Grayscale
$params = array( 'grayscale' => true );
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Colorize
$params = array( 'color' => '#ff0000' );
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Negate
$params = array( 'negate' => true );
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Change opacity (makes your image into a PNG)
$params = array( 'opacity' => 80 ); // 80% opaque
$image = bfi_thumb( 'URL-to-image.jpg', $params );
 
// Multiple parameters
$params = array(
    'width' => 400,
    'height' => 300,
    'grayscale' => true,
    'colorize' => '#ff0000'
);
$image = bfi_thumb( 'URL-to-image.jpg', $params );

Висновок

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

Сподіваюся, цей невеликий скрипт допоможе вам з відходом від TimThumb.

Що ви використовуєте як заміну TimThumb? Чи використовуватимете BFIThumb? Розкажіть про це у коментарях!

Джерело: wp.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/