Создание галереи с помощью CCK & Views. Часть 2

Прислано: Dan

ср, 17/06/2009 - 03:17

Вторая часть руководства по созданию собственной галереи на Drupal с помощью CCK и Views.
Первую часть можно найти здесь.

Продолжаем...

Типы данных созданы, теперь необходимо их правильно отобразить. В это нам поможет модуль Views, с его помощью мы сделаем два списка - для показа всех галерей и отображение всех изображений в галерее.

Список галерей

Views у нас находиться здесь - /admin/build/views, а новый список добавляется по пути /admin/build/views/add.
Создаём со следующими параметрами:

  • View name: gallery_list
  • View description: Gallery list
  • View type: node

Отлично, список создан! Теперь его надо настроить. Задача звучит так: показать список анонсов всех галерей сайта отсортированных по дате создания в порядке убывания.
Настраиваем:

  1. Basic settings (основные настройки)
    • Row style: Node - по умолчанию, в списке отображаются поля материалов, в нашем же случае нужны только анонсы (teaser) материалов; поэтому выбираем Node и далее: Build mode: Teaser, Display links: да (это включит отображение ссылок Read More)
    • Use pager: Yes (Full pager или Mini pager)
  2. Filters (Фильтры)
    • Node: Type: Is one of: Gallery (тип должен быть - Gallery)
    • Node: Published: Yes (нам нужны только опубликованные материалы)
  3. Sort criteria (сортировка)
    • Node: Post date desc (дата создания, убывание)

Настройки вашего списка будут выглядеть примерно так (скрин 5).
Осталось создать отдельную страницу для нашего списка. Это делается добавлением дисплея типа страница: Выберите Page и нажмите кнопку "Add display". Теперь в настройках страницы (Page settings) надо добавить путь (gallerys) и (по желанию) пункт меню: Normal menu entry, Title: Gallerys, Menu: Navigation.
Теперь можно сохранять!
После сохранения в меню навигации должен был появиться пункт Gallerys и, если вы уже добавляли галереи, при переходе на него вы увидите список галерей.

Вот мой скриншот этого списка.

Настройка отображения изображений

Почти всё готово для создания списка фотографий в галерее. Осталось перед этим сделать самую малость: настроить уменьшенные копии картинок (иконки, thumnails).
Этим благим делом занимается модуль imagecache. Путь - /admin/build/imagecache, создать новую настройку - /admin/build/imagecache/add. Cоздадим настройки (preset): image_gallery_node_thumbnail (изображения в галереи) и image_gallery_teaser_thumbnail (обложка галереи). Будем использовать операцию "Scale And Crop" (пропорциональное изменение масштаба и обрезка) для обеих настроек, отличия будут только в цифрах: для первой настройки 200х200, для второй - 150х150. Впрочем, Вы можете не придерживаться моих цифр, а поэкспериментировать со своими, - их можно поменять в любой момент. Только не забудьте сбросить старые картинки (ссылка Flush у настройки).
Ну что же, остался последний шаг.

Список изображений в галерее

Теперь необходимо настроить отображение всех изображений, прикреплённых к галереи и создать обложку галереи.
Создаём новый список. Параметры:

  • View name: gallery
  • View description: Image gallery
  • View type: node

Настройки:

  1. Basic settings (основные настройки)
    • Style: Grid (стиль отображения - сетка). Number of column - 3 (в три столбца), Aligment - Horizontal (расположение - горизонтально)
    • Use pager: Yes (использовать пейджер [листалку])
  2. Filters (фильтры)
    • Node: Type: Is one of: Image (тип матерала - image)
    • Node: Published: Yes (материал должен быть опубликован)
  3. Fields (поля для отображения)
    • Content: Image (field_image_image): Label - none, Link this field to its node - on (поле, добавленное с помощью модуля CCK (content), название поля (Label) мы уберём и сделаем это поле ссылкой на материал, которому оно принадлежит)
    • Node: Title: Label - empty (заголовок материала, для этого поля можно тоже включить "Link this field to its node")
  4. Arguments (аргументы)
    Аргументы у списков это посчти тоже что аргументы у функций. В данном случае у нас аргументом является номер материала (node nid) типа Gallery. То есть мы отфильтровываем все изображения которые указывают на галерею номер .
    • Content: Gallery (field_image_gallery): Action to take if argument is not present (что делать если аргумент отсутствует): Provide default argument (подставить значение по умолчанию...), Default argument type: Node ID from URL (... а взять это значение из URL)
  5. Sort (сортировка)
    • Node: Title: Ascending (сортировка по заголовкам материалов в алфавитном порядке, возможно лучше сделать сортировку по дате создания изображения, оставляю решение этого вопроса на откуп Вам :)

