Долгое время TimThumb среди разработчиков тем оформления считался лучшим скриптом по изменению размеров изображений. Но с появлением новых требований к темам WordPress на ThemeForest нам придется попрощаться с TimThumb. BFIThumb – новый проект с открытым кодом, который доступен на GitHub, и о котором пойдет речь далее.
Почему мы использовали TimThumb
До того, как в WordPress появилась возможность гибкого изменения размеров изображений, единственным вариантом по изменению размеров изображений были сторонние библиотеки типа TimThumb. TimThumb был хорош тем, что у него было много возомжностей, при этом он был прост в использовании.
Вам не нужно было особо стараться, чтобы привести в его действие — нужно было просто использовать скрипт TimThumb в качестве атрибута src в вашем теге img и передать ему изображение:
1 |
Сделав это простое изменение, вы могли:
- Изменять размер изображения
- Отрезать часть изображения
- Применять к изображению фильтры, например ч/б
- Закэшировать изображения для дальнейшего использования.
Эти функции позволяли нам создавать отличные изображения, не привязываясь к маленьким квадратным миниатюрам.
Почему мы больше не можем использовать 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 :
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
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 обработанного изображения.
Вот базовое использование функции:
1 2 3 4 5 6 7 8 9 10 11 | // Include the libraryrequire_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 tagecho "<img alt="" src="$image" />"; |
Изменение размеров и обрезка
Чтобы изменить размер изображения или обрезать его, вам нужно будет только внести необходимые параметры:
1 2 3 4 5 6 7 8 9 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 ); |
Фильтры
Фильтры очень полезны, при правильном использовании могут добавить эффектности вашим темам. Например, фильтр grayscale используется для создания черно-белых изображений, которые становятся цветными при наведении.
Я также использовал фильтр opacity, когда мне нужно создать непрозрачное фоновое изображение нечетким, чтобы показать фоновый цвет.
1 2 3 4 5 6 7 8 9 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 ); // 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
Комментарии к записи: 3
Отличная статья, добавил в закладки.
Было бы неплохо сделать статью, где подробно написано по этапам как и что надо делать… Что писать в function.php и в шаблонах для вывода фотографий…
Чую, что что-то полезное написано…но куда пихать куски кода не понял :(