Забудьте о 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 используется для создания черно-белых изображений, которые становятся цветными при наведении.

Я также использовал фильтр opacity, когда мне нужно создать непрозрачное фоновое изображение нечетким, чтобы показать фоновый цвет.

// 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/