Внешняя фотогалерея

Встраивание внешней фотогалереи

Автор статьи: Владимир Витковский

www.webgui.uanet.biz, www.transport.su
При перепечатке ссылка на оригинал обязательна

(Действительно для версий до 6.2.11)

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

Встроенные возможности:

В стандартной поставке WebGUI, для создания фото-галереи предназначен модуль USS. (В зависимости от перевода, он может звучать по-русски как "система обмена файлами" или "система публикаций". Последнее более точно отражает суть реализуемых задач.) Для создания фото-галереи Вы, просто, с помощью меню добавляете на страницу модуль USS и устанавливаете в нём шаблон отображения "photogallery".

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

Что ограничивает применение:

Добавляемые изображения "не видны" в общем "банке информации".
Отсутствует возможность пакетного добавления изображений.
Создание возможности просмотра с градацией по размерам требует некоторой изобретательности. (изначально предусмотрено только автоматическое создание миниатюры со ссылкой на страницу с картинкой и комментариями, без просмотра промежуточных размеров).
Отсутствует возможность перемещать изображения из раздела в раздел.

В версиях 6.3.* и более поздних этот модуль называется "Collaboration System" и снабжён несколько более расширенными возможностями, но вышеперечисленные ограничения остались.

Модуль фото-галереи, написанный для WebGUI сторонними разработчиками:

