• Обратная связь
  • Карта сайта
  • Отзыв
  • Комментарии
  • Форум
discord
Технические заметки
  • Главная
  • Лекции
  • Практикум
  • Обзоры
  • Сравнение
  • Нормы
  • События
  • Вход
ГлавнаяMaxSite CMS
Выводим картинки в компоненте для MaxSite CMS.
Новая версия плагина галерей для MaxSite CMS Taggallery-2.1

Компонент для MaxSite CMS, создающий в header коллаж из изображений

29 ноября 2011 г.Просмотров: 1516Комментарии: 0
MaxSite CMSMaxSiteПлагин

Для плагина Taggallery задумал вывод n изображений (случайных, лучших, ... ) в шапке сайта. Их нужно не просто вывести, а сделать из них коллаж.

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

Все что получилось, оформил в виде компонента header_collage.

В архиве находится файл header_collage.php, который нужно разместить в каталоге components шаблона.

Скачать: header_collage.zip

Если ваш шаблон не поддерживает компоненты - можно просто подключить этот файл где нужно.

Кроме того, в архиве каталог header_collage, в котором демо-картинки.

Этот каталог нужно разместить в каталоге uploads/, не забыв при этом выставить права на каталог 777 (если загружаете картинки не встроенным загрузчиком, а по ftp или через панель хостинга).

Состав изображений uploads/header_collage/

Служебные изображения:

ramka.png - рамка.

header.jpg - основа шапки (на которую накладываются).

result.jpg - результат коллажа.

Все остальные изображения *.jpg и *.jpeg , если они не начинаются на "_", участвуют в коллаже.

Скрипт берет n случайных изображений, накладывает их на рамку, поворачивает и распределяет по изображению-основанию.

Настройки коллажа.

В самом начале файла компонента все настройки:

$par['source_dir'] = 'header_collage'; // директорий в uploads, где исходные картинки;
$par['width'] = 150; // ширина элемента коллажа;
$par['height'] = 113; // высота элемента коллажа;
$par['pointx'] = 40; // начальная точка вывода элементов;
$par['pointy'] = 30; // где будут выведены элементы по высоте;
$par['angle'] = array(20,-15,25,10,20,-10,15,25,-15); // углы на которые будут повернуты элементы;
$par['borderx'] = 6; // бордюр рамки за изображением по x;
$par['bordery'] = 8; // бордюр рамки за изображением по y;
$par['stepx'] = 150; // шаг вывода элементов;
$par['count'] = 5; // кол-во элементов;
$Cache_key=’’; - ключ Кеша: указать чтобы новая шапка строилась только после сброса кеша.

После настройки коллажа нужно указать значение ключа Кеша, например header_collage.

Обращаю внимание, что не рамка накладывается на изображение, а наоборот: сперва рамка уменьшается в заданные размеры, а затем картинка делается меньше рамки на бордюр.

(Кому-то может быть удобнее будет наоборот.)

Может скажете: массив углов лучше генерировать случайно - не спорю, но не всегда красиво получится.

Следующее возможное замечание: нужно делать каждое повернутое изображение в рамке png картинкой и выводить сверху основы средствами html, делая кликкабельными со ссылкой на оригинал изображения – согласен и буду благодарен, если кто-то подскажет как это реализовать(мой мозг неспособен понять поведение div-ов).

Еще где-то читал, что можно делать хитрые изображения-карты с участками-ссылками – но . . . чего только не бывает.

Функции компонента.

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

Приведу пояснения по функциям - вдруг кто-то захочет их модифицировать.

function rotate_img_collage

[spoiler]

function rotate_img_collage($ramka , $img , $angle , $width , $height , $borderx , $bordery)
{
  $res = imagecreatetruecolor($width,$height);
  $trans = imagecolorat($res,0,0);
  imagecopyresized ($res,$ramka,
                            0,0,
                            0,0,
                           $width,$height,
                            imagesx($ramka),imagesy($ramka));
  $trans = imagecolorat($res,0,0);
  imagecolortransparent($res,$trans);
  $trans = imagecolorat($res,0,0);
  imagecopyresized ($res,$img,
                            $borderx,$bordery,
                            0,0,
                            $width-2*$borderx,$height-2*$bordery,
                            imagesx($img),imagesy($img));
  $res = imagerotate($res, $angle ,-1);
  imagealphablending($res, true); 
  imagesavealpha($res, true); 
  return $res; 
}

