Drupal CCK+Views. Контент типы. Вывод страниц через Views. Создание галереи сотрудников

drupal cck views

В прошлом уроке я рассказывал Вам о том, что такое node (нода) в Друпале. Нодами являются наши Записи в блоге, Page, Story. В этом уроке мы создадим новый контент тип (Content type) "Сотрудник", этот тип материала мы будем использовать для создания списка сотрудников с фотографией и описанием каждого из них.

Итак, какие модули нам для этого понадобятся:

Друпал CCK

1. CCK (Content Construction Kit) - этот модуль позволяет создавать новые типы материалов, а также добавлять к ним различные поля для ввода данных.

drupal CCK Views imagecache подключение CCK(1).png

 Модуль Друпал CCK настолько большой, что в его разделили на несколько подмодулей, нам понадобятся следующие подмодули:

  1. Content - для создания новых контент типов.
  2. Content Permissions - для установления разрешений редактирования и просмотра нашего контент типа.
  3. Number - дает возможность добавлять к контент типу числовое поле, которое можно использовать под табельный табельный номер.
  4. Option Widgets - дает возможность добавлять к контент типу ввод через выбор (checkbox, select, radio button).
  5. Text - дает возможно добавлять к контент типу текстовые поля ввода данных.

Остальные подмодули CCK выполняют следующие функции:

  • Content copy - позволяет создавать копии существующих контент типов, копируя их поля ввода данных.
  • FieldGroup - группирует поля ввода данных, так как у нас немного полей, то этот подмодуль нам не понадобится.
  • NodeReference - дает возможность добавить поле в котором можно указать на какую ноду ссылается вновь создаваемая, так например если мы создали новый материал "сотрудник", а у  этого сотрудника есть своя страничка типа Page на сайте, то можно было бы указать ссылку на эту страницу.
  • UserReference - дает возможность добавить поле в котором указывается ссылка на пользователя. Если бы у нас на сайте были зарегистрированы сотрудники, то при создание материала "сотрудник" можно было бы создать ссылку на соответствующего пользователя сотрудника.

Сохраним конфигурацию модулей. После этого должна появиться ссылка Типы материалов Admin menu в разделе Содержание:

drupal CCK Views imagecache подключение CCK ссылка в Admin menu.png

Добавим тип материала чуть позже, а пока преступим к установке следующих двух модулей.

FileField и ImageField Друпал

2. FileField и ImageField. Filefield добавляет поле загрузки файла, который прикрепляется к ноде. ImageField - такое же поле загрузки файла, только файл должен быть графическим (картинкой jpg, gif, png). Установим эти два модуля, которые понадобится для загрузки фотографий сотрудников.

drupal CCK Views imagecache подключение filefield imagefield.png

Сохраним конфигурации и приступим к установки следующих модулей.

Imagecache drupal

3. ImageCache и ImageAPI. ImageAPI - Это API предназначенный для использования вместо API предоставляемого стандартным image.inc. ImageCache в нашем случае позволит нам создать предобработку, пресэт (preset)  фотографий сотрудников, то есть если мы загружаем изображение сотрудников разной ширины и высоты, то ImageCache сделает вывод всех фотографий одинаковых размеров.

drupal CCK Views imagecache подключение ImageCache.png

Также можно использовать модуль lightbox2 для создания фотографий, которые по щелчку разворачиваются поверх окна до исходных размеров. Это очень удобно когда пресэты очень маленькие и фотографии трудно разглядеть, например если много сотрудников. После установки lightbox2 ко всем пресэтам добавляется автоматически выбор пресэта с lightbox-эффектом.

4. Модуль Views. Модуль Views - это конструктор запросов к БД, который позволяет без знания языка SQL выводить списки данных полученный с помощью сконструированного запроса. Установим этот модуль.

drupal CCK Views imagecache подключение Views.png

Сохраним конфигурацию. Необходимые нам модули для создания списка сотрудников с фотографиями готовы, приступим к созданию такого списка.

Создание списка сотрудников на Друпале

Для начала необходимо создать тип материала (content type) "сотрудник". Заходим через админ меню: Содержание - Типы материалов - Добавить тип материалов

drupal CCK Views imagecache Создание галереи.png

Обратите внимание на то что поля Имя будет выводиться в админ меню и его стоит заполнять на русском и понятно, а поле Тип используется Друпалом, поэтому его следует заполнить латиницей без пробелов и других знаков (возможно использование нижнего подчеркивания).

drupal CCK Views imagecache Создание галереи контент тип .png

