Модуль галереи

В момент изучения Drupal, одной из самых актуальных и острых проблем была проблема работы с изображениями. Даже пользуясь такой слабостью Drupal, конкурентыеCMSподшучивали над ним. Вот, такая идеальнаяCMS, а картинку невозможно отобразить. Эта проблема была не только для стандартного пакета установки Drupal, но и для расширений, не было модуля, который б ни только мог позволить упростить работу с изображениями, но и вообще отобразить изображения. Первые попытки таких модулей заставляли пользователей сначала загружать изображения к себе в личные файлы, далее средствамиhtmlтэгаimgуказывать путь на недавно загруженный файл. Это даже у людей, хорошо знающих язык разметкиhtmlвызывало больше трудности, а для других пользователей сделало просто невозможным работу с изображениями. И вместо новостей с фотографиями они могли лишь добавлять один текст. Даже многие люди изучающие забросили изучение Drupalс связи с этим. Именно за эту острую проблему было решено взяться, начав изучение расширений Drupal. И вот спустя какое-то время начали появляться модули, решающие эту проблему, но они, как правило, следуя универсальности и обширности, начали появляться неоптимированными. Также при написании таких модулей авторы использовали уже готовые модули, не входящие в состав стандартных. То есть для использования модулей галерей требуется огромное количество других модулей, где каждый из которых может требовать наличие других сторонних модулей. Это с одной стороны влечет за собой нагруженность на сайт. Где для отображения одной картинки требуется огромное количество запросов в столь малоиспользующиеся модули. Также это значительно увеличивает размеры страниц сайта, что отражается на трафике пользователей и ожидании загрузки страницы.

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

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

Далее для разграничения прав доступа, с помощью стандартного хука perm, создано два новых права доступа этоalbumuserиalbumadmin, первое рассчитано на просмотр изображений альбомов, а второй на администрирование, то есть добавление/изменение фотографий альбома. И поставил в соответствие им пункты в меню. Далее необходимо было создать новый тип материала альбом и таблицу содержащую информация о загруженных изображениях и принадлежности их к определенному альбому. Стандартными не программными средствами Drupalя создал новый тип материала Альбом и добавил к нему небольшое описание. Тем самым новый тип материала при добавлении становится полноценной нодой, которую можно комментировать. В результате этого Drupal автоматически создал набор прав для типа альбом, такие как добавление, удаление и редактирование своего альбома и любого альбома. Эти права администратор выдает на свое усмотрение, даем права только самому администратору. Следовательно, при добавлении новой ноды с типом альбом её данные автоматически помещаются в таблицуnode, которая является стандартной обязательной в Drupal. Далее , используя, файлinstallи сам хукinstallсоздаем таблицуfoto, с полями:id– уникальный номер изображения,aid- номер альбома, к которому принадлежит данное изображение, он соответствует полюnidв таблицеnode;alt- описание изображения, является необязательным пунктом, и последнее полеimg–имя файла изображения.

Следующая проблема это создание форм для работы с изображениями. Используя, хук formя создаю формы для добавления изображения, где необходимым входным параметром является номер альбомы, с помощью которого, использовав хукload, получаем информацию об альбоме. Для удобства добавления изображения создаем на форме элемент диалогого окна для выбора файла. Выбрав, файл изображения и добавив к нему описание, вызываем хукvalidate, который проверит входные данные на корректность. В первую очередь отправляем в него данные с формы и начинаем проверку. Для начала проверяем расширение файла на соответствие с массивом возможных значений, то естьpng,jpeg,jpg,gif. Далее проверяем встроенной функцией Drupalfile_validate_is_image(валидация) файл на соответствие с изображением. Если не трудностей не возникло, отправляем ответ успешной валидации и имя файла в обработчик событийform_submit. Он проверив успешность действий запоминает имя файла в переменную и очищает форму от имени файла. Далее находимsql-запросом количество записей в таблице изображений и заполняем строку таблицу данными о изображении, где уникальный номер изображения будет на единицу больше, чем количество в исходной таблице, имя файла получаем с запомненной переменной, а описание и номер альбомы получаем с формы. Также, следует отметить, что вDrupalвсе загруженные на сервер файлы по умолчанию имеют статус временных. Такие файлы удалятся при запуске cron - хронометра, отвечающего за все производимые действия и срабатывающего в определенное время или через определенный промежуток времени. Это довольно полезна вещь в Drupal, помогающая массово совершать действия для определенных событий. В связи с этим, при загрузке файла на сервер помечаем ему статус постоянного, иначе загруженный файл может удалиться без ведомого пользователя и администрации. Если все прошло без ошибок сообщаем функциейdrupal_set_messageпользователю, что загрузка успешно завершена.

После создания и пополнение альбомов появляется проблема отображения всех изображений, сгруппированных в альбомы, и возможность администрирования альбомов. Для этого в первую необходимо получить список всех альбомов, а так как не создавалось для этого отдельных таблиц, выбираем в таблице с материалами исключительно альбомы. Для этого sql-запросом в таблицуnodeотправляем запрос, ищущий все материала, у которых тип материала является альбом. Далее идет разделение по типу на просмотр и администрирование. Они используют одни и те же данные, но должны представляться различно. В первую очередь проверяются права доступа для данной страницыalbumadmin. Для администрирования используем вывод таблицей, использовав функцию темизацииtable. Передаваемый ейheader(шапка таблицы) имеет два пункта: имя альбома и возможные действия над альбомом, а именно редактирование, удаление, добавление изображений и просмотр всех изображений этого альбома. Заполняем массив таблицы циклов, используя данные полученные изsql-запроса, а действиями будут ссылки на администрирование альбома, где входными параметрами будет номер альбома. Также для удобства администрирования я добавил после вывода альбомов ссылку на создание нового альбома. Теперь рассмотрим отображение альбомов без администрирования. Для начала проверяем права доступаalbumuser. Далее начинаем с помощью цикла получать и показывать каждый альбом. Так как при создании альбома не указывалось обложки для него, а изображения имеют только свойство принадлежностью к альбому, а принадлежности к обложку не задается, то по умолчанию будем делать обложкой альбома первое его изображение. Также помимо обложки и названия альбома отображается его описание. Таким образом, отображаем все найденные альбомы. Также следует отметить, что обложка будет являться ссылкой на просмотр изображений данного альбома. Если не найдено ни одного альбома выдаем пользователю соответствующее сообщение.

Далее стало проблемой отображений всех изображений определенного альбома. Для этого создаем функцию, которая принимает на входные данные альбом. Отображаем название альбома и с помощью цикла по порядку показываем все изображения, принадлежащие к данному альбому. Также для удобства администрирования я добавил к каждому изображению х, ссылку на удаление данного изображения. Это позволит динамически удалять выбранное изображение. И также я учитывал набор прав, для данного действия, то есть ссылка х отображается только у пользователей, имеющий право на удаление изображений – albumadmin. У остальных пользователей изображения будут без ссылок. Также после всех изображений я добавил вывод комментариев, напрямую с таблицы комментариев, а не средствами Drupal, относящихся к данному альбому, и возможность добавления новых комментариев на странице альбома. На этом отображении не стали ограничиваться, в наше время практически никто не привык смотреть изображения в незначительных миниатюрах, а просмотр изображения в новом окне вкладки браузера, весьма неудобен и не практичен. В наше время практически все развитые сайты показывают изображения в всплывающем окне, то есть создается новое окно с изображением, в той же вкладки, где изображение. И была поставлена задача, сделать аналогично. Создавать с нуля удобное всплывающее окно довольно не просто, учитывая, что много готовых решений. И для этого используем решение от библиотекиjquery. Во-первых, она проста и удобна, а во-вторых, является в наше время лидеромjavascript-библиотек. Для начала я нашел готовое решение всплывающего изображения в окне, был выбранFancybox. Далее взяв лишь необходимое, добавил это к отображению своих изображений. Для этого потребовалось немного дописать мой код отображающий изображения. Также подключить специальныеjsфайлы и вызвать готовые функции для моих изображений. В Drupal имеются готовые функции для работы сjquery. Но, как оказалось в шестой версии, не все стабильно работает. Подключениеjsфайлов осуществляется двумя способами, как минимум, во-первых, это добавление нужных строк скриптаjqueryв актуальные тему оформления сайта, но это, на мой взгляд, не совсем корректно, во-первых, если тем несколько, потребуется модификация всех тем, а во-вторых это вызовет чрезмерную нагрузку, даже, если на странице не будет отображаться ни единого изображения, библиотека, все равно будет загружаться в момент создания страницы пользователем. В связи с этим, выбираем альтернативный путь решения, и вызываем библиотеку функцийdrupal_add_jsтолько для необходимых форм. Далее средствамиhtml, а не самого Drupal я вызвал нужные функции. Также добавляем к форме таблицуcssстилей, чтобы вывод изображений не зависел от выбранной темы оформления дизайна сайта. Теперь при отображении к каждому изображения добавляем вывод его в сплывающем окне. Настроим параметры для данного вывода в окне. Во-первых затемняем все, что находится не в окне, и выводим окно по центру браузера, это дает эффект фокусирования на изображении. Далее добавляем в правый верхний угол окна кнопку, для закрытия окна, и выводим небольшой овал под сплывающим окном, содержащий описание изображения. Удобно и просто.

