Давно хотелось реализовать автоматическое создание миниатюр. Во многих WordPress-шаблонах используются thumb-библиотеки, которые позволяют создавать произвольные миниатюры на основе больших изображений.
Правда в таких библиотеках существует большая проблема безопасности, поскольку миниатюры создаются путем прямого GET-запроса к серверу. Благодаря чему огромное количество взломов WordPress-сайтов было сделано именно через эти библиотеки. Ну и при желании можно легко забить дисковую квоту любого сайта, сформировав множество get-запросов для создания новых миниатюр. Запрос виден прямо в html-коде сайта...
Все эти вопросы очень серьёзны, поэтому при создании своего thumb-скрипта, я полностью отказался от формирования миниатюр из get-запросов. Единственным вариантом создания миниатюры будет явный вызов php-кода. Это полностью закрывает «внешнее воздействие», а с учётом строгой фильтрации входящих данных, делает использование безопасным.
Отмечу, что thumb-библиотека присутствует в MaxSite CMS начиная с версии 0.74.
Общая схема работы
Автоматическое создание миниатюр требуется лишь в некоторых частях шаблона. Самый явный пример - вывод миниатюры записи на главной.
Блогер при редактировании загружает картинку к записи. После копирует адрес изображения в дополнительное мета-поле.
У нас есть стандартное поле «Превью записи», но я его не использую, поскольку оно «заточено» под размер превьюшки 100x100px.
Дальше, в шаблоне в коде вывода записи мы получаем значение мета-поля и скрипт сам автоматом формирует thumb-изображение. На выходе готовый url-адрес.
Тут отмечу один важный момент: исходная картинка может быть совершенно другого размера и пропорций, чем конечная. Изменение размеров происходит разными способами, который указывается в коде шаблона. Есть несколько универсальных, вроде «resize_full_crop_сenter». В этом алгоритме
- исходное изображение анализируется на соотношение высоты к ширине с учётом конечного размера
- определяется по какой стороне будет произведено уменьшение размера, чтобы в конечном изображении не было пустых полей
- производится пропорциональное уменьшение изображения
- производится кроп по центру
Пример использования
Без разницы где и как использовать thumb. Для работы требуется только указать исходное изображение. То есть будет ли это мета-поле и meta.ini, опция или даже явное указание в php-скрипте, не суть важно.
Первым делом нужно подключить thumb.php. Его следует скопировать из каталога shared/stock/thumb.
Подключаем
require_once(getinfo('template_dir') . 'stock/thumb/thumb.php');
Возможно подключения прямо из shared-каталога:
require_once(getinfo('shared_dir') . 'stock/thumb/thumb.php');
Особо отмечу, если используется шаблона на основе share-каталога, как D2, то в нём уже произведено подключение библиотеки thumb.
Дальше нужно указать исходный url-изображения, например:
$img = 'http://сайт/uploads/файл';
Дальше осталось только сгенерировать миниатюру и получить готовый адрес. Сделать это удобно с помощью вспомогательной функции thumb_generate(). Она удобна тем, что позволяет указывать метод уменьшения изображения, а также подставляет картинку-заглушку, если какая-то ошибка с исходным изображением.
if ( $img = thumb_generate( $img, // адрес 205, //ширина 145, //высота getinfo('template_url') . 'images/image-pending.jpg', // если нет 'resize_full_crop_сenter' // тип формирования )) { $img = '<img src="' . $img . '" alt="">'; echo $img; // выводим готовый IMG }
Файл нового изображения будет состоять из исходного имени плюс постфикс.
Например исходное изображение - «my-photo.jpg», конечное будет «my-photo-205-145.jpg». То есть рядом с «my-photo.jpg» появится еще один файл «my-photo-205-145.jpg». При повторном вызове thumb, скрипт проверит наличие «my-photo-205-145.jpg» и не будет создавать файл, если он уже существует.
Цифры 205 и 145 - не что иное, как ширина и высота миниатюры.
Тип формирования миниатюры может быть любым из:
- crop - обрезка
- resize - уменьшение
- resize_crop - уменьшение после обрезка
- crop_center - обрезка по центру
- resize_crop_сenter - уменьшение по ширине, потом обрезка по центру
- resize_h_crop_сenter - аналогично, только по высоте
- resize_full_crop_сenter - аналогично, только автоматом определяется оптимальный вариант
При желании, конечно, доступно и явное выполнение методов формирования. В этом случае код выполнения несколько усложняется, поскольку нужно учесть факт наличия готового изображения после инициализации. Для большинства задач этот код будет лишним, поэтому, тем, кому это действительно требуется, переадресую к thumb.php - в его описании есть рабочие примеры.
PS Если вам интересны статьи по новым возможностям MaxSite CMS, вы можете просто «твитнуть» эту запись. Мне будет понятно, что это кому-то нужно.
Комментариев: 11 RSS
1elle12-08-2012 13:35
Нужно!
Макс, не хотите сделать такую карусель - http://www.agilecarousel.com/flavor_3.htm?
2alexpts12-08-2012 15:44
Хорошая штука )
3Аноним13-08-2012 07:11
Здравствуйте!
Конечно Замечательная штука!
Но блин вы объясняете, для профи, которые уже знают php и движок, а как же быть простым "Чайникам" которые только учатся, изучают.
Да конечно частично понел, но хотелось бы видеть реальные примеры применения, как где можно подключить, что где нужно править приписать и т.д.
Я вот пытаюсь подрубить миниатюры для главной страницы, чтобы при редактирование постов можно было приписывать картинку
Спс
4Аноним19-08-2012 12:44
Статьи по фишкам MaxSite всегда интересны.
elle, Она уже сделана, берите и встраивайте в свой шаблон, по-умолчанию она не всем нужна.
5JeckDigger10-03-2013 17:32
Как можно изменить цвет заполнения картинки при изменении размера? По дефолту заполняется черным, хотелось бы заполнить белым цветом.
6Денис03-04-2013 12:11
А как вывести изображение записи, используя настройку шаблона в админ-панели?
7Руслан22-06-2013 23:38
Сейчас занимает голову такая задачка:
Хочется автоматизировать процесс создания миниатюр следующим образом: если мета-поле миниатюры записи пустое, то при сохранении записи чтобы это поле автоматически заполнялось путем к первой картинке из контента этой записи (механизм получения этой картинки реализован в плагине similar_post, например).
Думаю эта возможность будет интересна многим.
8Аноним23-06-2013 07:56
Вообще-то получение первой картинки уже давно реализовано в MaxSite CMS. См. mso_get_first_image_url(). Функция в файле шаблонизатора Page_out.
9Руслан23-06-2013 08:18
Спасибо, будем изучать )
10Руслан23-06-2013 13:05
Все, понял, что я напутал все :)
Все заработало! Нужно было так:
11Сергей11-01-2016 15:30
Подскажите, как указать размер для миниатюры, что бы ширина и вы width="" и height="" отображались в исходном коде страницы?