[/spoiler]

Эта функция получает такие параметры:

$ramka - ресурс рамки;

$img - ресурс накладываемого изображения;

$angle - угол поворота;

$width - ширина !до поворота;

$height - высота !до поворота;

$borderx - зазор между рамкой и изображением по x;

$bordery - зазор - по y;

Результатом функции - ресурс наложенного на рамку и повернутого изображения.

header_collage

function header_collage($array_fn_img , $fn_ramka, $fn_header , $fn_result , $width, $height , $borderx , $bordery , $pointx , $pointy , $angle , $stepx)
{
  $ramka = imagecreatefrompng($fn_ramka); 
  $header = imagecreatefromjpeg($fn_header); 
  foreach ($array_fn_img as $i=>$fn_img)
  {
     $img = imagecreatefromjpeg($fn_img); 
     $res = rotate_img_collage($ramka , $img , $angle[$i] , $width , $height , $borderx , $bordery);
      imagecopy ( 
                            $header, 
                            $res, 
                            $pointx+$stepx*$i , $pointy, 
                            0, 0, 
                            imagesx($res),imagesy($res)
          );
  }
  imagejpeg($header,$fn_result); 
}

Функция получает:

$array_fn_img - массив полных путей к файлам картинок

$fn_ramka - полный путь к файлу рамки;

$fn_header - полный путь к файлу основы;

$fn_result - полный путь к тому, куда будет результат;

$width - ширина элемента с рамкой;

$height - высота элемента с рамкой;

$borderx - бордюр по x;

$bordery - бордюр по y;

$pointx - начальная точка x;

$pointy - начальная точка y;

$angle - массив углов поворота;

$stepx - шаг выводаизображений;

Функция последовательно берет из массива картинку, угол; накладывает на рамку, поворачивает, отступает на шаг от НАЧАЛА предыдущего и накладывает на основу.

Результат действия будет в файле с именем в переменной $fn_result.

Что надо бы улучшить.

1. Хотелось бы социальные кнопки вывести поверх шапки в левом верхнем углу, как в компоненте logo-inks.

2. Не знаю: стоит ли делать опции компонента в админке - влом.

3. Наклоненные в рамках изображения полноразмерные картинкиповерх шапки-основы лучше вывести средствами html, чтобы ссылки с них были lightbox, или вели на страницы картинки, формируемые плагином Taggallery.

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

Галерея изображений для MaxSite CMS Taggallery-2-0
Галерея изображений для MaxSite CMS Taggallery-2-0
Новая версия плагина галерей для MaxSite CMS Taggallery-2.1
Новая версия плагина галерей для MaxSite CMS Taggallery-2.1
Плагин CSV Banner для импорта списка товаров AliExpress в MaxSite CMS
Плагин CSV Banner для импорта списка товаров AliExpress в MaxSite CMS
Сохраняем EXIF при изменении изображения в плагине Taggallery.
Сохраняем EXIF при изменении изображения в плагине Taggallery.
Создание коллажа изображений Taggallery на MaxSite CMS.
Создание коллажа изображений Taggallery на MaxSite CMS.
Новая версия плагина галерей для MaxSite CMS Taggallery-2.2.
Новая версия плагина галерей для MaxSite CMS Taggallery-2.2.
Оставьте комментарий.

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question


Выберите для анонимного комментирования (комментарий будет опубликован после проверки).

     

  

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

Войти, используя

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

Подписка на новости
discord

Email:

Регистрация

Вход через
Разделы
  • Пожарная сигнализация123
    • Инструкции13
    • Проекты2
  • Автоматика54
  • Отопление33
  • Мониторинг30
  • Электрика16
  • Пожаротушение31
  • Умный дом32
  • Arduino12
  • Гаджеты32
  • MaxSite CMS26
