WebGUI хостинг Документация по WebGUI Запустить персональную демо версию Форум
WebGUI по-русски

WebGUI по-русски

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

 

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

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

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/.

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

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

<VirtualHost *>

<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 с галереей в отдельной папке:

<VirtualHost *>

Блок дирректив для создания короткого 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:
7.8.14