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

Аватар пользователя Dan Dan 17 июня 2009 в 7: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, голосованием и т.д. и т.п., озвучивайте! :) Будет время - обязательно напишу.

0 Thanks

Комментарии

Аватар пользователя fly ancient fly ancient 29 ноября 2011 в 17:17

Дан,напишите плз., где почитать?
Так как я без понятия где найти нужную инфу.Я уже пытался подправить CSS но без безрезультатно,и к какому атрибуту обращаться? Обращался к field-items,field-item odd. но никаких результатов.
Пожалуйста помоги у меня уже нет сил я не первый день ломаю голову над этим вопросом!

Аватар пользователя fly ancient fly ancient 29 ноября 2011 в 18:23

Дан ОГРОМНОЕ СПАСИБО,всё получилось с атрибутами в CSS.

Теперь другой вопрос относящейся к views,при выборе галерей из списка галерей открывается node/85
где видна фото превью и ниже все фото галерей,выше фото превью есть ссылка на полную node,node/84,как сделать чтоб с списка галерей перекидовало сразу на node/84 где видны только фото галерей, ф не фото превю и все фото галерей.проще выражаясь без этой ноды node/85,которая не туда ни сюда!

Благодарю!!!

Аватар пользователя fly ancient fly ancient 29 ноября 2011 в 18:26
"RxB" wrote:

Всё лишь бы CSS не учить

Да я с удовольствием.....вот только нужный матерьял найти!!!

Аватар пользователя Dan Dan 30 ноября 2011 в 14:17
"fly ancient" wrote:

еперь другой вопрос относящейся к views,при выборе галерей из списка галерей открывается node/85
где видна фото превью и ниже все фото галерей,выше фото превью есть ссылка на полную node,node/84,как сделать чтоб с списка галерей перекидовало сразу на node/84 где видны только фото галерей, ф не фото превю и все фото галерей.проще выражаясь без этой ноды node/85,которая не туда ни сюда!

Ничего не понял :)

"RxB" wrote:

У вас тоже гугл на разлив?

Витя, почему у тебя гном старый? Где модная юнити?! У всех поцонов юнити, а ты чо?

Аватар пользователя R_e_m R_e_m 2 января 2012 в 0:17

Кстати для тех у кого не получилось приделать листалку privious/next:
Устанавливаем [module=custom_pagers]
Идём в настройки /admin/build/custom_pagers
By node type: Image
Use a view: выбираем наш gallery
View arguments: [field_gallery-nid] (ну или как у вас там это поле называется)

Всё.

Аватар пользователя R_e_m R_e_m 17 января 2012 в 18:23

Долго разбирался, сдаюсь, решил спросить )
Как в ноде с картинкой (типа image) вывести превьюхи других картинок из альбома, к которой приналежит данная картинка ?
Какие там arguments и relationships в этом случаи?
Вроде бы даже на друпал.орг нашёл метод как это делать, но почему то не работает..
Заранее спасибо.

Аватар пользователя FORTIS FORTIS 17 января 2012 в 17:57
"R_e_m" wrote:

Как в ноде с картинкой (типа image) вывести превьюхи других картинок из альбома, к которой приналежит данная картинка ?

это вьюха которая выводит материалы типа фото, аргументом будет поле фотки nodereference, в его настройках выбираем по-умолчанию, php-код, в котором будет что-то вроде:

if(arg(0)=='node' && is_numeric(arg(1))){
$photo_node = node_load(arg(1));
return $photo_node->field_album_ref[0]['nid'];
}
return;

field_album_ref это имя поля nodereference которое в ноде-фотке ссылается на альбом, php-код лучше переделать на простой запрос к базе без node_load, тут уже сами

Аватар пользователя R_e_m R_e_m 17 января 2012 в 19:30

Спасибо за ответы.
Не знаю, в целом вьюха правильная, т.е. без аргументов просто показываются все ноды типа image, как только вставляю какие либо аргументы, не показывает ничего. Пробовал разные коды, пока так и не получилось
Вот здесь они делают тоже самое, только мудрят что-то с relarionships. Там точно этого не нужно ?

Аватар пользователя FORTIS FORTIS 17 января 2012 в 19:34

в редактировании вьюса Live preview работает?

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

Аватар пользователя R_e_m R_e_m 17 января 2012 в 19:59

Да, нужно признать, что если импортировать их view и всё там аккуратненько изменить, то всё работает.
Хотя что бы не выглядеть совсем глупо замечу, что у них там во вьюхе больше чем описанно текстом =)
Еще раз спасибо!

Аватар пользователя zahis zahis 3 февраля 2012 в 10:03

Здравствуйте! Спасибо за такую подробную инструкцию. Она очень помогла разобраться во вьюз. До этого я не представляла, для чего нужны аргументы :)
Но вот только у меня все равно ничего не работает :( У меня такая же проблема, как уже обсуждала в комментариях. Вы написали, что нужно пропатчить veiws attach. но у меня версия этого модуля 2.2, т.е. патч мне не нужен. А поле Arguments: во вьюз у меня все равно неактивное :( я так понимаю, это и есть причина проблемы..
У меня вообще не отображаются картинки, настроенные во вьюз (т.е. обложка галереи и сама галерея), названия галереи и названия картинок выводятся только как текстовые ссылки.
Подскажите, пожалуйста, что можно сделать, чтобы Arguments: стали активными и чтобы все заработало?
Заранее спасибо!

Аватар пользователя zahis zahis 3 февраля 2012 в 10:58

импортировала Ваши вью - все заработало :((( вообще не понимаю, что я делала не так. проверила все значения, все вроде бы также... эх, видимо еще учиться и учиться...
Большое Вам спасибо! очень надеюсь когда-нибудь разбираться в друпале также, как Вы :)

Аватар пользователя Dan Dan 3 февраля 2012 в 14:45

Написанием этой статьи я преследовал несколько целей: во первых научить делать галерею из доступных модулей без программирования. Сейчас это уже не сильно актуально - есть модули, которые позволяют сделать подобное быстрее и проще. Во-вторых рассказать об основах работы со views и сопутствующими модулями. К сожалению эти модули достаточно сложны и простое копирование моих действий может не сработать - обязательно что-то пропускают :) Важнее понять как это работает. По какому принципу организованы связи выборки. Тогда моё руководство не понядобиться - зная основы можно "творить" самому.

Аватар пользователя zahis zahis 3 февраля 2012 в 14:50

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

Аватар пользователя fly ancient fly ancient 10 ноября 2015 в 11:48

Добрый,

Дан у меня вот такая не задача, немогу настройть чтоб "image_gallery" тоесть "Gallery cover"

был сылкой только на ноду галиреи, где не видны фото из "Gallery cover", а только "Gallery images".

На данный момент настроено так: вьюшка что выводит "Gallery cover" image_gallery_teaser_thumbnail image linked to node.Фото ведут на сам матерьял где видны фото из "Gallery cover" во весь размер и остальные фото галирей, а не вьюшка что выводит "Gallery images".

Как сделать чтоб вьюшка "Gallery cover" была сылкой сразу на "Gallery images"???

Создал матерьял типа Gallery, но сылки на добавление фото не оказалось. Как её вернуть?