Теперь основное на данном этапе - добавляем два дисплея (два вида отображения списка): один для показа изображений в галерее, другой - для показа обложки галереи.
Выбираем тип дисплея - "Node content" и добавляем два раза. Чтобы их различать, сразу зададим им имена (Basic settings, Name): Gallery images и Gallery cover.

Настройки у дисплеев такие:

Gallery images

  • Node content settings
    • Node types: gallery (прикрепить к типу материала gallery)
    • Build modes: Full node (режим отображения - полная нода)
    • Default argument: [nid] (аргумент по умолчанию. Непропатченная версия не работает здесь, то есть игнорирует указание токена)
    • Show title: No (показывать заголовки)

Gallery cover

  • Node content settings
    • Node types: gallery (прикрепить к типу материала gallery)
    • Build modes: Teaser (режим отображения - анонс)
    • Default argument: [nid] (аргумент по умолчанию)
    • Show title: No (показывать заголовки)
  • Basic settings - базовые настройки для этого дисплея необходимо изменить. Чтобы изменения не затронули дисплей по умолчанию, надо эти настройки "перекрыть", делается это просто - открываем любую настройку в Basic settings и нажимаем кнопку Override (справа вверху). Далее выставляем следущее:
    • Style: Unformatted (стиль отображения: без форматирования)
    • Items to display: 1 (количество материалов для отображения)

На всякий случай привожу скриншоты всех трёх дисплеев:
Default
Gallery images
Gallery cover

После всего вышеописанного у меня получилось примерно так :)

Также прикрепляю экпорт типов материалов и списков для этого руководства:

Если у вас есть идеи и желание в продолжении руководства, например интеграция с lightbox, голосованием и т.д. и т.п., озвучивайте! :) Будет время - обязательно напишу.

Attached poll "Что желаете увидеть в третьей части этого руководства?".
Register or login to poll
Results:
множественная загрузка изображений: 90 голосов
настройка карусели: 62 голоса
прикручивание lightbox/thikbox: 75 голосов
избавление от модуля views_attach: 42 голоса

Комментарии


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

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано Hitmrrr в ср, 17/06/2009 - 07:15.

спасибо!


Опубликовано gerboss в ср, 17/06/2009 - 09:11.

спасибо!!!!
только в настройках Gallery cover маленькая описка:
Build modes: Full node (режим отображения - анонс)
как понятно из комментария и скриншота Build modes не "Full node", а "Teaser".


Опубликовано Dan в ср, 17/06/2009 - 10:39.

2gerboss: спасибо, поправил )


Опубликовано pmserg2000 в ср, 17/06/2009 - 11:00.

Подскажите, плиз, что нужно сделать для того чтобы в списке фильтров при настройке списков галерей выпадала надпись Node:Type: is one of: Gallery. Спасибо.


Опубликовано digital_sword в ср, 17/06/2009 - 11:16.

Не все ясно. Вы создали тип Gallery cover, для показа обложки галереи. Он где используется? Как я понял, у меня на странице списка галерей стоит gallery_list.
И как в этом gallery_list показывать не аннотацию галерей, а только одну фотку из галереи?

И про аргументы не ясно. Все конечно получилось, но как... Где можно про аргументы почитать подробнее? Или напримере [nid] объясните, пожалуйста, что где откуда берет и как работает.

pmserg2000, выбираете в списке фильтров Node:Type (Материал: Заголовок). Жмете "Добавить". А потом Ставите переключатель "is one of:" и галку "Gallery"


Опубликовано pmserg2000 в ср, 17/06/2009 - 11:19.

Спасибо!


Опубликовано pmserg2000 в ср, 17/06/2009 - 12:56.

Подскажите, плиз, какие действия нужно предпринять, чтобы в настройках view появился блок Node content settings?


Опубликовано Venice@drupal.org в ср, 17/06/2009 - 13:08.

Спасибо, вроде бы получилось. Непонятно, как для обложки галереи добавить картинку. А то список галерей отображается текстовыми ссылками.


Опубликовано pmserg2000 в ср, 17/06/2009 - 13:20.

Нашел!


Опубликовано Dan в ср, 17/06/2009 - 13:25.

2digital_sword: про аргументы можно написать отдельное руководство :) Здесь просто совмещено несколько подходов, поэтому кажется всё сложным.

Попробую вкратце объяснить:
1. Аргументы. Это фильтры, параметры которых мы может задавать вне views. Например создать список материалов с аргументом User ID, который будет браться из адресной строки. Тогда обращаясь к нашему списку с разными uid, мы получим списки материалов конкретных пользователей.
2. Node reference. Это CCK поле которое позволяет организовать связь один к одному, оди ко многим, многие к одному между материалами.
3. Views attach. Это "вживление" списков в материалы и профили пользователей.

