Создание галереи с помощью 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
Отлично, список создан! Теперь его надо настроить. Задача звучит так: показать список анонсов всех галерей сайта отсортированных по дате создания в порядке убывания.
Настраиваем:
- Basic settings (основные настройки)
- Row style: Node - по умолчанию, в списке отображаются поля материалов, в нашем же случае нужны только анонсы (teaser) материалов; поэтому выбираем Node и далее: Build mode: Teaser, Display links: да (это включит отображение ссылок Read More)
- Use pager: Yes (Full pager или Mini pager)
- Filters (Фильтры)
- Node: Type: Is one of: Gallery (тип должен быть - Gallery)
- Node: Published: Yes (нам нужны только опубликованные материалы)
- 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
Настройки:
- Basic settings (основные настройки)
- Style: Grid (стиль отображения - сетка). Number of column - 3 (в три столбца), Aligment - Horizontal (расположение - горизонтально)
- Use pager: Yes (использовать пейджер [листалку])
- Filters (фильтры)
- Node: Type: Is one of: Image (тип матерала - image)
- Node: Published: Yes (материал должен быть опубликован)
- 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")
- 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)
- 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
После всего вышеописанного у меня получилось примерно так :)
Также прикрепляю экпорт типов материалов и списков для этого руководства:
- CCK
- Views
Если у вас есть идеи и желание в продолжении руководства, например интеграция с lightbox, голосованием и т.д. и т.п., озвучивайте! :) Будет время - обязательно напишу.
Attached poll "Что желаете увидеть в третьей части этого руководства?".Register or login to poll
Results:
множественная загрузка изображений: 90 голосов
настройка карусели: 62 голоса
прикручивание lightbox/thikbox: 75 голосов
избавление от модуля views_attach: 42 голоса
- Dan's blog
- Для комментирования войдите или зарегистрируйтесь
спасибо!
- Для комментирования войдите или зарегистрируйтесь
спасибо!!!!
только в настройках Gallery cover маленькая описка:
Build modes: Full node (режим отображения - анонс)
как понятно из комментария и скриншота Build modes не "Full node", а "Teaser".
- Для комментирования войдите или зарегистрируйтесь
2gerboss: спасибо, поправил )
- Для комментирования войдите или зарегистрируйтесь
Подскажите, плиз, что нужно сделать для того чтобы в списке фильтров при настройке списков галерей выпадала надпись Node:Type: is one of: Gallery. Спасибо.
- Для комментирования войдите или зарегистрируйтесь
Не все ясно. Вы создали тип Gallery cover, для показа обложки галереи. Он где используется? Как я понял, у меня на странице списка галерей стоит gallery_list.
И как в этом gallery_list показывать не аннотацию галерей, а только одну фотку из галереи?
И про аргументы не ясно. Все конечно получилось, но как... Где можно про аргументы почитать подробнее? Или напримере [nid] объясните, пожалуйста, что где откуда берет и как работает.
pmserg2000, выбираете в списке фильтров Node:Type (Материал: Заголовок). Жмете "Добавить". А потом Ставите переключатель "is one of:" и галку "Gallery"
- Для комментирования войдите или зарегистрируйтесь
Спасибо!
- Для комментирования войдите или зарегистрируйтесь
Подскажите, плиз, какие действия нужно предпринять, чтобы в настройках view появился блок Node content settings?
- Для комментирования войдите или зарегистрируйтесь
Спасибо, вроде бы получилось. Непонятно, как для обложки галереи добавить картинку. А то список галерей отображается текстовыми ссылками.
- Для комментирования войдите или зарегистрируйтесь
Нашел!
- Для комментирования войдите или зарегистрируйтесь
2digital_sword: про аргументы можно написать отдельное руководство :) Здесь просто совмещено несколько подходов, поэтому кажется всё сложным.
Попробую вкратце объяснить:
1. Аргументы. Это фильтры, параметры которых мы может задавать вне views. Например создать список материалов с аргументом User ID, который будет браться из адресной строки. Тогда обращаясь к нашему списку с разными uid, мы получим списки материалов конкретных пользователей.
2. Node reference. Это CCK поле которое позволяет организовать связь один к одному, оди ко многим, многие к одному между материалами.
3. Views attach. Это "вживление" списков в материалы и профили пользователей.
Сочетание этих техник и модулей позволило создать эту галерею.
- Для комментирования войдите или зарегистрируйтесь
Спасибо, вроде бы получилось. Непонятно, как для обложки галереи добавить картинку. А то список галерей отображается текстовыми ссылками.
Обложка добавляется дисплеем "Gallery cover".
- Для комментирования войдите или зарегистрируйтесь
Модераторы! Добавьте пож-ста, и первое, и второе руководство в Книгу! А второе можно на главную :)
- Для комментирования войдите или зарегистрируйтесь
Дан, спасибо за статейку. Обожаю изящные решения без 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 резкость может не применяться...!
- Для комментирования войдите или зарегистрируйтесь
Фотка в обложке ну никак не выводится!!!! Просто ссылка текстовая на галерею. Скриншоты все сравнила, вроде все так же.
Какой параметр за нее отвечает?
Поясню поподробнее. Есть ссылка в главном - Фотогалерея
ОТкрывается страница - на ней список из трех созданных мной галерей - в виде их названий - гиперссылок на сами галереи.
А можно к названиям добавить картинки-ссылки? И какие это будут картинки - специальные или, например, первая добавленная в галерею?
Очень нужны здесь картинки. Они должны были появиться при правильной настройке согласно это статье?
- Для комментирования войдите или зарегистрируйтесь
Попробуйте удалить списки и импортируйте те, которые я приложил к руководству.
Модуль Views Attach установлен патченный?
- Для комментирования войдите или зарегистрируйтесь
Использую тему Garland, если сузить окно обозревателя, превьюшки галереи наезжают на меню в правой колонке. Как этого можно избежать?
- Для комментирования войдите или зарегистрируйтесь
В данном случае изображения выводятся в стиле Grid, а это - таблица. Можно поменять стиль на List Style, наприммер, в CSS темы добавить что-то вроде
.view-gallery li{ float: left; list-style: none; }
- Для комментирования войдите или зарегистрируйтесь
Ссылка Add Photo а альбоме видна только админу, соответственно никто не может добавлять фотографии. Копался в разрешениях - ничего. У ролей вроде все необходимые разрешения есть. Не подскажете, в чем проблема?
- Для комментирования войдите или зарегистрируйтесь
<?php if (.... && user_access('create ' . $field['type_name'] . ' content')) {... ?>
В модуле есть проверка прав пользователя на создание типа материала. Есть и другие проверки, но если под админом показывается, значит дело только в этом.
- Для комментирования войдите или зарегистрируйтесь
Попробуйте удалить списки и импортируйте те, которые я приложил к руководству.
Модуль Views Attach установлен патченный?
Нашла таки ошибку в списке gallery cover! Спасибо за статью!
А можно сделать возможность для уже размещенной картинке менять галерею? Пока получается только удалением- вставкой.
- Для комментирования войдите или зарегистрируйтесь
Спасибо! Закомментил - заработало.
- Для комментирования войдите или зарегистрируйтесь
Спасибо! Закомментил - заработало.
Нет, так не пойдёт :)
user_access системная функция, а значит у Вас неправильно настроена система. Внимательно посмотрите разрешения, - есть ли у нужных пользователей право "create image content" (и заодно "create gallery content")?
Модуль Content Permissions включен?
Вы другим пользователем пробуете добавлять в существующую галерею или им же создаёте галерею, а потом добавляете?
- Для комментирования войдите или зарегистрируйтесь
Даниэль, что за динамо происходит с моим заказом??!
В аське и почте ты мои сообщения игнорируешь, я уж думал мало ли что, человек в больницу попал! А оказывается он жив-здоров, общается на форуме.
Надеюсь услышать _убедительные_ объяснения происходящему.
- Для комментирования войдите или зарегистрируйтесь
Дан, такая ситуация.
Все сделал, все красиво работает, но появилась проблема.
Неопытные пользователи заходят в Галерею, тыкают на фотку и им открывается фотка, после чего они ее закрывают.
Суть, как сделать так, что бы при клике на изображение (cover gallery) открывалась галерея, а не превьюшная фотография.?
Спасибо
- Для комментирования войдите или зарегистрируйтесь
Заработало. В Content Permissions не стоял чек на edit field_gallery
Спасибо!
- Для комментирования войдите или зарегистрируйтесь
Как интегрировать с swfupload для загрузки фотографий оптом?
- Для комментирования войдите или зарегистрируйтесь
Как интегрировать с swfupload для загрузки фотографий оптом?
В настройках поля Image выбираете соответствующий виджет, в его настройках Storage mode: One image per node и не забудьте указать Redirect url, чтоб после загрузки возвратиться в галерею.
- Для комментирования войдите или зарегистрируйтесь
В настройках поля Image выбираете соответствующий виджет, в его настройках Storage mode: One image per node и не забудьте указать Redirect url, чтоб после загрузки возвратиться в галерею.
Я так понимаю при этом swfupload будет работать на странице создания ноды типа image? Как-то не логично получается...
- Для комментирования войдите или зарегистрируйтесь
Я так понимаю при этом swfupload будет работать на странице создания ноды типа image? Как-то не логично получается...
Почему же? Все логично. У вас создастся энное количество нод типа Image с ссылкой на соответствующий альбом. Все работает, я проверял.
- Для комментирования войдите или зарегистрируйтесь
Суть, как сделать так, что бы при клике на изображение (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]
Сохраняем всё.
Конец.
Как интегрировать с swfupload для загрузки фотографий оптом?
Вам уже ответили. Может и нелогично, но думаю без строчки кода тут не обойтись. Будет время - посмотрю как добавить ссылку в галерею.
- Для комментирования войдите или зарегистрируйтесь
Почему же? Все логично. У вас создастся энное количество нод типа Image с ссылкой на соответствующий альбом. Все работает, я проверял.
Просто было бы лучше на странице редактирования галлереи загружать картинки.
- Для комментирования войдите или зарегистрируйтесь
Здравствуйте!Подскажите, плиз, у меня при нажатии на кнопку "Загрузить фото" выводит следующую ошибку: Произошла HTTP ошибка 0. \n/?q=filefield/ahah/images/field_image_image/0. Как мне от не избавиться?Может я модуль filefield неправильно установил?Может его надо в папку с модулем CCK закинуть?
- Для комментирования войдите или зарегистрируйтесь
Как прицепить Lightbox2 ?
- Для комментирования войдите или зарегистрируйтесь
кто нить ответит на вопрос? :)
- Для комментирования войдите или зарегистрируйтесь
кто нить ответит на вопрос? :)
1. Устанавливаете модуль.
2. В настройках типа содержимого Image выбираете у поля фотографии отображение Lightbox.
- Для комментирования войдите или зарегистрируйтесь
В Internet explorer 8-ой версии в варианте отображения GRID фотки галереи отображаются сжатыми в ширину, например 12 px вместо 80. В режиме HTML список или Unformatted все нормально. Та же проблема в некоторых версиях Оперы. Никто не сталкивался с такой проблемой?
- Для комментирования войдите или зарегистрируйтесь
Подскажите, почему могут не отображаться картинги в списке галерей (“обложке”) для незарегистрированного (анонимного) пользователя? Как это можно изменить? Разрешения для этого пользователя отмечены все, какие есть. Для зарегистрированного пользователя все работает. Списки импортированы из этого руководства.
- Для комментирования войдите или зарегистрируйтесь
Не могу сохранить Viwes в первом шаге(Список галерей) при сохранении постояно вы водиться
"Display "По умолчанию" uses fields but there are none defined for it or all are excluded."
и если кто может подскажите другоё более лёгки способ по созданию вот таких страничек(http://onlineguru.ru/).
Мне нужно создать страничку на которой будет выводиться сеткоё по 12 материалов с картинуами.
- Для комментирования войдите или зарегистрируйтесь
всё разобрался)
- Для комментирования войдите или зарегистрируйтесь
Как интегрировать с swfupload для загрузки фотографий оптом?
У swfupload отвратительная особенность, что при создании перевода ноды для мультиязычных сайтов, изображения не копируются... :( При этом если обратно установить просто image все ок.
- Для комментирования войдите или зарегистрируйтесь
Создал галлерею, через неделю увидел что обьем памяти уменьшилось. Как оказалось, при удалении рисунка из галлереи, в папках imagecache они продолдают своё существование... мда...
- Для комментирования войдите или зарегистрируйтесь
“Только не забудьте сбросить старые картинки (ссылка Flush у настройки)”
Вроде, помогает, если удаляешь картинку из галереи, ненужного не остается.
- Для комментирования войдите или зарегистрируйтесь
Создал галлерею, через неделю увидел что обьем памяти уменьшилось. Как оказалось, при удалении рисунка из галлереи, в папках imagecache они продолдают своё существование... мда...
Естественно. Зачем отслеживать удаление _любых_ файлов на севере (а imagecache может работать с любыми файлами, доступными веб-серверу), когда можно раз в полгода делать очистку кэша картинок (flush)? А можно и не делать - место на хостинге стоит копейки и картинки - это не видео :)
- Для комментирования войдите или зарегистрируйтесь
Dan Хорошо, буду делать flush
- Для комментирования войдите или зарегистрируйтесь
Dan
Такой вопрос... Если я хочу сделать в блоке частичное превью этой галлереи (скажем 4 случайных галлереи из всех).
Я просто во view gallery_list добавляю блок, настраиваю его. Но он "сцепляется" с gallery_cover. А там картинки слишком большие. Как мне сделать новый дисплей или view чтобы в блоке картинки были маленькие?
- Для комментирования войдите или зарегистрируйтесь
views_attach, по сути, формирует тизер. Мы можем только заменить тизер на поля, но такого поля, как картинка у нас нет, для этого надо вместо views_attach использовать, например, node_reference.
Как вариант могу предложить отталкиваться от обратного - сделать рандомный вывод изображений, и связями (relationships) добавить описание галереи, к которой привязано изображение.
- Для комментирования войдите или зарегистрируйтесь
Я даже не знал (не зря говорят: век живи - век учись), что пользуясь грамотно аргументами можно вытворять такие штуки.
Спасибо автору за подробную инструкцию.
- Для комментирования войдите или зарегистрируйтесь
Это только верхушка айсберга работы с аргументами. Они гораздо мощнее.
Вливайся :)
- Для комментирования войдите или зарегистрируйтесь
насчет swfupload подскажите, пожалуйста, куда нужно тыкнуть, что бы он заработал? :)
у меня Image FUpload
поставил все как было сказано выше, но ничего не изменилось.
- Для комментирования войдите или зарегистрируйтесь
У меня он тоже не заработал для существующего типа материала. Создал новое - всё ок. Разбираться не стал. Попробуйте.
- Для комментирования войдите или зарегистрируйтесь
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- следующая ›
- последняя »











Комментарии