Помочь проекту Отзывы Обратная связь Заказать шаблон/сайт Супер-шаблон MF
Войти / Регистрация
Закрыть

или зарегистрироваться

MaxSite CMS

  • Преимущества
  • Возможности
  • Основы
  • Документация
  • Скачать
Формирование колонок в MaxSite CMS
MaxSite CMS 0.74

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

Архив записейПросмотров: 148312 августа 2012 г.

Давно хотелось реализовать автоматическое создание миниатюр. Во многих 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/файл';
Обратите внимание, что библиотека будет работать только с изображениями расположенными на своем сайте в (под)каталоге 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, вы можете просто «твитнуть» эту запись. Мне будет понятно, что это кому-то нужно.

Формирование колонок в MaxSite CMS
MaxSite CMS 0.74
twitter.com facebook.com google.com yahoo.com

Еще записи по теме

  • Шаблоны для новичков. Урок 13. Лого и меню с поиском
  • Назидания начинающему вебмастеру по созданию шаблонов для MaxSite CMS
  • Новый Default-шаблон в MaxSite CMS 0.84
  • Float-опции (плоские опции)
  • Шаблоны для новичков. Урок 17. Базовый шаблон MaxSite CMS. Адаптивный дизайн
  • Используем типы страниц в MaxSite CMS
  • Шаблоны для новичков. Урок 19. Основы работы с D2
  • Непонятные проблемы...
  • Шаблоны для новичков. Урок 21. Основы D2 (меняем модульную сетку)
  • Последняя запись на главной

Комментариев: 11 RSS

1elle12-08-2012 15:35

Нужно!

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

2alexpts12-08-2012 17:44

Хорошая штука )

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.

9Руслан23-06-2013 10:18

Спасибо, будем изучать )

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="" отображались в исходном коде страницы?

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

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

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

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

Learn more about buy Instagram likes check popular website Friendlylikes
Find more information why people are used to buy Instagram likes for photos and videos these days.
Рубрики
  • Блог 36
  • Версии (релизы) 93
  • Архив записей 180
Последние записи
  • Переход к минимальной PHP 7.1
  • Обновление документации
  • MaxSite CMS 11 лет
  • MaxSite CMS 103
  • Каталог студий и фрилансеров MaxSite CMS
  • Мы переходим к одной ветке разработки MaxSite CMS
  • MaxSite CMS 102
  • MaxSite CMS 101
  • Установка и начальная настройка MaxSite CMS (видео)
  • Landing Page на MaxSite CMS
Поиск по сайту
Архив сайта

О проекте

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

Другие проекты
  • Сайт автора — MaxSite.org
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные HTML-курсы
Соцсети
  • Twitter
  • Github
  • YouTube
© MaxSite CMS, 2008-2019 | Время: 0.2880 | SQL: 20 | Память: 1.45MB | Вход