Сочетание этих техник и модулей позволило создать эту галерею.


Опубликовано Dan в ср, 17/06/2009 - 13:27.

"Venice@drupal.org" написал(а):

Спасибо, вроде бы получилось. Непонятно, как для обложки галереи добавить картинку. А то список галерей отображается текстовыми ссылками.

Обложка добавляется дисплеем "Gallery cover".


Опубликовано Geldora в ср, 17/06/2009 - 14:36.

Модераторы! Добавьте пож-ста, и первое, и второе руководство в Книгу! А второе можно на главную :)


Опубликовано Сашка в ср, 17/06/2009 - 20:59.

Дан, спасибо за статейку. Обожаю изящные решения без php-хардкора. От себя могу только добавить следующее.

Факт: при сильном уменьшении картинки теряют чёткость и «замыливаются». Очень полезно при таких обстоятельствах к мелким картинкам, которые уменьшаются в 3-5 и более раз, применять стандартный Sharpen, настройки по-умолчанию — radius: 0.5, sigma: 0.5, amount: 5, threshold: 0.1 — самое то если Вы не умеете пользоваться этим. Можно увеличить радиус до 1 и постепенно прибавлять amount, пока резкость не начнёт «бросаться» в глаза, после чего вернуться пред-пред-предыдущему значению:) Самый, на мой взгляд, отличный вариант это применять резкость к предварительно уменьшенному изображению: Скажем, 1. уменьшить до 320х240, 2. применить резкость, а потом 3. доуменьшить к необходимому размеру, например, 160х120:) Хороший результат требует ресурсов. Ахтунг: В зависимости от версии php+gd резкость может не применяться...!


Опубликовано Venice@drupal.org в ср, 17/06/2009 - 22:49.

Фотка в обложке ну никак не выводится!!!! Просто ссылка текстовая на галерею. Скриншоты все сравнила, вроде все так же.
Какой параметр за нее отвечает?
Поясню поподробнее. Есть ссылка в главном - Фотогалерея
ОТкрывается страница - на ней список из трех созданных мной галерей - в виде их названий - гиперссылок на сами галереи.
А можно к названиям добавить картинки-ссылки? И какие это будут картинки - специальные или, например, первая добавленная в галерею?
Очень нужны здесь картинки. Они должны были появиться при правильной настройке согласно это статье?


Опубликовано Dan в чт, 18/06/2009 - 03:04.

Попробуйте удалить списки и импортируйте те, которые я приложил к руководству.
Модуль Views Attach установлен патченный?


Опубликовано Александр Алекс... в чт, 18/06/2009 - 08:37.

Использую тему Garland, если сузить окно обозревателя, превьюшки галереи наезжают на меню в правой колонке. Как этого можно избежать?


Опубликовано Dan в чт, 18/06/2009 - 09:24.

В данном случае изображения выводятся в стиле Grid, а это - таблица. Можно поменять стиль на List Style, наприммер, в CSS темы добавить что-то вроде
.view-gallery li{ float: left; list-style: none; }


Опубликовано robosasa в чт, 18/06/2009 - 10:17.

Ссылка Add Photo а альбоме видна только админу, соответственно никто не может добавлять фотографии. Копался в разрешениях - ничего. У ролей вроде все необходимые разрешения есть. Не подскажете, в чем проблема?


Опубликовано Dan в чт, 18/06/2009 - 11:51.

<?php
  if (.... && user_access('create ' . $field['type_name'] . ' content')) {...
?>

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


Опубликовано Venice@drupal.org в чт, 18/06/2009 - 14:08.

Dan написал(а):

Попробуйте удалить списки и импортируйте те, которые я приложил к руководству.
Модуль Views Attach установлен патченный?

Нашла таки ошибку в списке gallery cover! Спасибо за статью!
А можно сделать возможность для уже размещенной картинке менять галерею? Пока получается только удалением- вставкой.


Опубликовано robosasa в чт, 18/06/2009 - 16:33.

Спасибо! Закомментил - заработало.


Опубликовано Dan в чт, 18/06/2009 - 17:16.

"robosasa" написал(а):

Спасибо! Закомментил - заработало.

Нет, так не пойдёт :)
user_access системная функция, а значит у Вас неправильно настроена система. Внимательно посмотрите разрешения, - есть ли у нужных пользователей право "create image content" (и заодно "create gallery content")?

Модуль Content Permissions включен?