Теперь среди прочих контент типов у нас есть и Сотрудник, давайте добавим нашему новему контент типу поля для ввода данных. Нажмите manage fields.

В строке New field заполните все поля:

Заголовок - можно заполнить на русском

field name - заполняется без пробелов (возможно нижние подчеркивание) латиницей

Type of data store (Тип хранимых данных) - выберем file, тогда откроется список возможных виджетов, в списке выберем image

drupal CCK Views imagecache Создание галереи контент тип добавление поля file.png

Нажимаем Сохранить и нас перенаправляет в следующее окно редактирования поля, сохраним эти настройки без изменений.

drupal CCK Views imagecache Создание галереи контент тип добавление поля file 2.png

Теперь у нашего контент типа Сотрудник появилось поле загрузки файла для фотографии сотрудника. Добавим также еще два поля "ФИО" и "О сотруднике". Для ФИО выберем тип хранимых данных "текст", в следующем открывшимся списке Text field. В следующем окне нужно увеличить длину поля ФИО хотя бы до 80. Я поставил длину равную 100 символов. 

drupal CCK Views imagecache Создание галереи контент тип добавление текстового поля.png

Для поля "О сотруднике" выбирем тип хранимых данных также "текст", но в следующим списке выбирем textarea (multiple rows). В разделе "Обработка текста" выберем "фильтрованный текст (пользователь выбирает формат входа)".

drupal CCK Views imagecache Создание галереи форматы вывода.png

Подробнее о форматах ввода я расскажу в одной из следующих статей.

Должны получиться следующие поля ввода данных:

drupal CCK Views imagecache Создание галереи контент тип добавление текстового поля textarea.png

Наш контент тип готов для создания первого сотрудника. Через админ меню заходим по ссылки "Содержание - Создать материал - сотрудник"

drupal CCK Views imagecache Создание галереи создание материала сотрудник.png

 Дальше необходимо заполнить данные о сотруднике точно также как и Запись в блоге, Page или Story, только теперь появились еще и поля добавленные нами Фотография сотрудника, ФИО, О сотруднике:

 

drupal CCK Views imagecache Создание галереи создание материала сотрудник заполнение полей.png

 Возможно у Вас появился вопрос, что писать в Заголовке и Содержимом сотрудника. На самом деле ФИО дублирует поле ввода Заголовок, а О сотруднике поле ввода Содержимое, фактически можно использовать Заголовок, чтобы записать фамилию, имя, отчество, а Содержимое, чтобы записать информацию о сотруднике. Я добавил эти поля, чтобы показать как работает CCK, можно было расширить контент тип Сотрудник полями должность, время работы, часы на рабочем месте, кабинет сотрудника, рабочее место и т.д.

Сохраним созданного нами сотрудника. Как я и говорил ранее все Сотрудники будут являться нодами, так например адрес созданного мной сотрудника Васи node/9. Сейчас у Вас URL-адрес сотрудника показывается латиницей или кириллицей (из-за модуля pathauto), но если Вы нажмете "Редактировать", то увидете, что адрес сменился на node/номер_ноды/edit.

Итак, мы теперь знаем как добавить сотрудников на сайт, теперь нужно сделать вывод сотрудников в удобном виде. Начнем с создания пресэта, я думаю Вы уже установили модуль ImageCache и ImageAPI,  если нет то самое время это сделать. Пресэт можно создать пройдя по ссылки Админ меню: Конструкция сайта - ImageCache - Add new preset.

drupal CCK Views imagecache Создание галереи создание пресета preset.png

Вводим имя пресэта, советую вводить в название ширину и высоту в пикселях через латинскую букву X. Для создания пресэта доступны следующие действия:

  • Add Crop - Кадрирование изображения в прямоугольник, c заданными смещением и размерами.
  • Add Deprecated Scale - Предшественник Scale and Crop. Это действие будет удалено в ImageCache 2.1.
  • Add Desaturate - Преобразование изображения в оттенки серого.
  • Add Resize - Изменение размеров изображения для точной системы измерений, игнорируя пропорции.
  • Add Rotate - Повернуть изображение.
  • Add Scale - Изменение размера изображения, сохраняя оригинальные пропорции (необходимо только одно значение).
  • Add Scale And Crop - Изменение размера изображения, сохраняя пропорции, затем обрезать его размерам.
  • Add Sharpen - Четкость изображения с помощью нерезкого маскирования.

 Сейчас нас интересует действие Add scale and crop, выбираем его. Я задам как это следует из названия пресэта размеры изображения 100 пикселей на 100 пикселей (то есть без знака %). Нажимаем сохранить и пресэт создан.

