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

Просмотров: 302Комментарии: 11
MaxSite CMSОбщие вопросы

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

Правда в таких библиотеках существует большая проблема безопасности, поскольку миниатюры создаются путем прямого GET-запроса к серверу. Благодаря чему огромное количество взломов WordPress-сайтов было сделано именно через эти библиотеки. Ну и при желании можно легко забить дисковую квоту любого сайта, сформировав множество get-запросов для создания новых миниатюр. Запрос виден прямо в html-коде сайта...

Все эти вопросы очень серьёзны, поэтому при создании своего thumb-скрипта, я полностью отказался от формирования миниатюр из get-запросов. Единственным вариантом создания миниатюры будет явный вызов php-кода. Это полностью закрывает «внешнее воздействие», а с учётом строгой фильтрации входящих данных, делает использование безопасным.

Отмечу, что thumb-библиотека присутствует в MaxSite CMS начиная с версии 0.74.

Общая схема работы

Автоматическое создание миниатюр требуется лишь в некоторых частях шаблона. Самый явный пример - вывод миниатюры записи на главной.

Пример вывода миниатюры записи

Блогер при редактировании загружает картинку к записи. После копирует адрес изображения в дополнительное мета-поле.

Мета поле для картинки

У нас есть стандартное поле «Превью записи», но я его не использую, поскольку оно «заточено» под размер превьюшки 100x100px.

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

Тут отмечу один важный момент: исходная картинка может быть совершенно другого размера и пропорций, чем конечная. Изменение размеров происходит разными способами, который указывается в коде шаблона. Есть несколько универсальных, вроде «resize_full_crop_сenter». В этом алгоритме

  • исходное изображение анализируется на соотношение высоты к ширине с учётом конечного размера
  • определяется по какой стороне будет произведено уменьшение размера, чтобы в конечном изображении не было пустых полей
  • производится пропорциональное уменьшение изображения
  • производится кроп по центру

Небольшой пример, демонстрирующие варианты создания миниатюр.

Исходное изображение

resize_full_crop_center resize_crop crop_center crop resize resize_crop_center

Пример использования

Без разницы где и как использовать 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/файл';
Обратите внимание, что библиотека будет работать только с изображениями расположенными на своем сайте в (под)каталоге 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 15:35

Нужно!

Макс, не хотите сделать такую карусель - http://www.agilecarousel.com/flavor_3.htm?

3Аноним13-08-2012 09:11

Здравствуйте!

Конечно Замечательная штука!

Но блин вы объясняете, для профи, которые уже знают php и движок, а как же быть простым "Чайникам" которые только учатся, изучают.

Да конечно частично понел, но хотелось бы видеть реальные примеры применения, как где можно подключить, что где нужно править приписать и т.д.

Я вот пытаюсь подрубить миниатюры для главной страницы, чтобы при редактирование постов можно было приписывать картинку

Спс

4Аноним19-08-2012 14:44

Статьи по фишкам MaxSite всегда интересны.

elle, Она уже сделана, берите и встраивайте в свой шаблон, по-умолчанию она не всем нужна.

5JeckDigger10-03-2013 19:32

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

6Денис03-04-2013 14:11

А как вывести изображение записи, используя настройку шаблона в админ-панели?

7Руслан23-06-2013 01:38

Сейчас занимает голову такая задачка:

Хочется автоматизировать процесс создания миниатюр следующим образом: если мета-поле миниатюры записи пустое, то при сохранении записи чтобы это поле автоматически заполнялось путем к первой картинке из контента этой записи (механизм получения этой картинки реализован в плагине similar_post, например).

Думаю эта возможность будет интересна многим.

8Аноним23-06-2013 09:56

Вообще-то получение первой картинки уже давно реализовано в MaxSite CMS. См. mso_get_first_image_url(). Функция в файле шаблонизатора Page_out.

10Руслан23-06-2013 15:05

Все, понял, что я напутал все :)

Все заработало! Нужно было так:

if (
     $img = thumb_generate(
     mso_get_first_image_url($text = $p->val('page_content'), $res = true),
     //$p->meta_val('image_for_page'), // адрес
     150, //ширина
     150, //высота
     getinfo('template_url') . 'images/placehold/150x150.png',
     $type_resize = 'resize_full_crop_center', $replace_file = true, $subdir = 'mini'
     ))
    {
     $img = $p->page_url(true) . '<img src="' . $img . '" alt="">val('page_title')). '">';
     $p->cell($img, 'cell-img');
    }

11Сергей11-01-2016 17:30

Подскажите, как указать размер для миниатюры, что бы ширина и вы width="" и height="" отображались в исходном коде страницы?

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.