Автоматическое создание миниатюр в MaxSite CMS

Давно хотелось реализовать автоматическое создание миниатюр. Во многих 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.webp', // если нет
	'resize_full_crop_сenter' // тип формирования
	))
{
	$img = '<img src="' . $img . '" alt="">';
	
	echo $img; // выводим готовый IMG
}

Файл нового изображения будет состоять из исходного имени плюс постфикс.

Например исходное изображение - «my-photo.webp», конечное будет «my-photo-205-145.webp». То есть рядом с «my-photo.webp» появится еще один файл «my-photo-205-145.webp». При повторном вызове thumb, скрипт проверит наличие «my-photo-205-145.webp» и не будет создавать файл, если он уже существует.

Цифры 205 и 145 - не что иное, как ширина и высота миниатюры.

Тип формирования миниатюры может быть любым из:

• crop - обрезка
• resize - уменьшение
• resize_crop - уменьшение после обрезка
• crop_center - обрезка по центру
• resize_crop_сenter - уменьшение по ширине, потом обрезка по центру
• resize_h_crop_сenter - аналогично, только по высоте
• resize_full_crop_сenter - аналогично, только автоматом определяется оптимальный вариант

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

PS Если вам интересны статьи по новым возможностям MaxSite CMS, вы можете просто «твитнуть» эту запись. Мне будет понятно, что это кому-то нужно.