(http://www.plainblack.com/photogallery_for_webgui_6.2#Dyna5fF2jQUtBh9gImMH5w)

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

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

Модуль работает только с версиями 6.2 * и более ранними. (для более поздних версий WebGUI, скорее всего, этот модуль будет доработан после выхода новой стабильной версии ядра WebGUI 7.0)

Преимущества и недостатки встраивания "чужеродного" CMS фото-галереи в сайт, созданный с помощью WebGUI:

Главным недостатком такого рода "имплантаций" является проблема с общей авторизацией. Как правило, каждая из CMS имеет собственную систему авторизации и собственную систему меню. Заставить кого-то одного из них использовать систему авторизации другого всегда связано с головной болью (при отсутствии готовых решений) и принесением в жертву некоторых функций а также ухудшением юзабилити.

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

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

Справедливости ради следует отметить, что в WebGUI изначально предусмотрена возможность использования различных систем авторизации (в базовой поставке WebGUI-авторизация и LDAP) и есть API для встраивания системы авторизации сторонних разработчиков.

Как вариант - Apache::Gallery

Данное решение не требует навыков в программировании.

Эта галерея имеет достаточно широкий набор функций. В их числе:

Автоматическое создание миниатюр и копий картинки с различным разрешением. По умолчанию - 640х*, 800х*, 1024х*, 1600х*, 2272х*, но не более размера оригинала. Посетитель может выбрать, какие размеры картинок он желает смотреть. Для каждого промежуточного размера создаётся физический файл в кеше и при каждом последующем обращении web-посетителя к картинке промежуточного размера берётся именно файл из кеша, что ускоряет работу приложения.
При просмотре картинки видны миниатюры предыдущей и последующей картинки.
На каждой картинке автоматически может создаваться "водяной знак" в виде надписи или изображения.
Внешний вид галереи настраивается с помощью шаблонов страниц.
Структура разделов отражает реальную структуру папок. То есть Вы, просто, выкладываете, например, по FTP папки с графическими файлами. Каждая папка может содержать как картинки, так и другие папки с изображениями. Степень вложенности неограниченна. Каждая физическая папка, собственно, и является разделом. Это удобно, когда Вам необходимо "выкладывать" сразу помногу файлов. При перемещении файла из папки в папку картинка перемещается из раздела в раздел. Для удаления изображения необходимо удалить файл.
Есть возможность писать пояснения к разделам и изображениям.

Раздела администратора, как такового, просто, не существует. Вы оперируете непосредственно с файлами. Поэтому у Вас нет проблем с синхронизацией систем авторизации приложений.

Для встраивания созданной галереи в WebGUI, достаточно в модуле HTTPproxy указать URL созданной галереи. Согласование URL-ов ссылок навигации галереи с общим меню целиком берёт на себя сам модуль HTTPproxy и прекрасно с этим справляется.

Недостатки данного решения:

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

Если перечисленные преимущества перевесили перечень неудобств, то для Вас следующая часть статьи.

Как установить и настроить Apache::Gallery

Для начала "скачайте" последнюю версию галереи из хранилища перловых модулей http://cpan.org

Устанавливаем необходимые компоненты:

Устанавливаем библиотеку Imlib2:

(http://prdownloads.sourceforge.net/enlightenment/imlib2-1.2.1.tar.gz)

После распаковки архива в отдельную папку зайдите в неё и запустите:

./configure --without-x
make
make install

Устанавливаем дополнительные модули Perl, необходимые для работы галереи:

От имени суперпользователя наберите в командной строке:

perl -MCPAN -e shell
install URI::Escape
install Image::Info
install Image::Size
install Text::Template
install CGI
install Image::Imlib2
install Apache::Request # Только для Apache 1.3.*
exit

Внимание: при установке Apache::Request он переспросит:
Skip the test suite? [No]
Надо ответить: Y

Поскольку предполагается, что галерея будет работать совместно с WebGUI, то будем считать, что mod_perl у Вас уже установлен.

Устанавливать Apache::Gallery можно, как и любой другой перловый модуль - через Cpan, но всё равно желательно "скачать" дистрибутив (http://search.cpan.org/CPAN/authors/id/L/LE/LEGART/Apache-Gallery-1.0RC3.tar.gz) так как в нём находятся наборы шаблонов и графических файлов, необходимых для работы галереи. При установке через Cpan они не переносятся на Ваш компьютер.

Поэтому после сохранения архива и распаковки в отдельную папку, зайдите в неё и наберите:

perl Makefile.PL
make
#export MOD_PERL_API_VERSION=2 # Это необходимо только для mod_perl 2.0
make test (по желанию)
make install

Конфигурируем виртуальный хост.

Значения переменных, описывающих конфигурацию галереи, могут быть заданы, как в файле конфигурации Apache httpd.conf, так и в файлах .htaccess для каждой из папок. Возможен комбинированный подход. Задайте основные настройки в файле конфигурации сервера, а затем некоторые из них можете переназначить для отдельных папок. Существует возможность задавать разные шаблоны отображения для разных разделов (папок) или разные надписи "водяными знаками" и др.

Галерею, по желанию, установливаете или отдельным субдоменом (например: photo.sitenane.com), или внутри существующего домена отдельной папкой (например: www.sitename.com/uploads/gallery/)

Создайте вне web-пространства папку для шаблонов и скопируйте туда шаблоны из дистрибутива галереи.

Графические файлы интерфейса галлереи скопируйте из дистрибутива, например в папку пиктограмм сервера Apache (/usr/local/apache/icons/gallery/), тогда они будут доступны по URL /icons/gallery/.

Таблицу стилей положите в корневую папку галереи.

Вариант конфигурации виртуального хоста для отдельного субдомена:

<IfModule mod_perl.c>Абсолютный путь от корня сервера к папке шаблонов. Это самая важная переменная, так как по-умолчанию она имеет пустое значение, но без неё ничего работать не будет. Все остальные переменные можете не указывать и программа возьмёт значения по-умолчанию, но путь к шаблонам обязателен.
PerlSetVar GalleryTemplateDir '/data/sitename.com/templates/default'

Отображаемое название корневой папки галлереи:
PerlSetVar GalleryRootText 'All galleries:'

Количество миниатюр на странице:
PerlSetVar GalleryMaxThumbnailsPerPage '40'

Если значение этой переменной "1", то в названиях папок знак подчёркивания будет отображаться как пробел:
PerlSetVar   GalleryUnderscoresToSpaces '1'
Абсолютный путь от корня сервера к графическому файлу, который будет использоваться в качестве "водяного знака":
#PerlSetVar   GalleryCopyrightImage '/usr/local/apache/icons/gallery/c.png'
#PerlSetVar   GalleryCopyrightImage '/usr/local/apache/icons/gallery/c.png'

Альтернатива предыдущему пункту - текст надписи, который будет отображаться в качестве "водяного знака":
PerlSetVar GalleryCopyrightText '(c) sitename.com '

Абсолютный путь к папке с TTF шрифтами на сервере:
PerlSetVar GalleryTTFDir '/usr/share/fonts/default/TTF/'

Имя файла шрифта, используемого для надписи в "водяных знаках". Внимание: обязательно проверьте соответствие регистра всех символов названия файла и его расширения реально существующему файлу!
PerlSetVar GalleryTTFFile 'Verdanab.TTF'

Размер шрифта "водяных знаков" в пикселях:
PerlSetVar GalleryTTFSize '10'

Цвет шрифта:
PerlSetVar GalleryCopyrightColor '0,0,0,255'

Цвет фона надписи:
PerlSetVar GalleryCopyrightBackgroundColor '255,255,255,255'

Сортировка папок при отображении:
#Возможные значения: size, atime, mtime, ctime
PerlSetVar GalleryDirSortBy 'ctime'

Относительный URL галлереи (в данном случае она лежит в корне сайта "/"). Все запросы по этому URL будут обрабатываться обработчиком Apache::Gallery:

<Location />
SetHandler perl-script
PerlHandler Apache::Gallery
</Location>
</IfModule>

Остальные строки не нуждаются в комментариях и являются обычными для любого виртуального хоста:

DocumentRoot /data/sitename.com/htdocs
ServerName photo-sitename.com
CustomLog /data/sitename.com/logs/sitename.com_access.log combined
ErrorLog /data/sitename.com/logs/sitename.com_error.log
</VirtualHost>

Вариант конфигурации виртуального хоста для WebGUI с галереей в отдельной папке:

Блок дирректив для создания короткого URL в WebGUI (по желанию):

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^/extras/ - [L]
RewriteRule ^/env.pl - [L]
RewriteRule ^/robots.txt - [L]
RewriteRule ^/uploads/ - [L]
RewriteRule ^/icons/ - [L]
RewriteRule ^/.*\.php$ - [NC,L]
RewriteRule ^/.*\.xml$ - [L]
RewriteRule ^/.*\.ico$ - [L]
RewriteRule ^/.*\.png$ - [L]
RewriteRule ^/.*\.gif$ - [L]
RewriteRule ^/index.pl/ - [L]
RewriteRule /.*) /index.pl/$1 [PT]
</IfModule>

Диррективы для фунционирования WebGUI:

Alias /extras /data/WebGUI/www/extras
<IfModule mod_perl.c>
#AddHandler cgi-script .cgi .pl
<Files ~ "\.(pl)$">
    SetHandler perl-script
#    Первая строчка для Apache 2
#    PerlHandler Modperl::Registry
#    Вторая - для Apache 1
    PerlHandler Apache::Registry
</Files>
PerlRequire /data/WebGUI/sbin/preload.perl

Относительный URL галлереи. Все запросы по этому URL будут обрабатываться обработчиком Apache::Gallery:
<Location /uploads/gallery/>
SetHandler perl-script
PerlHandler Apache::Gallery

Установка переменных конфигурации галереи:

URL галлереи, "не доходя" одной папки до, собственно, галереи.

Примечание:По документации положено указывать URL непосредственно самой галереи, но в таком случае почему-то в навигации галереи, которая отображает путь от корня галереи к месту Вашего нахождения, отсутствует ссылка на самый верхний уровень галереи. Это наблюдается только в том случае, если галерея расположена не в корне сайта. И в этом же случае игнорируется переменная, задающая отображаемое название корневой папки галереи (GalleryRootText), поэтому её можно не устанавливать. Отображается реальное название папки. (проверено на версии галереи 1.0 RC3)

PerlSetVar GalleryRootPath '/uploads/'

Значение остальных переменных аналогично описанному выше.
PerlSetVar   GalleryTemplateDir '/data/sitename.com/templates/default'
PerlSetVar   GalleryMaxThumbnailsPerPage '40'
PerlSetVar   GalleryUnderscoresToSpaces '1'
#PerlSetVar   GalleryCopyrightImage '/data/sitename.com/www/uploads/c.png'
PerlSetVar   GalleryCopyrightText '(c) sitename.com '
PerlSetVar   GalleryTTFDir '/usr/share/fonts/default/TTF/'
PerlSetVar   GalleryTTFFile 'Verdanab.TTF'
PerlSetVar   GalleryTTFSize '10'
PerlSetVar GalleryCopyrightColor '0,0,0,255'
PerlSetVar GalleryCopyrightBackgroundColor '255,255,255,255'
</Location>
</IfModule>

<Directory /data/sitename.com/www>
    DirectoryIndex index.pl
    Options Indexes ExecCGI FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
DocumentRoot /data/sitename.com/www
ServerName www.sitename.com
ServerAlias sitename.com
CustomLog /data/sitename.com/logs/sitename.com_access.log combined

ErrorLog /data/sitename.com/logs/sitename.com_error.log
</VirtualHost>

После выполнения этих операций необходимо перезапустить Apache.

Затем проверьте, как работает галерея самостоятельно. Для этого наберите в браузере URL того места, где находится галерея.

Если всё нормально, то в банк информации WebGUI внесите таблицу стилей фото-галереи в виде текстового фрагмента (например, с именем: gallery_style) или загружаемого файла (например, с именем: gallery_style.css).

Создайте на сайте страницу, на которой будет располагаться галерея.

Вставьте на эту страницу модуль HTTPproxy и установите в его параметрах полный URL фото-галереи.

В поле описания модуля вставьте макрос ^ AssetProxy(gallery_style); со ссылкой на таблицу стилей фото-галереи. Или это можно сделать со ссылкой на отдельный файл ^ FileUrl("gallery_style.css");.

Если Вы берёте таблицу стилей, поставляемую с дистрибутивом, то тщательно проверьте её на предмет того, не повторяются ли названия стилей в таблице стилей Вашего сайта и галереи. Если есть дублирование, то следует отредактировать стили и шаблоны галереи. Если в шаблонах будет присутствовать текст кириллицей, то его следует набирать в той кодировке, в которой будет работать сайт. Для WebGUI это UTF-8.

Если Вы хотите изменить отображаемое название папок, то для каждой из них создаётся текстовый файл с именем "folder_name.folder", кладётся на тот же уровень, где находится эта папка (рядом с ней) и в тело файла вносится текст, который должен отображаться.

Для создания комментариев к картинкам поступаете аналогичным образом, только название файла должно быть "file_name.comment". В теле файла пишете комментарии. Допустимы текст и HTML теги.

Если Ваш сайт расположен на WebGUI хостинге www.webgui.uanet.biz, то для создания и редактирования файлов с комментариями удобно пользоваться функциями Web-диска в Web-почте (Openwebmail). Там есть возможность создавать и редактировать текстовые файлы в требуемой кодировке, и, конечно-же, выкладывать и удалять файлы картинок.

WebGUI по-русски