drupal CCK Views imagecache Создание галереи создание пресета preset 2.png

Теперь дело за модулей Views, который создаст запрос выводящий из БД всех сотрудников фирмы, причем их фотография будет как на пресэте 100 пикселей на 100 пикселей. Устанавливаем модуль Views и его подмодуль Views UI предоставляющий интерфейс для работы с ним.

Друпал Views

Через Админ меню зайдем в список уже существующих видов (View): Конструкция  сайта - Views. По умолчанию уже настроено несколько видов: Архив, Недавние комментарии, Главная страница, Глоссарий, Термины таксономии, Последние публикации - но они отключены также по умолчанию.

Нажмем "добавить" и создадим вид (view) галереи сотрудников. Имя вида лучше всего начинать с префикса view_ .

drupal CCK Views imagecache Создание галереи Views.png

В разделе View type следует указывать список свойств каких классов следует выводить, так как Сотрудник является нодой (node в этом переводе Материал), то и выбираем мы соответственно ноду.

После нажатие на кнопку Next, мы переходим в пользовательский интерфейс Views.

drupal CCK Views imagecache Создание галереи Views UI.png

Сейчас нас в большей мере интересуют 4 блока интерфейса, а именно Arguments, Sort criteria, Фильтры (filters), Поля (fields).

  • Arguments (аргументы) - позволяет фильтровать записи по аргументу, значению из URL страницы, например для node/17, аргумент будет равняться 17.
  • Поля (fields) - в этом разделе мы выбираем те поля, которые нам нужны из БД
  • Sort criteria - сортировка результата в том или ином порядке.
  • Фильтры (filters) - отбор результатов по заданным параметрам.

Начнем настраивать наш вид (view, в некоторых источниках "отображение"). Добавим поле:

drupal CCK Views imagecache Создание галереи Views UI fields.png

 Выберем поля из Группы Таксономия (Содержимое: ФИО, Содержимое: О сотруднике, Содержимое: Фотография сотрудника, возможно эти поля у Вас вынесены в отдельную группу Содержимое).

drupal CCK Views imagecache Создание галереи Views UI add fields.png

 Окно редактирования Configure field Содержимое: О сотруднике можно оставить без изменений, нажимаем "изменить". В Окне Configure field Содержимое: ФИО  нужно убрать заголовок:

drupal CCK Views imagecache Создание галереи Views UI add fields ФИО.png

В окне настроек Configure field Содержимое: Фотография сотрудника, необходимо убрать заголовок, и выбрать созданный ранее пресэт:

drupal CCK Views imagecache Создание галереи Views UI add fields фото сотрудника.png
 

Форматы фотографии могут быть следующих видов:

100Х100 - image - просто картинка без ссылки куда-либо.
100Х100 - image linked to node - картинка ссылка на ноду, в данном случае ноду того сотрудника, чья это фотография.
100Х100 - image linked to image - картинка ссылка на саму себя оригинального размера
 

Если у Вас установлен модуль lightbox2, то можно выбрать другой пресэт:

drupal CCK Views imagecache Создание галереи Views UI add fields фото сотрудника 2.png

После нажатия изменить в окне предпросмотра появится отображение страницы.

drupal CCK Views imagecache Создание галереи Views предпросмотр.png

Теперь для правильного отображения необходимо настроить фильтры. Добавим фильтр:

drupal CCK Views imagecache Создание галереи Views добавить фильтр(1).png

Вывод нужно отфильтровать по контент типу (Сотрудник) и выбрать из них опубликованные:

drupal CCK Views imagecache Создание галереи Views добавить фильтр 2.png

Выбираем только опубликованные и только Сотрудников.

Изменим порядок полей для отображения:

drupal CCK Views imagecache Создание галереи Views UI изменить порядок полей.png

Нажмите на кнопку справа от заголовка "Поля". Появится список полей, которые можно перемещать с помощью крестов слева от каждого поля. Лишние поля можно удалить, нажав на знак справа. Сохраним изменения.

 Добавьте еще несколько сотрудников, чтобы посмотреть как будет выглядеть вид. Теперь нужно выбрать страницу на которой будет отображаться этот вид, нужно выбрать "Страница" и нажать "add display"

drupal CCK Views imagecache Создание галереи Views UI add display.png

Теперь нужно указать путь по которому будет отображаться этот вид:

drupal CCK Views imagecache Создание галереи Views UI add path.png

Сохраните изменения и сохраните вид. Теперь данный вид доступен по адресу имя_сайта/sotrudniki. 

В следующем уроке я продолжу описывать модуль Views, вывод в блок и усовершенствуем список сотрудников.