Блог Ievgenii

Создание галереи в Drupal используя ССK и Views

// April 20th, 2010 // Pro

В данной статье расскажу как создать галерею в Drupal. Могу честно признаться, для меня на второй день знакомства с этой CMS/F это не просто было не смотря на большой опыт работы с Joomla. Для того чтобы создать галерею в joomla понадобится специальный модуль и не более получаса работы. А в Drupal гораздо больше, особенно для новичков.

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

Подготовка

Всё делалось на Drupal 6.10 и использовались следующие модули:

• CCK 6.x-2.2
• Views 6.x-2.3
• Filefield 6.x-3.0-rc1
• Imagefield 6.x-3.0-rc1
• ImageAPI 6.x-1.6
• Imagecache 6.x-2.0-beta9
• Lightbox2 6.x-1.x-dev

Все эти модули можно скачать с сайта Drupal.

Установка модулей

После того как скачали все модули распаковываем их и копируем в директорию с нашими модулями. Она находится по адресу <ваш_сайт>/sites/all/modules/. На моём локальном сервере путь к модулям имеет следующий вид: C:\wamp\www\drupaltest\sites\all\modules\. Не забываем, что каждый модуль должен находится в отдельной папке.

Активация модулей

Теперь требуется активировать установленные модули. Авторизируйтесь в админке и зайдите в раздел с модулями: Site building > Modules или по адресу <имя_домена>?q=admin/build/modules. В списке модулей найдите ниже указанные модули и активируйте их (поставив галочку в чекбоксе под Enabled).

• Content
• Filefield
• Imagefield
• ImageAPI
• ImageAPI GD2
• ImageCache
• ImageCache UI
• Lightbox
• Views
• Views UI

Нажмите Save configuration внизу страницы.

Настройка ImageСache

Для корректной работы ImageСache изменим настройки сайта. Откроем следующую страницу: Site configuration > File system, и изменим Download method с Public на Private, что позволит Drupal самостоятельно перемещать файлы без вашей помощи. Сохраним настройки Save configuration.

Создадим две предустановки для наших будущих картинок, а точнее предустановки для эскизов картинок и лайтбоксов (картинки более крупного размера).

1. Открываем Site building > ImageСache.
2. Нажимаем на кнопку Add new preset.
3. В поле Preset Namespace вписываем имя thumbnail.
4. Нажимаем кнопку Create New Preset.
5. Откроется окно Edit preset: thumbnail, в котором добавим действие для данной предустановки.
6. Под заголовком New Actions выбираем Add Scale And Crop, что означает “масштабировать и урезать”.
7. В открытом окне Add imagecache_scale_and_crop to thumbnail зададим следующие размеры ширины и высоты: 180 и 120. Данный размер указывается в пикселях.
8. Нажимаем кнопку Add Action.

Только что мы создали предуствноку, которая будет создавать эскизы картинок указного размера и обрезать по краям то, что не поместилось.

А теперь создадим предустановку для вывода картинок большого размера. Выполним вышеуказанные действия для создания для thumbnail только со следующими параметрами:
Preset Namespace:lightbox
New Actions: Add Scale
Width: 800
Height: 600

В результате на странице Site building > ImageCache должны увидеть следующую картину:

Настройка CCK Imagefield

Создадим новый тип для наших картинок. Для этого перейдем на Content management > Content types. Вы увидите уже существующие типы Page и Story, о которых я упоминал в предыдущей статье.

1. Нажимаем Add content type.
2. Под заголовком Identification указываем название (Name) Image и тип (Type) с маленькой буквы image. Если хотите можете указать описание, но это не обязательно.
3. Под заголовком Submission form settings удаляем очищаем поле Body field label от Body.
4. Под Workflow settings снимаем галочку с Promoted to front page, чтобы наши загружаемые картинки не показывали на первой странице сайте.
5. Под Comment settings деактивируем комментарии к картинкам – меняем состояние Default comment setting на Disabled.
6. Сохраняем наш тип: Save content type.

Напротив созданного типа нажимаем manage fields и добавляем новое поле.
В поле Label указываем вписываем Image, далее в поле Field name пишем image, в Type of data to store выбираем File, в Form element to edit the data выбираем Image.
Нажимаем Save. Далее откроется окно, в котором находим поле Permitted upload file extensions: и вводим следующие расширения jpg gif png через пробел. Это расширения файлов, которые пользователь может загрузить. Также на этой страницы вы можете задать и другие параметры, например ограничение по размеру файла. Для сохранения нажимаем Save field settings.
После этого увидим следующий результат.

А теперь нажимаем Display fields в этом же окне и зададим вид наших картинок в контексте.
В поле Label выберем Hidden, в Teaser и Full node устанавливаем Lightbox2: thumbnail->lightbox.

Нажимаем Save.

Добавления картинок

А теперь добавим картинки для будущей галереи. Открываем Content Managment > Create Content > Image и загружаем по очереди картинки: указываем имя картинки, выбираем её на диске и нажимаем кнопку Save.

Создание представления (View)

Теперь создадим представление для нашей галереи.

1. Откроем Site building > Views.
2. Нажимаем Add.
3. В поле View name указываем имя Gallery.
4. Переходим к следующей странице нажав Next.
5. Изменяем Title на Gallery.
6. Выбираем для Style стиль Grid, остальное не трогаем (4 колонки и Alignment в Horizontal)
7. Для Use pager устанавливаем Full pager.
8. В Items to display вписываем 16 (т.е. на странице будет 4 строки и 4 столбца)
9. Для Fields выбираем Content: Image (field_image), меняем Label на None и в Format выбираем Lightbox2: thumbnail->lightbox.
10. Отсортируем картинки чтобы новые были первыми, для этого в Sort criteria выбираем Node: Post date и устанавливаем Descending.
11. Устанавливаем следующие фильтры для поля Filters: Node: Published = On и Node: Type = Image. Т.е. показывать все опубликованные данные типа Image.

В результате должно получится следующая картина.

Теперь создадим страницу для нашего созданного представления.
Слева в выпадающем списке выбираем Page и нажимаем Add display. Ниже появятся настройки для страницы Page settings. Укажем параметр Path, пусть страница так и называется gallery. Нажимаем кнопку Update и страница готова.
Если вы заметили то внизу показывается просмотр представления, над которым мы работали.
А теперь сохраним созданное представление нажав на кнопку Save.
Финальный вид представления.

Доступность галереи

Как не странно, но большинство из вас если откроет созданную страницу ?q=gallery (у меня этот запрос имеет вид: http://localhost/drupaltest/?q=gallery). то ничего не увидит кроме Page not found. А проблема в том, что требуется сменить права доступа для пользователей сайта.
Для этого открываем страницу User management > Permissions. И активируем нижеуказанные пункты для anonymous user:

• view field_image
• view imagecache lightbox
• view imagecache thumbnail

Теперь вы можете просмотреть результат нашей работы на странице ?q=gallery.

И с просмотром полной картинки.

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

Похожие посты блога:

1. Добавление голосования и текстовых полей для галереи в Drupal
2. Как настроить VPN на маршрутизаторе D-Link DI-524