Вы другим пользователем пробуете добавлять в существующую галерею или им же создаёте галерею, а потом добавляете?


Опубликовано News в пт, 19/06/2009 - 06:54.

Даниэль, что за динамо происходит с моим заказом??!
В аське и почте ты мои сообщения игнорируешь, я уж думал мало ли что, человек в больницу попал! А оказывается он жив-здоров, общается на форуме.
Надеюсь услышать _убедительные_ объяснения происходящему.


Опубликовано abalashov в пт, 19/06/2009 - 07:46.

Дан, такая ситуация.

Все сделал, все красиво работает, но появилась проблема.
Неопытные пользователи заходят в Галерею, тыкают на фотку и им открывается фотка, после чего они ее закрывают.
Суть, как сделать так, что бы при клике на изображение (cover gallery) открывалась галерея, а не превьюшная фотография.?

Спасибо


Опубликовано robosasa в пт, 19/06/2009 - 13:04.

Заработало. В Content Permissions не стоял чек на edit field_gallery

Спасибо!


Опубликовано Loasty в пт, 19/06/2009 - 14:16.

Как интегрировать с swfupload для загрузки фотографий оптом?


Опубликовано robosasa в пт, 19/06/2009 - 17:47.

Loasty написал(а):

Как интегрировать с swfupload для загрузки фотографий оптом?

В настройках поля Image выбираете соответствующий виджет, в его настройках Storage mode: One image per node и не забудьте указать Redirect url, чтоб после загрузки возвратиться в галерею.


Опубликовано Loasty в пт, 19/06/2009 - 18:01.

"robosasa" написал(а):

В настройках поля Image выбираете соответствующий виджет, в его настройках Storage mode: One image per node и не забудьте указать Redirect url, чтоб после загрузки возвратиться в галерею.

Я так понимаю при этом swfupload будет работать на странице создания ноды типа image? Как-то не логично получается...


Опубликовано robosasa в пт, 19/06/2009 - 20:52.

"Loasty" написал(а):

Я так понимаю при этом swfupload будет работать на странице создания ноды типа image? Как-то не логично получается...

Почему же? Все логично. У вас создастся энное количество нод типа Image с ссылкой на соответствующий альбом. Все работает, я проверял.


Опубликовано Dan в пт, 19/06/2009 - 21:56.

"abalashov" написал(а):

Суть, как сделать так, что бы при клике на изображение (cover gallery) открывалась галерея, а не превьюшная фотография.?

1. Для начала можно вообще убрать ссылку, дабы неповадно было :) -- Views: gallery, Дисплей: Gallery cover, Поле: Content: Image; снимаем галочку "Link this field to its node"
2. Ну а теперь можно навесить свою ссылку. Для этого нам потребуется установить связь (Relationship). Добавляем новую связь (в блоке Relationships) -- Content: Gallery, затем добавляем новое поле -- Node: Nid, настройки поля: Связь (Relationship): Gallery, Exclude from display: on (исключить из показа). Теперь надо изменить сортировку полей - это делает кнопочка с двумя стрелками, рядом с плюсиком у полей - поле Node: Nid должно быть первым. Теперь подредактируем поле Content: Image -- Output this field as a link: on (выводить это поле как ссылку), Link path: node/[nid]
Сохраняем всё.
Конец.

"Loasty" написал(а):

Как интегрировать с swfupload для загрузки фотографий оптом?

Вам уже ответили. Может и нелогично, но думаю без строчки кода тут не обойтись. Будет время - посмотрю как добавить ссылку в галерею.


Опубликовано Loasty в сб, 20/06/2009 - 11:02.

"robosasa" написал(а):

Почему же? Все логично. У вас создастся энное количество нод типа Image с ссылкой на соответствующий альбом. Все работает, я проверял.

Просто было бы лучше на странице редактирования галлереи загружать картинки.


Опубликовано pmserg2000 в сб, 20/06/2009 - 13:34.

Здравствуйте!Подскажите, плиз, у меня при нажатии на кнопку "Загрузить фото" выводит следующую ошибку: Произошла HTTP ошибка 0. \n/?q=filefield/ahah/images/field_image_image/0. Как мне от не избавиться?Может я модуль filefield неправильно установил?Может его надо в папку с модулем CCK закинуть?


Опубликовано Hitmrrr в пн, 22/06/2009 - 05:52.

Как прицепить Lightbox2 ?


Опубликовано Hitmrrr в вт, 23/06/2009 - 02:55.

кто нить ответит на вопрос? :)


Опубликовано robosasa в ср, 24/06/2009 - 07:39.

Hitmrrr написал(а):

кто нить ответит на вопрос? :)

