Не знаю как Вы, но я начал внедрять Drupal 7 в своих проектах сразу после его выхода и за то время что я работаю с ним пришлось решить немало различных проблем с реализацией того или иного функционала в сайтах. Сегодня я хочу поговорить о реализации красивой галереи для сайта.
Все подробности моего решения изложены далее в посте, у кого возникнут вопросы относительно реализации, прошу писать в комментариях к записи.
Для реализации задуманного нам понадобится последняя версия Drupal 7 и следующие модули: Views, Colorbox также желательно поставить Token, и Сtools без него не будет работать Views.
Локализируем все это дело по вкусу и идем дальше. Для функционирования Colorbox нам необходимо загрузить саму библиотеку и поместить её в sites/all/libraries/colorbox.
Сказано, сделано. Теперь давайте создадим новый тип материала, сделать это можно по адресу /admin/structure/types аналогично – Администрирование –> Структура –> Типы материалов.
Тут сам процесс практически ничем не отличается от создания новых типов для Drupal 6. Ну что же создаем новый тип, пусть он будет называть Фотоотчет. Теперь можно увидеть в нашем списке материалов только что созданный нами тип Фотоотчет.
Теперь в колонке действия для нашего типа нажимаем на ссылочку управления полями. И создаем новое поле, тип хранения данных – изображение, виджет изображение. В настройках поля можно указать каталог для хранения файлов fotoreports/[random:number], чтобы использовать [random:number] у вас должен быть установлении Token. Дальше тут все стандартно, укажем максимальный размер загружаемого файла, минимальное и максимальное разрешение для загружаемой картинки, в поле количество значений установим – Не ограничено.
Теперь возвращаемся к списку наших типов, и в колонке действием для нашего типа нажимаем – Управление отображением. Тут мы видим созданное нами поле – изображение. В колонке формат для данного поля изменим в списке с изображение на colorbox, сохраняем, и видим правее от этого поля, появилась иконка с шестеренкой, нажимаем на нее. Давай те настроем обработку этого поля, можете сделать, как показано на картинке ниже.
У вас стили изображения могут отличаться от моих, но стандартные типы как medium буду присутствовать. Создать свой стиль для отображения можно тут — /admin/config/media/image-styles. И так вернемся к настройке поля, после того как вы настроили это поле сохраняем и можем создать пробную фотогалерею.
Выглядеть она будет примерно так же как на фотографии ниже. Единственное что я немного обработал её с помощью CSS.
При клике на картинку будем видеть следующие.
Варианты отображения тут кстати тоже можно настроить, сделать это можно вот тут — /admin/config/media/colorbox в поле стиль, всего там 8 вариантов оформления.
Теперь зачем тут Views спросите вы. С помощь этого замечательного модуля мы можем создать представление для галереи. Думаю тут у Вас проблем быть не должно, просто создадим представление для материалов типа Фотоотчет. Скрин настоек представление на всякий случай прикладываю ниже.
Ну и собственно, еще ниже изображение результат данного представления.
Ну, вот как то так, по вкусу можете еще обыграть это дело с помощью css. Если есть вопросы пишете комментарии, постараюсь всем ответить.
Уведомление: Давненько я ничего не писал… | Блог им. Майборода Владимира | Блог им. Майборода Владимира
Впервые взялся за друпал, потому вполне чайник.
Подскажите, плз:
1. Полностью использовал Ваши замечательные рецепты, но фото грузятся в «фотоотчете» в колонку.
2. Я так понимаю, что у вас русифицирован views. К сожалению, с русификацией 7-го друпала у меня проблемы. Есть ли автоматическое обновление? И если в оригинале в модуле нет файла translations, то куда его ставить?
Спасибо
Спасибо за статью! Искал как сделать галерею несколько месяцев и нашел!
Однако мне повезло больше, я искал в течении часа )))
Но как в самой ноде сделать так, чтобы изображения в предосмотре были рядом, а не одно на одном? вот пример http://greengrey.com.ua/content/78687687
аа, наверное это делается в CSS, но вот только где именно?
В файле css вашей темы.
не помогает. может быть нужно подредактировать CSS colorbox’а?
Установи модуль insert и вставляй изображения куда хочешь.
уже разобрался. помог мне в этом Firebug. Нужно было добавить в CSS темы код: float: left;
а нет, проблема была глубже: пришлось редактировать CSS системы.
Вот только комментировать фотографии не получится и голосования нет.