Cоздание простой фотогалереи в Drupal 7 с помощью Views и Colorbox.
Опубликовано: 01.11.2017
Сегодня покажу вам, как создать простую фотогалерею для Drupal 7 с помощью модулей views и colorbox. Галерея будет выводить все картинки из определенного поля типа материалов в заданном количестве с постраничной навигацией. Давайте не будем томить, а приступим к установке.
Для реализации задуманного нам потребуются следующие модули:
Views
Ctools
Colorbox
Плагин Colorbox
Итак, скачайте данные модули и установите их в папку sites/all/modules кроме плагина colorbox, сам плагин нужно вставить в папку sites/all/libraries/colorbox/файлы плагина, то есть нужно распаковать плагин колорбокс в папкe / libraries и переименовать директорию в colorbox, если у вас нет папки libraries, то ее нужно создать.
jQuery и Drupal урок 6 jQuery фото галерея
Все модули установлены, теперь их нужно включить на странице управления модулями. Теперь создадим пресет для вывода уменьшенного отображения картинки в нашей галерее, для этого проходим в «Конфигурация -> Стили изображений» и добавляем новый стиль, назовем его «gallery». Далее следует выбрать эффект для нашего пресета, выбираем «Масштабирование и обрезка» и задаем ширину – 170 пикселей, а высоту 190 пикселей.
4.5.5. Views slideshow - вывод jQuery-слайдшоу и каруселей через Views
Теперь создадим тип материалов, который назовем gallery, добавим к нему поле «Изображение» с машинным именем «images». Далее в настройках поля следует указать количество значений – не ограничено.
Создадим страницу типа материалов Галерея с любым заголовком, я назвал ее Фотоотчет и добавим к ней изображений штук 10 – 20. Теперь можно переходить непосредственно к настройкам Views.
Создадим новое представление со следующими настройками:
Имя представления «Галерея», машинное имя «gallery». Показать содержимое типа материалов «Gallery». Создадим страницу для отображения, укажем заголовок «Галерея», Путь – «gallery-views». Формат отображения - сетка из поля. Элементов для отображения -10 Использовать постраничную навигацию.Нажимаем «продолжить редактирование».
Нам остается поправить лишь несколько пунктов, чтобы наша галерея заработала так как нужно.
Удалим поле «заголовок», которое было создано по умолчанию модулем views.
Добавим новое поле - Содержимое: Изображение, Появляется в: node:gallery.
В настройках укажем:
Снять галочку с пункта «Создать метку». Средство форматирования –Colorbox. Content image style (Стиль изображения содержимого) – gallery. Спустимся чуть ниже к вкладке «настройка множественного поля» и снимем галочку с пункта «Отображать все значения в одну линию», для того чтобы у нас появилась постраничная навигация.Теперь можно сохранить настройки поля.
Можно сказать наша галерея готова, как видно на предпросмотре изображения выводятся в сетке по 4 столбца с постраничной навигацией, то что мы и хотели сделать, сохраняйте настройки представления и посмотрите что у нас получилось. Дело остается за малым, оформить таблицу с помощью CSS.