Статьи

Переезд от TimThumb к BFIThumb

Январь 31, 2019

TimThumb долгое время был любимым скриптом изменения размера изображений для авторов тем WordPress. Но с новыми требованиями к отправке WordPress Theme на ThemeForest мы должны попрощаться с TimThumb.

Эта статья научит вас, как перенести ваши темы из TimThumb в новый скрипт изменения размера изображения, который называется BFIThumb .

BFIThumb — это проект с открытым исходным кодом, доступный на GitHub .

Почему мы использовали TimThumb?

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

Вам не нужно было много делать, чтобы это работало, вам просто нужно использовать сценарий TimThumb в качестве атрибута src в теге img и передать ему изображение:

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

WP Image Editor на помощь … Вроде

К счастью для нас, когда WordPress 3.5 был выпущен, он представил класс WP Image Editor . Этот класс имеет несколько основных функций для поворота, обрезки и изменения размера изображений. Теперь у нас есть встроенное изменение размера изображения в WordPress!

Вероятно, одна из лучших функций класса WP Image Editor — это то, что он поддерживает библиотеки GD и ImageMagick (в отличие от TimThumb, который поддерживает только GD). Это означает, что наши темы могут поддерживать больше установок WordPress.

Вот как бы вы использовали класс WP_Image_Editor :

1
2
3
4
5
6
7
// 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 Extended

Редактор изображений WP прост, но нам не хватает наших намерений. Вам, безусловно, нужно будет создать свою собственную функцию-обертку, чтобы вам не приходилось использовать кучу кода каждый раз, когда вы хотите отобразить изображение с измененным размером.

Следует также отметить, что функция wp_get_image_editor принимает только путь к файлу изображения, вам также необходимо добавить в функцию-обертку метод для преобразования его в URL-адрес вашего изображения.

Помимо необходимости создания функции-оболочки, есть несколько недостатков прямой замены TimThumb классом WP_Image_Editor :

  • Он может выполнять только изменение размера, обрезку и сохранение файлов изображений
  • Нет фильтров изображения
  • Нет кэширования изображений
  • Можно только изменить размер изображения вниз, а не вверх
  • Размеры ширины и высоты необходимы для изменения размера
  • Использование отличается от TimThumb

Было бы неплохо, если бы у нас было что-то, включающее функции как класса WP Image Editor, так и TimThumb. Это причина, почему я создал скрипт BFIThumb .

Лучший из обоих миров: BFIThumb

Я хотел бы познакомить вас с новым изменяющим размер изображения BFIThumb . BFIThumb был сделан с учетом этих моментов:

  • Используйте WP_Image_Editor для выполнения манипуляций с изображениями. Использование этого класса WordPress позволяет уменьшить количество ошибок, поскольку большая часть процесса не выполняется нашим собственным кодом. Это означает, что мы также можем обеспечить изменение размера для библиотек GD и ImageMagick.
  • Использование аналогично TimThumb — использование TimThumb идеально, так как вам нужно только изменить атрибут src ваших тегов img . Путь измененного изображения будет возвращен функцией. Это обеспечивает более читаемый код и упрощенное время перехода.
  • Подобные возможности TimThumb — Возможность применять фильтры изображений была одной из привлекательных сторон TimThumb. Поскольку мы хотим простой переход, было бы лучше, если бы некоторые из широко используемых фильтров изображений были все еще доступны.

Как это устроено

  • Скрипт расширяет WP_Image_Editor и добавляет больше функциональности.
  • Реализует более гибкий изменяющий размер, который позволяет изменять размеры только по ширине или высоте. Это особенно полезно в макетах Masonry, вы можете уменьшить ширину изображения при сохранении исходного соотношения высот.
  • Расширенные классы реализуют некоторые фильтры изображений, найденные в TimThumb.
  • Кэширует обработанные изображения в папке загрузки WordPress для быстрой загрузки при будущих загрузках страницы.

Как это использовать

BFIThumb был создан, чтобы быть похожим на использование TimThumb. Основной функцией, которую вам нужно вызвать, является bfi_thumb . Подобно TimThumb, вы будете использовать эту функцию в атрибуте src ваших тегов img . Эта функция принимает URL-адрес изображения вместе с массивом параметров, а затем возвращает URL-адрес обработанного изображения.

Вот основное использование функции, разбитое, чтобы объяснить, что происходит:

01
02
03
04
05
06
07
08
09
10
11
// 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» />»;

Изменить размер и обрезать

Чтобы выполнить изменение размера и обрезку, вам просто нужно ввести необходимые параметры:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// 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 );

Фильтры изображений

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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 );
$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 в вашей следующей теме WordPress? Дайте мне знать, что вы думаете!

35
Share: