Программируем галерею в Drupal 7

gal-sample

Хотите сделать галерею своими руками, без сторонних модулей в Drupal? Тогда читайте дальше.

Настроим поле для галереи

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

new-gal

При сохранении поля пробегаемся по настройкам. Правилом хорошего тона для меня является настройка пути для сохранения файлов (Каталог файлов), максимальный размер изображений, и разрешите показывать поле для атрибута title — «заголовок» для картинок. Там мы позднее будем размещать подписи для элементов галереи.

st-gl

Но самое важное сейчас сказать, что количество значений — не ограничено.

gal-settings

Итак, у нас есть поле, где картинки галереи хранятся. Теперь все внимание сфокусируем на то как она выглядит. У нас есть два случая отображения картинок в галерее — иконка в общем списке и режим просмотра одного изображения.

Стиль отображения для миниатюры (иконки)

Для иконки нам нужно подготовить стиль. Идем в конфигурацию сайта, виды показа изображений — /admin/config/media/image-styles.

Например, я настроил миниатюры, «вписывающиеся» в квадрат на 210 точек.

style

Теперь переходим в настройки отображения публикации, содержащей наше поле. Я добавил это поле в стандартный тип публикации — page, так что находим настройки вот здесь — /admin/structure/types/manage/page/display.

Жмем на шестеренку для выбора стиля изображения.

view-settings

И подключаем созданный нами ранее стиль — «Иконки в галерее».

set-the-settings

Настраиваем ссылку на файл-источник. Это нам пригодится чуть позже, когда мы займемся отображением картинки в режиме просмотра. Пока же при клике на иконку в галерее в браузере будет отображаться оригинальная картинка.

Оформление списка картинок

Если сейчас загрузить в наше поле картинки, то они выстроятся вертикально ряд. Вот как то так:

gal-output

Выстроим их в ряд, добавим отступы, тени и что нить на свой вкус :) Пропишем в общий файл со стилями пару правил.

Если вы назвали поле так же как в примере (field_gal), то стили сработают и вы получите вывод картинок как на следующем скриншоте.

gal-output-2

Если у вас идут такие «разношерстные» картинки, то возможно стоит вернутся к стилю отображения и сделать масштабирование с обрезкой в нужный размер. Это уже на ваш вкус.

Подключение и настройка jQuery плагина

Т.к. в состав drupal входит jQuery, то использование расширений и плагинов jQuery — то, что «доктор прописал». Для показа полного изображения я буду использовать fancyBox. Подобных ему плагинов много, вы можете использовать какой то свой. Просто посмотрите, что и как делаю я.

В инфо (.info) файл темы оформления я дописываю необходимые пути к fancyBox плагину и пути к jQuery версии «по свежей», чем та тухлая версия, которая входит в состав ядра Drupal.

Остаётся лишь подключить плагин к нужным контейнерам, т.е. к нашей галерее. Этот код я размещаю в файле шаблона html.tpl.php в секции <head>.

Вот мы и прошли весь этот длинный путь. Задаю себе лишь один вопрос — не отбил ли я охоту у вас писать собственные код. Ведь так заманчиво подобрать и поставить «Левый плагин». :)

На самом деле, мы написали едва ли 30 строк кода + добавили в проект плагин для jQuery.

Написать комментарий

Мало букафф? Читайте есчо !

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

Поиск и замена терминов. Пример реализации.

Август 15, 2016 г.

Задача поиска и замены каких либо терминов в тексте кажется на первый взгляд довольно простой в PHP.  Есть очень мощные инструменты вроде str_replace, а также поиск и замена с помощью регулярных выражений, например, preg_replace и preg_replace_callback. ...

Читать

 

Комментарии к «Программируем галерею в Drupal 7»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Программируем галерею в Drupal 7”

  1. Марина:

    Не понятно куда прописывать скрипты, в какие папки? какие пути к папкам?

  2. Марина:

    самим эти файлы создавать? или в существующие?

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

      В этом примере предполагается, что вы создадите подкаталог /js в вашей теме и разместите там файлы библиотеки jQuery и js-плагин Fancybox.

      jQuery уже есть в составе Drupal, но для Fancybox нужна более новая версия. Для подключения обычно используют плагин jQuery update, а не так как я это сделал в статье.