Данный функционал практически ничем не уступает модулям или даже набору модулей, позволяющих работать с изображениями. Но на этом не останавливаемся, расширяем модуль привлекательным и удобным изображением альбомов. Во всех модулях, которые использует Drupal, для отображения изображения, существует отдельная страница. И отображение альбома внутри другого типа материалов невозможно. Было решено дополнить модуль внедрением альбома в другие типы материалов и комментарии и отображать изображения не просто статическими ссылками на изображения, а добавить скрипт их отображения в виде карусели, то есть группа изображения, меняющихся без обновлений страницы. Это добавляет динамичности для изображений. В связи с этим, возникла задача отображения карусели. Для этого используем, уже упомянутый,jquery, рассмотрев возможные варианты, выбираем решение infinitecarousel. Данное решение отображает по одному изображению, имеет режим слайд-шоу для автоматического изменению изображения со временем, и отображает информацию о изображении. Сначала это решение некорректно работало, так как, не рассчитано было на какую-либоCMS. И пришлось модифицировать файлаjs, например, добавлением к нему свои картинки стрелок в самом файле скрипта. Далее настроил его универсальность, возможность использования не зависимость от темы оформления сайта. Следующим шагов было направить скрипту входные данные необходимого альбома. То есть возможность вывод именно изображений необходимого альбома. Самым трудным мне далось указать скрипту, событие отображения карусели. Для этого, в первую очередь, появилась необходимость создания нового фильтра текста. Используя хукfilter, создаем новый тип фильтрации входного текста. После этого на странице настроек в Drupal появился фильтр и его настройка, необходимо добавить к своему фильтры уже имеющиеся, в связи с тем, что иначе придется учитывать все возможные случаи ввода текста, например, решение незакрытых тэговhtml, которые могут разрушить структуру страницы. Или добавив к своему фильтру другие можно изменять только необходимое, главное указать порядок фильтрации текста. Теперь предстоит процесс корректировки текста фильтром. Для этого используем стандартный хукfilter_process, отправляя входными параметрами текст, отображаемый на странице пользователя. Далее отбираем в тексте слова, в связи с тем, что заранее неизвестно какие именно будут слова, появляется необходимость использования регулярных выражений, это по сути образец-строка или шаблон, состоящий из символов и метасимволов и задающая правило поиска. В данной ситуации отделение карусели альбома от всего другого текста осуществляю с помощью шаблона (:album )([0-9]+)(:), то есть после “двоеточия” пишется слово “album” далее после символа “пробел” ищем набор цифр, где знак плюса означает, что содержится как минимум один символ, это будет являться номером альбома требуемого отображения. И, не следует забывать, последним искомым символом является снова “двоеточие”. Если найденная подстрока в тексте соответствует шаблону, то запоминаем набор цифр, который будет использоваться как номер альбома. Далее находим в таблицеfotoвсе изображения, принадлежащие исходному альбому, и с помощью цикла отправляем все подходящие изображения входными параметрами на карусель. Также если в тексте была необходимость в карусели, то подключаем, соответствующую библиотеку с помощьюdrupal_add_js. Заменяем найденную подстроку на готовуюjquery-карусель. И возвращаем откорректированные данные пользователю.