Упражнение 3. Вывод изображений во всплывающих окнах

1. Откройте папку C:\WebServer\home\drupal_site.ru\www\sites\all\modules и поместите в нее содержимое двух архивов из папки Файлы для Drupal\ПО: libraries-7.x-2.2.zip и colorbox-7.x-2.5.zip.

2. Кроме самого модуля нам еще понадобится Jquery-плагин Colorbox, который также находится в папке Файлы для Drupal\ПО. Поместите папку в libraries содержимое архива colorbox-1.x.zip (находится в папке Файлы для Drupal\ПО).

3. Перейдите к управлению модулями и включите сначала модуль Libraries, а затем модуль Colorbox.

Итак, модуль включен, теперь можно приступать к его настройкам. Первым делом нужно создать свой собственный стиль изображения для уменьшенного изображения.

4. В меню администратора сайта откройте Конфигурация  Мультимедиа  Стили изображения  Добавить стиль.

5. В качестве названия стиля введите, например, «mystyle» и сохраните. Имена стилей должны начинаться только с маленьких букв!

6. Теперь добавим один из эффектов. Из раскрывающегося списка выберите эффект Масштабирование и нажмите на кнопку Добавить.

7. Масштабируем изображения, которые будут выводиться этим стилем по ширине 200px (рис.8). Нажмите на кнопку Добавить эффект.

Рисунок 8 – Параметры масштабирования изображений

8. Создайте новый тип материала с названием «Фотоотчет».

9. Перейдите к управлению полями нового типа материалов и создайте новое поле «Фото», тип хранения данных – Изображение, виджет – Изображение (рис. 9). Сохраните изменения.

Рисунок 9 – Новое поле типа материалов «Фотоотчет»

10. В настройках поля перейдите на вкладку Правка и в поле Количество значений установите «Не ограничено». Можно указать максимальный размер загружаемого файла, минимальное и максимальное разрешение для загружаемой картинки.

11. В меню администратора сайта откройте Структура  Типы материалов  Фотоотчет  Управление отображением. В колонке Формат для поля «Фото» измените значение в списке на Colorbox. Сохраните изменения.

12. Далее нужно нажать справа на иконку (шестиренка) (рис. 10) для того чтобы выбрать стиль показа изображения в уменьшенном виде.

Рисунок 10 – Изменение параметров вывода изображений

13. В параметрах укажите в поле Content image style созданный стиль mystyle и нажмите на кнопку Обновить. Сохраните изменения.

14. Те же самые настройки сделайте и с анонсом статьи. Сохраните изменения.

15. Добавьте на сайт материал типа «Фотоотчет», загрузив в него несколько произвольных изображений, и просмотрите результат.

Упражнение 4. Представление или Views в Drupal

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

1. В папку sites/all/modules поместите содержимое архивов views-7.x-3.7.zip и ctools-7.x-1.4.zip (находятся в папке Файлы для Drupal\ПО).

2. В панели управления откройте Модули и внизу страницы активируйте сначала модуль Ctools, включив второй пункт сверху (рис. 11). Сохраните настройки.

Рисунок 11 – Активация модуля Ctools

3. Затем активируйте модуль Views (рис. 12). Сохраните настройки.

Рисунок 12 – Активация модуля Views

4. Там же в секции Chaos tool suite включите последний пункт – Views content panes. Сохраните настройки.

Теперь добавим новый блок View.

5. В панели администрирования выберите Структура  Views  Add new view.

6. В настройках добавляемого представления введите его название, отметьте, что используете тип материала «Новость» (рис. 13).

Рисунок 13 – Добавление нового блока Views

7. Ниже задайте заголовок страницы, произвольный путь, создайте ссылку в главном меню (рис. 14), текст которой вы можете изменить. Нажмите Continue & edit.

Рисунок 14 – Параметры нового блока Views

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

9. Создайте новый материал типа «Новость», содержащий произвольный текст и изображение. В параметрах материала укажите, что он не должен помещаться на главную страницу. Проверьте отображение созданного материала на сайте.