Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Искать в статьях
Искать на страницах
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

Долгое время 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" />

Сделав это простое изменение, вы могли:

Hostenko™ — лучший WordPress-хостинг
  • Изменять размер изображения
  • Отрезать часть изображения
  • Применять к изображению фильтры, например ч/б
  • Закэшировать изображения для дальнейшего использования.

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

Почему мы больше не можем использовать 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).

Hostenko™ — лучший WordPress-хостинг

Вот как вы можете использовать класс 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

Hostenko™ — лучший WordPress-хостинг

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

3 комментария

сначала новые
по рейтингу сначала новые по хронологии

Чую, что что-то полезное написано...но куда пихать куски кода не понял :(

Алексей

Было бы неплохо сделать статью, где подробно написано по этапам как и что надо делать... Что писать в function.php и в шаблонах для вывода фотографий...

Отличная статья, добавил в закладки.