1. Устанавливаете модуль.
2. В настройках типа содержимого Image выбираете у поля фотографии отображение Lightbox.


Опубликовано Venice@drupal.org в ср, 24/06/2009 - 13:34.

В Internet explorer 8-ой версии в варианте отображения GRID фотки галереи отображаются сжатыми в ширину, например 12 px вместо 80. В режиме HTML список или Unformatted все нормально. Та же проблема в некоторых версиях Оперы. Никто не сталкивался с такой проблемой?


Опубликовано Александр Алекс... в чт, 25/06/2009 - 04:21.

Подскажите, почему могут не отображаться картинги в списке галерей (“обложке”) для незарегистрированного (анонимного) пользователя? Как это можно изменить? Разрешения для этого пользователя отмечены все, какие есть. Для зарегистрированного пользователя все работает. Списки импортированы из этого руководства.


Опубликовано Limus в чт, 25/06/2009 - 13:21.

Не могу сохранить Viwes в первом шаге(Список галерей) при сохранении постояно вы водиться
"Display "По умолчанию" uses fields but there are none defined for it or all are excluded."

и если кто может подскажите другоё более лёгки способ по созданию вот таких страничек(http://onlineguru.ru/).
Мне нужно создать страничку на которой будет выводиться сеткоё по 12 материалов с картинуами.


Опубликовано Limus в чт, 25/06/2009 - 13:51.

всё разобрался)


Опубликовано kodo в пт, 26/06/2009 - 09:28.

"Loasty" написал(а):

Как интегрировать с swfupload для загрузки фотографий оптом?

У swfupload отвратительная особенность, что при создании перевода ноды для мультиязычных сайтов, изображения не копируются... :( При этом если обратно установить просто image все ок.


Опубликовано Loasty в пт, 26/06/2009 - 09:47.

Создал галлерею, через неделю увидел что обьем памяти уменьшилось. Как оказалось, при удалении рисунка из галлереи, в папках imagecache они продолдают своё существование... мда...


Опубликовано Александр Алекс... в пт, 26/06/2009 - 11:32.

“Только не забудьте сбросить старые картинки (ссылка Flush у настройки)”

Вроде, помогает, если удаляешь картинку из галереи, ненужного не остается.


Опубликовано Dan в пт, 26/06/2009 - 18:04.

"Loasty" написал(а):

Создал галлерею, через неделю увидел что обьем памяти уменьшилось. Как оказалось, при удалении рисунка из галлереи, в папках imagecache они продолдают своё существование... мда...

Естественно. Зачем отслеживать удаление _любых_ файлов на севере (а imagecache может работать с любыми файлами, доступными веб-серверу), когда можно раз в полгода делать очистку кэша картинок (flush)? А можно и не делать - место на хостинге стоит копейки и картинки - это не видео :)


Опубликовано Loasty в пт, 26/06/2009 - 18:08.

Dan Хорошо, буду делать flush


Опубликовано aliaric в сб, 27/06/2009 - 09:50.

Dan
Такой вопрос... Если я хочу сделать в блоке частичное превью этой галлереи (скажем 4 случайных галлереи из всех).
Я просто во view gallery_list добавляю блок, настраиваю его. Но он "сцепляется" с gallery_cover. А там картинки слишком большие. Как мне сделать новый дисплей или view чтобы в блоке картинки были маленькие?


Опубликовано Dan в сб, 27/06/2009 - 18:16.

views_attach, по сути, формирует тизер. Мы можем только заменить тизер на поля, но такого поля, как картинка у нас нет, для этого надо вместо views_attach использовать, например, node_reference.

Как вариант могу предложить отталкиваться от обратного - сделать рандомный вывод изображений, и связями (relationships) добавить описание галереи, к которой привязано изображение.


Опубликовано boodooboo в вс, 28/06/2009 - 17:24.

Я даже не знал (не зря говорят: век живи - век учись), что пользуясь грамотно аргументами можно вытворять такие штуки.
Спасибо автору за подробную инструкцию.


Опубликовано Dan в вт, 30/06/2009 - 06:09.

Это только верхушка айсберга работы с аргументами. Они гораздо мощнее.
Вливайся :)


Опубликовано Hitmrrr в ср, 01/07/2009 - 11:55.

насчет swfupload подскажите, пожалуйста, куда нужно тыкнуть, что бы он заработал? :)

у меня Image FUpload

поставил все как было сказано выше, но ничего не изменилось.


Опубликовано Dan в ср, 01/07/2009 - 18:11.

У меня он тоже не заработал для существующего типа материала. Создал новое - всё ок. Разбираться не стал. Попробуйте.