20 червня 2013

Отображение вложенных графических файлов в заявках osTicket. How-To в картинках.





Скриншот со статистикой  работы системы.
Источник: osticket.com
Когда-то давно подсел я на движок обработки заявок пользователей с приятным интерфейсом и гибкими настройками osTicket. Да и забил потом - не до того было. 

А вот недавно вышла новая версия 1.7.0 (скачать) и руки зачесались)), тем более, что команда osTicket.ru неплохо поработала над переводом (скачать), за что огромное им спасибо - времени сэкономил целый день точно. 

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

Одним из трудоемких пунктов, после очень долгого перерыва в ковырянии php-кода, было "рисование" вложенных в заявку картинок вместо ссылок (а то приходилось каждую скачивать отдельно и потом просматривать локально).

Первый этап "рисования" - поиск места, где формируется история Заявки и ее текст - оказался очень простым - всё необходимое лежит в файле

include/staff/ticket-view.inc.php

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

Во время формирования отображения Заявки и её истории выполняется поиск вложенных файлов вместе с формированием ссылок на эти самые файлы, которые потом уже в свою очередь отображаются в виде тупого банального списка ссылок на скачивание.

Отображение вложений ссылками

Однако, хотелось бы видеть "всё и сразу", без всяких заморочек со скачиваниями.

Приступаем...

Дано:
$links = '<a class="Icon file" href="attachment.php?id=18&amp;h=62a2594dafae364ac4e3ea76bb473601" target="">image.png</a><em>(33.8 kb)</em>&nbsp; '
Необходимо получить на выходе что-то, что будет похоже на это (или даже лучше :)):
$links = '<p><img src="attachment.php?id=18&amp;h=62a2594dafae364ac4e3ea76bb473601"></p><a class="Icon file" href="attachment.php?id=18&amp;h=62a2594dafae364ac4e3ea76bb473601" target="">image.png</a><em>(33.8 kb)</em>&nbsp; '
Для этого воспользуемся великолепной php-функцией preg_replace(), которая умеет работать с регулярными выражениями. Но перед этим определим список типов графических файлов, которые мы будем рисовать, а не только отображать ссылки на скачивание.
$pictypes = 'gif|png|jpg|jpe|jpeg|bmp|tif|tiff'; // типы файлов, которые будем показывать
Далее создадим два массива переменных, в которых укажем что искать и на что заменять найденное (в соответствии с номерами элемента массива):
$oldlinkpattern = array(); 
$newlinkpattern = array(); 
$oldlinkpattern[0] = '/(\<a[=\"a-zA-Z\s]+?href=)(\"attachment.php\?id[a-zA-Z0-9&;=]+?\")(\s+?\S+?\>)(\S+?\.)('.$pictypes.')(\<\/a\>)/'; 
$newlinkpattern[0] = '<p><img src=\2 alt="\4\5"/></p>\1\2\3\4\5\6<br/>'; 
$oldlinkpattern[1] = '/(\<\/em\>&nbsp;)/'; 
$newlinkpattern[1] = '</em><br/>'; 
$oldlinkpattern[2] = '/(\<\/a\>\<br\/\>\<em\>)/'; 
$newlinkpattern[2] = '</a><em>'; 
$oldlinkpattern[3] = '/(target=\"\")/'; 
$newlinkpattern[3] = '"target="_blank"';

Фухх.. Если с первого раза не понятно, что здесь происходит, что мы ищем и как, - не поленитесь сходить по указанным выше ссылкам-первоисточникам с описанием команды и описанием регулярных выражений - это весьма познавательно и держит на себе всё внимание не хуже детективов Агаты Кристи, даже ночью)).

Переходим к водным процедурам генерации нужного нам содержания страницы:
// echo $links; // Комментируем (прячем) оригинальный вывод 
if ($links != '') { // Если есть вложения пишем об этом 
echo '<br/><b><em>Вложенные файлы:</em></b><br/><hr>'; 
} 
echo preg_replace($oldlinkpattern, $newlinkpattern, $links); // Генерим список ссылок с картинками


И теперь смотрим что получилось у нас в итоге:

Результат допиливания, что называется, - на лицо!
П.С. В коде выше, там где $link=, пример был с одной ссылкой, но рабочий пример c фотками уже с тремя вложениями - так красивее ;).


Сергей Гориченко



Немає коментарів:

Дописати коментар