Актуальное
  • СП 484
  • Автоматизация теплого пола
  • Болид vs Рубеж
  • С2000-АСПТ
  • ПЦН в кармане
  • Системы противопожарной зашиты
  • Cloud IoT
  • Проектирование
  • Программирование
  • Ссылки
Последние комментарии
9+10 ошибок при монтаже автоматической системы пожаротушения на основе С2000-АСПТ
  • Аноним » Любопытно, первая страница инструкции на АСПТ содержит "БЛОК ПРИЁМНО–КОНТРОЛЬНЫЙ И УПРАВЛЕНИЯ АВТОМАТИЧЕСКИМИ СРЕДСТВАМИ ПОЖАРОТУШЕНИЯ «С2000-АСПТ»", т.е. АСПТ является ПКУ. Читаем...
  • Андрей » "Блок" же. Не "прибор".
Идеальное техническое решение по противопожарной автоматике в разделе ЭОМ
  • Виктор Чекавин » У исполнительных модулей Рубежа МДУ-1 какая то конструктивная болячка с залипшими реле. Такому давать сертификат подсудное дело. Если программно добавлено...
  • Андрей » Ну так санкции. В таких условиях, когда снипы-хрипы накладывают требования, невыполнимые в текущем социально-экономичес ком развитии общества, я считаю вообще надо...
Контроллер теплых полов Beok CCT-10 с AliExpress для зонального отопления
  • Андрей » Здравствуйте. Видимо неправильно собраны контроллеры по логической схеме ИЛИ в цепь управления котлом. Надо нормально разомкнутые контакты выхода на котел соединить...
Последние загрузки
Все загрузки
Дискуссии на форуме
  • Выбор ОПС для коттеджа
  • Отключение питания раздвижных дверей при пожарном сценарии.
  • Подключение люков дымоудаления Mercor
Реклама

New type 1pcs/lot Mini Fast Wire Connector Universal Wiring Cable Connector Push-in Conductor Terminal Block PCT-222 SPL-62/42

MISECU H.265 Max 5MP 4CH 8CH 48V POE NVR Up to 8CH 16CH Audio Out Surveillance Security Video Recorder For POE IP Camera

RCA Audio Cable 2RCA Male to 3.5mm Jack to 2 RCA AUX Cable Nylon Braided Splitter Cable for Home Theater iPhone Headphone

Пожарка 124 Проектирование 95 Болид 64 Лекции 58 Социальное 53 Рубеж 49 Обзор 46 Автоматика 44 Инженерные системы 38 Курьез 35 Адресные системы 34 Практикум 34 Отопление 33 Пожаротушение 33 Интернет Вещей 29 MaxSite 28 Терморегуляторы 24 ГОСТ 24 Облачный Сервис 24 Мониторинг 22 Теплый пол 21 Плагин 21 Сравнение 20 AliExpress 20 ППУ 20 СП 484 19 Законы Ома 19 Техобслуживание 19 Вентиляция 18 Эксплуатация 18 Астра 17 ППК 17 Клапана 15 С2000-АСПТ 14 Электрика 14 Оповещение 13 Рубикон 13 Arduino 13 WiFi 12 С2000М 12 Ritm 11 Датчики 11 Гранд Магистр 11 Насосная Станция 10 ESP8266 10 Юнитест 10 ПЦН 9 ВЭРС 9 Авария 8 Сценарии 8 Жилой дом 8 Программирование 7 Taggallery 7 Сообщества 7 Диспетчеризация 7 Отзыв 7 Освещение 6 Плазма-Т 6 Спрут-2 5 Гаджеты 5 С2000-СП4 5 ПО 5 Радиоканал 4 GeoRITM 4 МПН 4 МПТ 4 ИПДЛ 3 Рубеж-2ОП 3 Visio 3 Гранит 3 Учет ресурсов 3 РИП 3 Баня 3 Navigard 3 My_ESP8266 3 Версет 3 Firesec3 3 Security Hub 2 Гидравлика 2 Zigbee 2 ТО 2
  • Обратная связь
  • Карта сайта
  • Отзыв
  • События
  • Комментарии
  • Форум
© Технические заметки 2025. Работает на MaxSite CMS. ( Вход )
Автор не несет ответственность за последствия применения материалов сайта на практике.